1. cookie，localStorage，sessionStorage，indexDB

特性cookielocalStorageseeesionStorageindexDB
数据生命周期由服务器生成，需设置过期时间除非被清理，否则一直存在页面关闭就清理除非被清理，否则一直存在
数据存储大小4K5M5M无限
与服务端通信每次都会携带在 header 中不参与不参与不参与

2. IE 和标准下有哪些兼容性的写法

1
2
3
const ev = ev || window.event;
document.documentElement.clientWidth || document.body.clientWidth;
const target = ev.srcElement || ev.target;

3. 事件委托是什么

1
利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

4. Javascript 的事件流模型都有什么?

1
2
3
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

5. 阻止默认行为

1
2
3
4
5
6
7
8
9
10
function stopDefault(e) {
  // 阻止默认浏览器动作(W3C)
  if (e && e.preventDefault) {
    e.preventDefault();
  } else {
    // IE中阻止函数器默认动作的方式
    window.event.returnValue = false;
  }
  return false;
}

6. 阻止冒泡

1
2
3
4
5
6
7
8
9
10
function stopBubble(e) {
  // 如果提供了事件对象，则这是一个非IE浏览器
  if (e && e.stopPropagation) {
    // 因此它支持W3C的stopPropagation()方法
    e.stopPropagation();
  } else {
    // 否则，我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
  }
}

7. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1
2
3
4
5
6
7
8
（1）查找浏览器缓存
（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
（3）进行HTTP协议会话
（4）客户端发送报头(请求报头)
（5）服务器回馈报头(响应报头)
（6）html文档开始下载
（7）文档树建立，根据标记请求所需指定MIME类型的文件
（8）文件显示

8. BFC 规范

1
块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

9. documen.write 和 innerHTML 的区别

1
2
* document.write只能重绘整个页面
* innerHTML可以重绘页面的一部分

10. 图片懒加载与预加载

1
2
1.图片懒加载的原理就是暂时不设置图片的src属性，而是将图片的url隐藏起来，比如先写在data-src里面，等某些事件触发的时候(比如滚动到底部，点击加载图片)再将图片真实的url放进src属性里面，从而实现图片的延迟加载
2.图片预加载，是指在一些需要展示大量图片的网站，实现图片的提前加载。从而提升用户体验。常用的方式有两种，一种是隐藏在css的background的url属性里面，一种是通过javascript的Image对象设置实例对象的src属性实现图片的预加载

11. 浏览器渲染原理

  1. 浏览器接收到 HTML 文件并转换为 DOM 树

image-20211217162704329

1
2
3
(1)浏览器接收到0,1这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码;
(2) 当数据转换为字符串以后，浏览器会先将这些字符串通过词法分析转换为标记（token），这一过程在词法分析中叫做标记化（tokenization）。
(3) 当结束标记化后，这些标记会紧接着转换为 Node，最后这些 Node 会根据不同 Node 之前的联系构建为一颗 DOM 树。
  1. 将 CSS 文件转换为 CSSOM 树

image-20211217162743045

1
在这一过程中，浏览器会确定下每一个节点的样式到底是什么，并且这一过程其实是很消耗资源的。因为样式你可以自行设置给某个节点，也可以通过继承获得。在这一过程中，浏览器得递归 CSSOM 树，然后确定具体的元素到底是什么样式。
  1. 生成渲染树
1
2
在这一过程中，不是简单的将两者合并就行了。渲染树只会包括需要显示的节点和这些节点的样式信息，如果某个节点是 display: none 的，那么就不会在渲染树中显示。
当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流），然后调用 GPU 绘制，合成图层，显示在屏幕上。

12. 为什么操作 DOM 慢

1
DOM 是属于渲染引擎中的东西，而 JS 又是 JS 引擎中的东西。当我们通过 JS 操作 DOM 的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作 DOM 次数一多，也就等同于一直在进行线程之间的通信，并且操作 DOM 可能还会带来重绘回流的情况，所以也就导致了性能上的问题。

13. 什么情况阻塞渲染

1
2
3
4
5
* 首先渲染的前提是生成渲染树，所以 HTML 和 CSS 肯定会阻塞渲染。如果你想渲染的越快，你越应该降低一开始需要渲染的文件大小，并且扁平层级，优化选择器。
* 然后当浏览器在解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。
* 当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。
* 当 script 标签加上 defer 属性以后，表示该 JS 文件会并行下载，但是会放到 HTML 解析完成后顺序执行，所以对于这种情况你可以把 script 标签放在任意位置。
* 对于没有任何依赖的 JS 文件可以加上 async 属性，表示 JS 文件下载和解析不会阻塞渲染。

14. 重绘（Repaint）和回流（Reflow）

  • 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘

  • 回流是布局或者几何属性需要改变就称为回流。

1
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。
  • 以下几个动作可能会导致性能问题:
1
2
3
4
5
6
* 改变 window 大小
* 改变字体
* 添加或删除样式
* 文字改变
* 定位或者浮*
* 盒模型