DOM操作成本到底高在哪里

什么是DOM

Document Object Model 文档对象模型

CSSOM：CSS Object Model
浏览器将css代码解析成树形的数据结构，与DOM是两个独立的数据结构

浏览器渲染过程

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

repaint 和 reflow

reflow（回流）：根据Render Tree布局，意味着元素的内容、结构、位置或者尺寸发生了变化，需要重新计算样式和渲染树。
repaint（重绘）：以为这元素发生的改变只影响了节点的一些样式（如背景色、边框颜色、文字颜色），只需要应用新样式绘制这个元素就可以了；
reflow回流的成本开销要高于repaint重绘，一个节点的回流往往会导致子节点以及同级节点的回流；

引起reflow回流

现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流。

1. 页面第一次渲染
2. DOM树变化（如增删节点）
3. Render树变化（如padding改变）
4. 浏览器窗口resize
5. 回去元素的某些属性

引起repaint重绘

1. reflow回流必定引起repaint重绘，重绘可以单独触发
2. 背景色、字体颜色