参考博客：http://www.admin10000.com/Common/Print.aspx?DocumentId=17719
什么是DOM
Document Object Model 文档对象模型
HTML是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。在浏览器端，前端可以用js通过dom去操作HTML内容。
浏览器渲染过程
讨论DOM操作成本，首先了解该成本的来源，浏览器渲染。
1.解析HTML，构建DOM树
2.解析CSS，生成CSS规则树
3.合并DOM树和CSS规则，生成render树
4.布局render树，负责各元素尺寸、位置的计算
5.绘制render树，绘制页面像素信息
6.浏览器会将各层的信息发送给GPU，GPU将各层合成，显示在屏幕上
何时触发reflow和repaint
reflow(回流): 根据Render Tree布局(几何属性)，意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树；
repaint(重绘): 意味着元素发生的改变只影响了节点的一些样式（背景色，边框颜色，文字颜色等），只需要应用新样式绘制这个元素就可以了；
reflow回流的成本开销要高于repaint重绘，一个节点的回流往往回导致子节点以及同级节点的回流；
网友评论