Chrome 浏览器如何进行性能优化？

Chrome 性能优化从哪几个维度入手？

三大维度：加载性能（资源到浏览器的时间）、渲染性能（浏览器绘制页面的效率）、运行时性能（页面交互的流畅度）。面试中按这个框架回答，比零散列举更有说服力。

加载性能怎么优化？

核心目标是缩短首屏时间。关键手段：

• 资源压缩：Brotli 替代 Gzip，CSS/JS 做 Tree Shaking 删除死代码，图片用 WebP/AVIF 格式
• 代码分割：路由级懒加载，首屏只加载关键 CSS 和 JS，非关键资源 defer 或 async
• 缓存策略：静态资源配强缓存（Cache-Control: max-age），API 走协商缓存（ETag/Last-Modified）
• 预加载：<link rel="preload"> 加载关键资源，<link rel="prefetch"> 预取下一页资源

html
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero.webp" as="image">

追问：首屏 LCP 6 秒怎么排查？先用 DevTools Performance 面板定位 LCP 元素，再看网络瀑布图找阻塞链，逐项优化。

渲染性能怎么优化？

关键是减少重排（Layout）和重绘（Paint），因为它们会阻塞主线程。

• 批量 DOM 操作：用 DocumentFragment 或 requestAnimationFrame 合并更新
• CSS 动画优先：用 transform 和 opacity 做动画，这两个属性只触发合成层，不触发布局和绘制
• 避免强制同步布局：读写样式分开，不要在循环中交替读取 offsetWidth 和修改样式
• will-change 谨慎使用：提前告知浏览器该元素将变化，但滥用会导致图层爆炸

javascript
// 差：读写交替，触发强制同步布局
elements.forEach(el => {
  const width = el.offsetWidth; // 读
  el.style.width = width * 2 + "px"; // 写
});

// 好：先读完再写
const widths = elements.map(el => el.offsetWidth);
elements.forEach((el, i) => {
  el.style.width = widths[i] * 2 + "px";
});

追问：如何判断页面是否存在布局抖动？DevTools Performance 面板中紫色 Layout 块频繁出现且与 Recalculate Style 交替就是布局抖动。

运行时性能怎么优化？

• 长任务拆分：超过 50ms 的任务会阻塞交互，用 requestIdleCallback 或 scheduler.yield() 拆分
• 事件委托：列表场景在父元素绑定一个监听器，而非每个子元素都绑定
• 防抖节流：scroll/resize/input 事件必须节流，搜索建议用防抖
• 内存泄漏排查：DevTools Memory 面板拍快照对比，关注 Detached DOM 节点和未清理的定时器

追问：内存泄漏常见原因有哪些？未清除的 setInterval、闭包持有大对象引用、DOM 移除后事件监听器未移除、全局变量意外挂载。

用什么工具度量性能？

• Lighthouse：一键生成性能评分和优化建议
• Performance 面板：录制用户操作，分析主线程占用、布局、绘制耗时
• Core Web Vitals：LCP（加载）、INP（交互）、CLS（稳定），这三个指标直接影响搜索排名

性能优化不是罗列清单，而是先度量再优化。找到瓶颈，针对性处理，才是面试官想听到的思路。