Web前端性能优化工程师面试宝典 - 第4节

面试问题：如何优化关键渲染路径来提升首屏加载速度？

面试官考察点：是否理解CRP的步骤（DOM→CSSOM→Render Tree→Layout→Paint→Composite），能否量化优化手段。

回答框架：

1. 阐述CRP的6个阶段；
2. 针对每个阶段的阻塞因素做准备（如CSS阻塞渲染，JS阻塞解析）；
3. 给出具体方案：内联关键CSS、async/defer脚本、预加载资源、压缩文件。

简短示例回答：“我会先分析当前页面的CRP，通过内联首屏CSS消除阻塞，将非关键JS标记为async/defer，并利用preload预加载字体和图片，使首屏DOMContentLoaded时间降低30%。”（约90字）

可能追问：“如果页面使用了大量Web字体，你怎么处理CRP？”

面试问题：回流（Reflow）和重绘（Repaint）有什么区别？如何避免它们？

面试官考察点：是否清楚两者触发场景及性能代价，能否说出“批量读-写”等核心优化策略。

回答框架：

1. 定义回流（布局变化）引起重绘、重绘（外观变化）不引起回流；
2. 列举常见触发操作（修改几何属性、窗口缩放等）；
3. 优化方案：使用class一次性修改样式、缓存布局信息、用transform代替top/left。

简短示例回答：“回流代价远大于重绘。我会通过虚拟DOM或DocumentFragment批量操作DOM，避免强制同步布局；动画使用transform替代left，让浏览器只触发合成，不触发回流。”（约85字）

可能追问：“浏览器如何合并多次回流/重绘？”

面试问题：如何利用GPU加速提升渲染性能？它有什么潜在问题？

面试官考察点：是否理解GPU加速的原理（提升至合成层），能否说出常用触发方式（will-change、translateZ等）以及内存/CPU开销。

回答框架：

1. 解释GPU加速将元素提升为独立合成层，由GPU合成；
2. 常用方法：CSS属性will-change、translate3d、video/iframe；
3. 风险点：过多层会导致内存暴增、启动时可能卡顿。

简短示例回答：“我会在动画元素上使用will-change: transform，让浏览器提前为其创建合成层；但不会滥用——对大量静态元素使用硬件加速反而浪费GPU内存，需配合性能面板监控层数。”（约80字）

可能追问：“移动端GPU加速的电力消耗如何权衡？”