• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

浏览器渲染机制、重绘、重排

开发技术 开发技术 5天前 7次浏览

1、渲染

1.解析:html和css被解析

2.构建DOM:html被html解析器解析成DOM树

3.构建CSSDOM树:css被css解析器解析成CSS规则树

4.js脚本执行

5.渲染树构建:将HTML和CSS合成render树

6.布局(重绘重排):生成布局(flow),即将所有渲染树的所有节点进行平面合成

7.绘制:将布局绘制到屏幕上

2、重绘

当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。

触发:
改变元素的color、background、box-shadow等属性

3、重排

当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。

触发:

添加或者删除可见的DOM元素
元素尺寸改变边距、填充、边框、宽度和高度

  • 重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置)


程序员灯塔
转载请注明原文链接:浏览器渲染机制、重绘、重排
喜欢 (0)