前端面试题 1

1、Jq中get和eq有什么区别？

get() :取得其中一个匹配的元素。num表示取得第几个匹配的元素，get多针对集合元素，返回的是DOM对象组成的数组 eq():获取第N个元素，下标都是从0开始，返回的是一个JQuery对象

2、页面可见性（Page Visibility）API 可以有哪些用途

1、 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。

2、 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

3、同步异步?

1、 进程同步：就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事

2、 异步的概念和同步相对。当一个异步过程调用发出后，调用者不能立刻得到结果。实际处理这个调用的部件在完成后，通过状态、通知和回调来通知调用者。

4、undefined 和 null 有什么区别？

在理解 undefined 和 null 的差异之前，我们先来看看它们的相似点。

它们都属于 JavaScript 的 7 种基本类型。

let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint'];

它们是属于 falsy 值类型，可以使用 Boolean(value) 或 !!value 将其转换为布尔值时，值为false。

console.log(!!null); // false
console.log(!!undefined); // false

console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

接着来看看它们的区别。

undefined 是未指定特定值的变量的默认值，或者没有显式返回值的函数，如：console.log(1)，还包括对象中不存在的属性，这些 JS 引擎都会为其分配 undefined 值。

let _thisIsUndefined;
const doNothing = () => {};
const someObj = {
  a : "ay",
  b : "bee",
  c : "si"
};

console.log(_thisIsUndefined); // undefined
console.log(doNothing()); // undefined
console.log(someObj["d"]); // undefined

null 是『不代表任何值的值』。null是已明确定义给变量的值。在此示例中，当fs.readFile方法未引发错误时，我们将获得null值。

fs.readFile('path/to/file', (e,data) => {
   console.log(e); // 当没有错误发生时，打印 null
   if(e){
     console.log(e);
   }
   console.log(data);
 });

在比较null和undefined时，我们使用==时得到true，使用===时得到false:

console.log(null == undefined); // true
console.log(null === undefined); // false

5、你对line-height是如何理解的？

1、 行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。

2、 单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。

3、 多行文本垂直居中：需要设置display属性为inline-block。

6、什么是移动端的300ms延迟？什么是点击穿透？解决方案?

移动端300ms延迟：假定这么一个场景。用户在 浏览器里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，浏览器 就等待 300 毫秒，以判断用户是否再次点击了屏幕。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。

点击穿透：假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。这是因为在移动端浏览器，事件执行的顺序是touchstart touchend click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

300ms延迟解决方案：

(1) 禁用缩放，在html文档头部加meta标签如下：

(4) FastClick为解决移动端浏览器300毫秒延迟开发的一个轻量级的库

点击穿透解决方案：

（1）只用touch

（2）只用click

（3）tap后延迟350ms再隐藏mask

（4）pointer-events

7、如何在不使用%模运算符的情况下检查一个数字是否是偶数？

我们可以对这个问题使用按位&运算符，&对其操作数进行运算，并将其视为二进制值，然后执行与运算。

function isEven(num) { if (num & 1) { return false } else { return true } }

0 二进制数是 000 1 二进制数是 001 2 二进制数是 010 3 二进制数是 011 4 二进制数是 100 5 二进制数是 101 6 二进制数是 110 7 二进制数是 111

以此类推…

因此，当我们执行console.log(5&1)这个表达式时，结果为1。首先，&运算符将两个数字都转换为二进制，因此5变为101，1变为001。

然后，它使用按位怀运算符比较每个位（0和1）。101&001，从表中可以看出，如果a & b为1，所以5&1结果为1。

101 & 001

101

001

001

1、 首先我们比较最左边的1&0，结果是0。

2、 然后我们比较中间的0&0，结果是0。

3、 然后我们比较最后1&1，结果是1。

4、 最后，得到一个二进制数001，对应的十进制数，即1。

由此我们也可以算出console.log(4 & 1) 结果为0。知道4的最后一位是0，而0 & 1 将是0。如果你很难理解这一点，我们可以使用递归函数来解决此问题。

function isEven(num) {
  if (num < 0 || num === 1) return false;
  if (num == 0) return true;
  return isEven(num - 2);
}

8、静态网页和动态网页区别：

静态: 网页内容任何人在任何时间访问都是不变的

动态: 网页内容不同人在不同时间访问可能是不同的

9、压缩合并目的？http请求的优化方式？

1）Web性能优化最佳实践中最重要的一条是减少HTTP请求。而减少HTTP请求的最主要的方式就是，合并并压缩JavaScript和CSS文件。

CSS Sprites（CSS精灵）：把全站的图标都放在一个图像文件中，然后用CSS的background-image和background-position属性定位来显示其中的一小部分。

合并脚本和样式表; 图片地图：利用image map标签定义一个客户端图像映射，（图像映射指带有可点击区域的一幅图像）具体看： http://club.topsage.com/thread-2527479-1-1.html

图片js/css等静态资源放在静态服务器或CDN服时，尽量采用不用的域名，这样能防止cookie不会互相污染，减少每次请求的往返数据。

css替代图片, 缓存一些数据

少用location.reload()：使用location.reload() 会刷新页面，刷新页面时页面所有资源 (css，js，img等) 会重新请求服务器。建议使用location.href=”当前页url” 代替location.reload() ，使用location.href 浏览器会读取本地缓存资源。

10、展开(spread )运算符和 剩余(Rest) 运算符有什么区别？

展开运算符(spread)是三个点(...)，可以将一个数组转为用逗号分隔的参数序列。说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个单独的小元素。

剩余运算符也是用三个点(...)表示，它的样子看起来和展开操作符一样，但是它是用于解构数组和对象。在某种程度上，剩余元素和展开元素相反，展开元素会“展开”数组变成多个元素，剩余元素会收集多个元素和“压缩”成一个单一的元素。

function add(a, b) {
  return a + b;
};

const nums = [5, 6];
const sum = add(...nums);
console.log(sum);

在本例中，我们在调用add函数时使用了展开操作符，对nums数组进行展开。所以参数a的值是5 ，b的值是6，所以sum 是11。

function add(...rest) {
  return rest.reduce((total,current) => total + current);
};

console.log(add(1, 2)); // 3
console.log(add(1, 2, 3, 4, 5)); // 15

在本例中，我们有一个add函数，它接受任意数量的参数，并将它们全部相加，然后返回总数。

const [first, ...others] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(others); // [2,3,4,5]

这里，我们使用剩余操作符提取所有剩余的数组值，并将它们放入除第一项之外的其他数组中。