这篇博客详细阐述了浏览器的渲染流程，包括解析HTML生成DOM树、CSSOM树的构建，以及如何合并DOM和CSSOM生成渲染树。接着，讨论了渲染树的布局计算和屏幕渲染过程。文中还提到了CSS和JS如何阻塞页面渲染，以及重排（Reflow）和重绘（Repaint）的概念，强调了减少重排重绘以优化前端性能的重要性。
渲染流程：
1.解析HTML，生成DOM树（DOM）
2.解析CSS，生成CSSOM树（CSSOM）
3.将DOM和CSSOM合并，生成渲染树（Render-Tree）
4.计算渲染树的布局（Layout）
5.将布局渲染到屏幕上（Paint）
思考：
第三步构建渲染树的时候，渲染引擎需要遍历DOM树节点并从CSSOM树中找到匹配的样式规则，再匹配过程中是通过自上而下还是自下而上的方式呢？
关键概念：
CSS阻塞渲染
JS阻塞页面
重排（Reflow）、触发重排
重绘（Repaint）、触发重绘
最小化重排重绘
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
