浏览器渲染原理
💡
原文约2300字/词，阅读约需6分钟。
📝
内容提要
浏览器渲染页面的流程包括html解析、样式计算、布局、分层、绘制、分块、光栅化和绘画等多个阶段。解析过程中，css不会阻塞html解析，而js会阻塞html解析。渲染完成后得到dom树和cssom树，然后进行样式计算、布局和分层。主线程为每个层生成绘制指令集，合成线程进行分块和光栅化，最后生成位图并绘画。reflow是重新计算布局树，repaint是重新计算绘制指令。transform的效率高因为它只影响渲染流程的最后一个阶段。
🎯
关键要点
- 浏览器渲染页面的流程包括多个阶段：html解析、样式计算、布局、分层、绘制、分块、光栅化和绘画。
- css解析不会阻塞html解析，而js会阻塞html解析。
- 解析完成后生成dom树和cssom树，进行样式计算、布局和分层。
- 主线程为每个层生成绘制指令集，合成线程进行分块和光栅化，最终生成位图并绘画。
- reflow是重新计算布局树，repaint是重新计算绘制指令。
- transform的效率高，因为它只影响渲染流程的最后一个阶段。
➡️
