浏览器如何把页面画出来

从资源到页面结构

浏览器拿到 HTML 后会解析文档，构建页面结构；样式资源则参与生成用于计算外观的信息。脚本的加载与执行时机可能影响解析和后续更新，所以定位问题时要一起看资源瀑布图与主线程活动。

这条路径不必死记成一张绝对固定的流程图。现代浏览器会并行处理部分工作，也会因为缓存、脚本和页面结构而改变具体时序。

布局、绘制与合成

元素的尺寸和位置确定后，浏览器才知道各部分应该放在哪里。接下来，文字、边框与背景等内容被绘制；某些内容还会作为独立图层参与合成。

页面卡顿时，先观察哪一类工作反复发生：是 JavaScript 占用了大量主线程时间，是布局计算频繁，还是绘制区域过大。不同原因对应不同解决方式。

// 先观察，再针对具体瓶颈调整页面。
performance.mark('before-update');
// 在这里执行需要测量的更新
performance.mark('after-update');
performance.measure('update', 'before-update', 'after-update');

让验证靠近真实使用

一台高性能电脑上的流畅，不代表所有设备都有同样体验。检查首屏加载，也检查点击、输入、滚动等真实交互；对比不同设备与网络条件下的表现。

研究机制的意义，是让排查有更好的起点。先弄清发生了什么，再选择最小、最有证据支持的改动。