题目重点：解释关键渲染路径、阻塞和重复计算，区分网络加载与主线程首屏瓶颈。
题意与假设
这道练习题保留了面经中值得训练的核心约束，并将需要澄清的条件单独列出。现场拿到变体时，先和面试官确认这些条件。
- 训练现代浏览器页面渲染概念，不把内部线程/阶段调度细节视所有引擎固定。
解题路线
- HTML解析形成DOM，CSS解析形成样式规则，计算节点样式并建立参与渲染的结构；并非DOM所有节点都必需视觉布局，display:none等会影响。
- layout计算几何位置尺寸，paint生成绘制指令，合成把图层组合呈现。改变属性可能触发不同工作，不能把所有更新统一叫重新绘制整页。
- 某些script/CSS资源会影响解析或首次呈现，字体图片也会改变后续布局；浏览器可增量渲染，不是必须等全部网络完成才显示。
- 同步交错写样式再读几何可能强制layout，循环多次会放大成本；批量读再写、减少DOM数量和避免不必要更新比单纯压缩JS更有针对性。
- 合成动画常可少触主线程布局，但图层也占内存且依属性/实现，不能把所有元素强制升层当万能性能优化。
- 定位用性能时间线区分scripting/style/layout/paint及长任务，配合真实设备/交互。指标应关注用户首屏、布局稳定与响应，不只load。
手动走一遍
在循环每次改width后读offsetWidth会迫使浏览器确认几何，可能重复layout。若只是transform动画，通常可走不同路径，但具体是否合成需检查而非保证。
规模与取舍
工作随DOM/样式依赖和改动范围增长，复杂选择器/脚本算法也影响；帧预算由刷新率和设备决定，不给统一浏览器渐近界。
易错点与追问
容易失分的边界
- 等所有资源完才第一次渲染。
- 所有属性更新都会同样重排。
- 强制图层越多越快。
继续深挖
- 哪些读操作可能强制layout？
- 字体加载如何影响布局稳定？
- 如何区分网络与CPU首屏慢？
