重绘与回流

当 Render Tree 当中有元素的大小、布局、结构等发生改变时，就会触发回流，每个页面在首次加载的时候都需要进行至少一次回流；

当 Render Tree 有元素属性需要更新，这些属性只是影响元素的外观、风格，那么则会触发重绘。

重绘不一定导致回流，回流一定会导致重绘。

回流比重绘的代价要更高。

前言

前端需要频繁操作 DOM，为了提高网站性能，需要针对 DOM 操作进行相应优化。

使用DOM的引用

比如：我们需要对一组 li 标签进行遍历操作，我们可以用一个变量 length 把这组 li 标签的长度保存下来，然后基于length 进行遍历。

使用事件代理批量处理事件

比如：给一系列子元素 li 添加绑定事件，可以通过事件代理来进行优化。

浏览器的渲染引擎

• IE（Trident）
• Chrome（Blink）
• Firefox（Gecko）
• Opera（Blink）
• Safari（Webkit）
• UC（U3）
• QQ浏览器微信（X5/Blink）

Blink 渲染引擎占据了半壁江山，Blink 的前身都是由 Webkit 优化改造而来的。浏览器内核决定了浏览器解释网页语法的方式。不同的渲染引擎，从而也导致了浏览器的兼容性问题。

什么是文件指纹

• 打包后输出文件名的后缀
• 通常用于版本管理
• hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存

浏览器缓存

浏览器缓存机制有四个方面，它们按照获取资源时请求的优先级依次排列如下：

• Memory Cache
• Service Worker Cache
• HTTP Cache
• Push Cache

其中，“from memory cache”对标到 Memory Cache 类型，“from ServiceWorker”对标到 Service Worker Cache 类型。至于 Push Cache，这个比较特殊，是 HTTP2 的新特性。