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 有什么区别?

在理解 undefinednull 的差异之前,我们先来看看它们的相似点。

它们都属于 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);
 });

在比较nullundefined时,我们使用==时得到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变为1011变为001

然后,它使用按位怀运算符比较每个位(01)。101&001,从表中可以看出,如果a & b1,所以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的值是5b的值是6,所以sum11

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]

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


集中精神,以气御剪