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