浏览器的渲染过程:
- 浏览器将HTML解析成一个DOM Tree;
- 将CSS解析成一个CSSOM(CSS Object Model)树;
- 合成渲染树:将DOM 树和CSSOM 树合成成一个Rendering Tree渲染树;
- 有了渲染树,浏览器已经知道了文档HTML中有哪些节点和各个节点的CSS样式及他们之间的从属关系,接下来就是Layout计算出各个节点在屏幕中的位置。
- 最后就是绘制了。
重排Reflow:
Dom结构中各个元素都有自己的盒子(模型),这些都需要浏览器根据css样式来进行计算并根据计算的结果将元素放置到它该放的位置上,这个位置称为Reflow。
哪些操作会触发Reflow:
1.增加、删除、修改DOM节点都会触发重排和重绘;
2.移动DOM的位置;
3.修改元素的样式;
4.修改网页的默认字体。
重绘Repaint:
当盒子的位置、大小、颜色及其他属性确定下来后,浏览器会按照这些特性将这些元素绘制出来,这个过程称为Repaint。
什么操作会触发重绘:
无论是Dom改动还是CSS改动,只要改变了当前的显示就会触发重绘。
如何尽量少的重绘:尽量将多次Dom操作改为一次操作