03渲染优化-01浏览器渲染原理

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: 合并图层（绘制的时候，元素并不一定都绘制在同一个图层上）。