dom渲染优化

1. 减少dom节点

   dom cssom

   什么是 DOM？可能很多人第一反应就是 div、p、span 等 html 标签（至少我是），但要知道，DOM 是 Model，是 Object Model，对象模型，是为 HTML（and XML）提供的 API。HTML(Hyper Text Markup Language)是一种标记语言，HTML 在 DOM 的模型标准中被视为对象，DOM 只提供编程接口，却无法实际操作 HTML 里面的内容。但在浏览器端，前端们可以用脚本语言（JavaScript）通过 DOM 去操作 HTML 内容。

   实质上还存在 CSSOM：CSS Object Model，浏览器将 CSS 代码解析成树形的数据结构，与DOM 是两个独立的数据结构。

   接下来说一说浏览器渲染。过程。

   https://blog.csdn.net/CSDNWuZhiChun/article/details/119786163

   DOM 操作成本

   讨论 DOM 操作成本，肯定要先了解该成本的来源，那么就离不开浏览器渲染。

   1. 解析 HTML，构建 DOM 树（这里遇到外链，此时会发起请求）
   2. 解析 CSS，生成 CSS 规则树
   3. 合并 DOM 树和 CSS 规则，生成 render 树
   4. 布局 render 树（Layout/reflow），负责各元素尺寸、位置的计算
   5. 绘制 render 树（paint），绘制页面像素信息
   6. 浏览器会将各层的信息发送给 GPU，GPU 将各层合成（composite），显示在屏幕上

   ---

2. 构建dom树

3. 构建CSSOM 树

4. 生成render 树

5. Layout 布局

6. Paint 绘制