JavaScript DOM的性能优化详解

本身JS操作DOM就比较消耗性能，你可以理解为JS和dom是独立的小岛，用桥实现两者的联系，但桥很窄，要过路费，所以我们要尽最大可能减少过桥的次数。

再加上每次操作DOM都会触发布局的改变、DOM树的修改和渲染。也就是说操作DOM会引发重排(回流）与重绘，这个过程也是非常消耗资源的。所以要尽量避免重复操作DOM元素。

DOM性能优化的本质：

就是减少对DOM查询及减少DOM操作（增、删、改）引起的重排（回流）和重绘的次数

DOM性能优化方法：

1. 合并多次对css样式的修改，改为一次处理
2. 对DOM查询做缓存
3. 将频繁DOM操作改为一次性操作
4. 操作DOM前，先把DOM节点删除或隐藏
5. 采用事件代理处理事件

在讲解5种优化方法之前，我们需要先了解什么是重排(回流）和重绘，要了解重排（回流）和重绘，就需要先了浏览器的渲染机制，所以我们先从浏览器的渲染机制开始讲起。

一、浏览器的渲染机制

浏览器的整个渲染过程（下图）

• 解析 HTML，构建 DOM 树
• 解析 CSS，生成 CSS 规则树
• 合并 DOM 树和 CSS 规则树，生成 render（渲染）树。
• 布局 render 树（回流 / 重排）,负责各元素尺寸、位置的计算。
• 绘制 render 树（painting 重绘），绘制页面像素信息
• 浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（composite），显示在屏幕上。

构建渲染树时，浏览器主要完成以下工作

• 从 DOM 树的根节点开始遍历每个可见节点
• 对每个可见节点，找到 CSS 规则树中对应的规则，并应用它们
• 根据每个可见节点以及其对应的样式，组合生成渲染树

不可见节点（也就是不会出现在渲染树中的节点）

• 一些不会渲染输出的节点（如：script、meta、link 等）
• 一些通过 css 进行隐藏的节点（如：display: none）

注意点：

• 样式为display:none;的节点会在DOM树中而不在渲染树中
• visiblity 和 opacity 隐藏的节点在DOM和渲染树中同时存在。
• 浏览器绘制之后便开始解析js文件，根据js对DOM的操作来确定是否会再次发生重排（回流）和重绘。

二、什么是重排（回流）和 重绘

重排（回流）

当渲染树（render tree)中的一部分或全部因为元素的规模尺寸、大小等改变