浏览器渲染流程与重排重绘优化指南
1. 浏览器渲染流程基础认知当我们在地址栏输入网址按下回车后浏览器究竟是如何把代码变成屏幕上绚丽画面的这个问题困扰过无数前端开发者。要理解重排Reflow和重绘Repaint的本质区别我们需要先拆解浏览器的渲染流水线。现代浏览器内核的渲染引擎工作流程可以简化为以下几个关键阶段解析HTML构建DOM树浏览器从网络或本地获取HTML字节流通过词法分析转换为字符再经过语法分析构建DOMDocument Object Model节点树。这个过程是逐步进行的浏览器不会等到所有HTML都解析完毕才开始构建和布局。解析CSS构建CSSOM在解析HTML过程中遇到 / 或