浏览器页面渲染机制

渲染流程：

 

 

 

1.解析HTML，生成DOM树（DOM）
2.解析CSS，生成CSSOM树（CSSOM）
3.将DOM和CSSOM合并，生成渲染树（Render-Tree）
4.计算渲染树的布局（Layout）
5.将布局渲染到屏幕上（Paint）

思考：

第三步构建渲染树的时候，渲染引擎需要遍历DOM树节点并从CSSOM树中找到匹配的样式规则，再匹配过程中是通过自上而下还是自下而上的方式呢？

关键概念：
CSS阻塞渲染
JS阻塞页面
重排（Reflow）、触发重排
重绘（Repaint）、触发重绘
最小化重排重绘

参考：

浏览器的渲染：过程与原理

浏览器页面资源加载过程与优化

浏览器加载及渲染机制<