1. 浏览器的渲染流程
JavaScript --> style --> layout --> paint --> composite
1.1 浏览器构建对象模型
浏览器读取到HTML文档后,会把此文档解析为DOM树。(DOM:文档对象模型)
关键渲染路径:从渲染开始到绘制完成的过程。共5个步骤:
JavaScript --> Style --> Layout --> Paint --> Composite
- JavaScript:通过JavaScript(或CSS或web animation api等等)触发页面视觉样式的变化;
- Style: 浏览器重新对样式进行计算,确定最终样式。
- Layout: 对DOM进行布局;按照上面确定的最终样式进行绘制。
- Paint: 正式开始绘制。
- Composite: 合并图层(绘制的时候,元素并不一定都绘制在同一个图层上)。