前端面试常青题的 20 个高频考点：渲染流水线六阶段、重排与重绘、合成层与 GPU 加速、defer/async 区别、Core Web Vitals 三大指标，以及按阶段归类的优化手段与高分答题框架。
关键词浏览器渲染、重排、重绘、LCP、INP、CLS、前端面试题
目录
“从输入 URL 到页面显示”是前端面试的常青题，但大多数人只能背出流程，一旦被追问到渲染流水线的具体阶段、每层优化的落点、以及如何量化效果就卡壳了。
本文按真实面试的追问深度，把渲染与性能这一块拆成 20 个高频考点，每题给出”标准答法 + 追问陷阱”。
一、渲染流水线：先背熟这张图
浏览器把 HTML 变成屏幕像素，大致经过这些阶段：
- 解析 HTML → 构建 DOM 树；
- 解析 CSS → 构建 CSSOM 树；
- DOM + CSSOM → 生成渲染树（Render Tree）；
- 布局（Layout / Reflow） → 计算每个节点的几何位置与尺寸；
- 绘制（Paint） → 生成绘制指令；
- 合成（Composite） → 分层、栅格化、最终上屏。
追问陷阱：“渲染树和 DOM 树有什么区别？”
答：渲染树只包含可见节点。display: none的节点不在渲染树中，而visibility: hidden的节点仍在（它占空间、只是不可见）。此外<head>、<script>等不产生可见盒子的节点也不包含。
二、重排与重绘：面试必考
Q3：什么是重排（Reflow）和重绘（Repaint）？
重排是几何属性变化（尺寸、位置、增删节点），需要重新计算布局；重绘是外观变化（颜色、背景、阴影），不涉及几何。重排一定触发重绘，重绘不一定触发重排。
Q4：哪些操作会触发重排？
改变窗口大小、增删 DOM、修改宽高/边距/字体、读取 offsetTop/scrollTop/getComputedStyle 等布局信息。
Q5：什么叫布局抖动（Layout Thrashing）？
在循环里交替进行”写样式”和”读布局”，导致浏览器被迫反复重新计算布局。解法是读写分离：先批量读，再批量写；或用 requestAnimationFrame 包裹。
// ❌ 每次循环都强制同步布局
items.forEach(el => {
el.style.width = '100px'
console.log(el.offsetHeight) // 读取触发重排
})
// ✅ 先读后写
const heights = items.map(el => el.offsetHeight)
items.forEach(el => { el.style.width = '100px' })
三、合成层与 GPU 加速
Q6：为什么 transform 动画比改 left/top 流畅？
因为 transform 与 opacity 的变化可以只走合成阶段，跳过布局与绘制，且能在合成线程执行，不阻塞主线程。改 left/top 会触发完整的重排 + 重绘。
Q7：will-change 该不该滥用？
不该。它会让浏览器提前为该元素创建独立的合成层，占用额外内存。只在动画开始前加，动画结束后移除；长期挂在大量元素上会显著增加内存压力。
四、脚本加载：三道题连问
Q8：<script> 为什么会阻塞渲染？
因为脚本可能修改 DOM/CSSOM，浏览器会暂停解析等待脚本下载执行完毕。
Q9：defer 与 async 的区别？
Q10：CSS 会阻塞渲染吗？
会。CSSOM 构建完成前不会渲染（避免无样式闪动），但 CSS 不阻塞 DOM 解析。注意：外链脚本会等待其之前的样式表加载完成，因为脚本可能查询样式。
五、性能指标：2026 年该答哪些
Q11：Core Web Vitals 有哪三个核心指标？
- LCP（最大内容绘制）：衡量加载速度，良好阈值 ≤ 2.5s；
- INP（交互到下次绘制）：衡量交互响应，良好阈值 ≤ 200ms（它已取代早期的 FID）；
- CLS（累积布局偏移）：衡量视觉稳定性，良好阈值 ≤ 0.1。
追问陷阱：“FID 和 INP 有什么区别？”
FID 只测量首次交互的延迟；INP 测量页面生命周期内几乎所有交互的响应时间，取较差的分位值。INP 更能反映真实体验，这也是它被替换进核心指标的原因。
Q12：DOMContentLoaded 与 load 的区别？
前者是 DOM 解析完成（不等图片等子资源）；后者是所有资源加载完成。
六、优化手段：按阶段归类
Q13–Q20 速答：
七、加分项：怎么证明你真做过
面试官最想听到的不是名词，而是闭环。一个高分回答模板：
- 先量化：用 Lighthouse 或 RUM 拿到基线指标，指出瓶颈在 LCP 还是 INP；
- 再定位：用 Performance 面板找到长任务或强制同步布局的具体代码；
- 后优化：针对性改，一次只改一类；
- 最后验证与防劣化：对比优化前后数据，并把指标接入 CI 或灰度监控。
能说出”我们把 CLS 从 0.21 降到 0.06，方法是给所有图片和广告位补了尺寸占位”，比背十个名词都有说服力。
八、小结
渲染与性能这一块的面试，考察的不是记忆力，而是能否把现象、原理、手段、度量串成一条线。把流水线六阶段记住，把三个核心指标记住，再准备一个自己真实做过的优化案例，这一块基本就稳了。
参考：MDN · Web 性能、web.dev 性能指南。指标阈值以官方最新定义为准。
标签
#前端面试题#浏览器#性能优化#面试
