浏览器渲染原理:
- 浏览器在渲染页面之前会先构建
DOM
树和CSSDOM
树。 HTML
会转换成文档对象模型DOM
,CSS
会转换成CSS
对象模型CSSDOM
。它们两个是互相独立的数据结构。DOM
和CSSDOM
组合在一起形成渲染树。- 遍历
DOM
树节点 - 对每个
DOM
节点用合适的CSSDOM
规则去匹配 - 计算出最终布局,样式
- 遍历
- 最后将它们合并到一起,渲染在页面中
样式更新
浏览器将页面渲染好之后,后面是如何动态更新样式的:
- 通过
javascript
动态更新 - 根据选择器匹配对应的
DOM
,计算出style
是布局还是样式,如下图所示:- 如果是更改布局,是会依次触发
- 如果布局没有改动,只是更改了颜色之类的,
layout
将不会触发 - 如何既不改布局,也不改样式啥的,
layout
和paint
都不会触发,只会触发最后的composite