【前端面试】前端性能优化篇

啥也不行就是菜
342 阅读7分钟

一、构建阶段优化（打包时：让输出文件 “更小、更高效”）

核心目标

减小最终资源体积、加快打包速度，为后续传输和渲染铺路。

关键优化手段+实操示例

  1. 冗余代码剔除：开启 Tree Shaking，自动删除未使用的模块。
  2. 代码分割：通过 splitChunks 拆分公共依赖。
  3. 资源压缩：JS 用 TerserPlugin 压缩，CSS 用 CssMinimizerPlugin，图片转 WebP/AVIF（配合 image-webpack-loader）。
  4. 打包提速：用 thread-loader 多线程处理 Loader（如 Babel），开启 webpack 5 持久化缓存（cache: { type: 'filesystem' }）。
  5. Loader/Plugin 精简：通过 include 限定 Loader 作用范围，剔除无用 Plugin。
  6. 依赖优化：用 externals 排除 CDN 引入的依赖，alias 简化路径查找。

二、传输阶段优化（网络中：让资源“更快到达”浏览器）

核心目标

减少传输时间、降低请求成本，提升资源到达效率。

关键优化手段+实操示例

  1. 传输压缩：服务器开启 Gzip/Brotli 压缩，针对 JS/CSS/HTML 生效。
  2. 就近分发：静态资源（图片、JS/CSS）部署 CDN，配置 DNS 负载均衡，用户从最近节点获取资源。
  3. 缓存复用：设置强缓存 + 协商缓存，静态资源加 contenthash。
  4. 协议优化：升级 HTTP/2（多路复用，减少连接开销），HTTPS 场景下开启 HTTP/3（QUIC 协议，更低延迟）。
  5. 预加载策略：preload 关键资源，preconnect 提前建立 CDN 连接。
  6. 减少请求：合理合并小资源，避免过度合并导致“大文件阻塞”，平衡请求数和文件体积。

三、渲染阶段优化（浏览器端：让页面“更快呈现”）

核心目标

减少解析阻塞、加速首屏渲染，避免布局抖动。

关键优化手段+实操示例

  1. 消除解析阻塞：JS 加 defer/async，避免阻塞 HTML 解析；CSS 用 link 引入，关键 CSS 内联到 HTML 头部。
  2. 首屏提速：首屏内容用 SSR/SSG 提前生成 HTML，非首屏资源懒加载。
  3. 布局稳定：图片提前设置宽高比，避免加载后布局偏移（优化 CLS）；动态插入 DOM 时预留占位空间。
  4. 资源优先级：通过 priority 提升关键资源加载优先级（如 <img src="hero.jpg" priority>），让首屏核心内容先加载。
  5. 简化渲染：减少 DOM 层级和节点数量，避免复杂 CSS 选择器，降低浏览器渲染计算成本。
  6. 减少白屏：使用骨架屏等减少白屏时间。

四、运行阶段优化（交互时：让页面“更流畅”）

核心目标

减少主线程阻塞、避免重排重绘，提升交互响应速度。

关键优化手段+实操示例

  1. 高频事件优化：滚动/触摸事件用 passive: true，输入/点击事件用防抖（输入框搜索）/节流（滚动加载）。
  2. 减少重排重绘：批量操作 DOM，避免频繁读取+修改 DOM；用 will-change 提前告知浏览器优化。
  3. JS 执行优化：避免在主线程做 heavy 计算（如大数据循环），耗时操作放入 Web Worker（如数据解析）；减少闭包导致的内存泄漏，及时清理无用定时器/事件监听。
  4. Vue 专项优化：合理用 v-if/v-show，key 绑定唯一值（提升 diff 效率）；用 computed 缓存计算结果，watch 精准监听（避免监听整个对象）；开启 keep-alive 缓存复用组件，列表用 v-virtual-scroller 虚拟滚动。
  5. 动画优化：用 transform/opacity 实现动画（仅触发复合层，不重排重绘），避免用 width/top 等属性。

五、首页白屏排查流程图（按优先级）

  1. 先查网络：打开 Chrome Network 面板，看 TTFB（首字节时间）→ 若 TTFB > 600ms，是服务器/接口问题（优化接口响应、服务器配置）。
  2. 再查资源：看是否有大文件（> 500KB）阻塞加载 → 优化大文件（压缩、分割），检查 CDN 是否生效。
  3. 接着查主线程：打开 Performance 面板，看 TBT（总阻塞时间）→ 若 TBT > 300ms，是 JS 执行阻塞（拆分大 JS、用 Web Worker）。
  4. 最后查渲染：看 LCP（最大内容绘制）→ 若 LCP > 2.5s，是首屏核心资源加载慢（内联关键 CSS、SSR/SSG）；看 CLS → 若 CLS > 0.1，是布局偏移（设置图片宽高比、预留占位）。

六、面试高频问答模板（简洁全面）

1. 性能优化核心指标

  • 核心 Web 指标 (Core Web Vitals)
    • LCP (Largest Contentful Paint): 加载性能，衡量最大内容渲染速度。
    • FID (First Input Delay): 交互性，衡量首次用户输入的延迟。
    • CLS (Cumulative Layout Shift): 视觉稳定性，衡量布局偏移程度。
  • 其他关键指标
    • TTFB (Time to First Byte): 网络和服务器响应速度。
    • FCP (First Contentful Paint): 首次内容渲染，白屏结束的标志。
    • TBT (Total Blocking Time): 总阻塞时间，衡量主线程繁忙程度，是 FID 的实验室替代指标。

2. 输入 URL 到页面展示的优化关键点

  • DNS 阶段：DNS 预解析、减少 DNS 查询（合并域名）。
  • 连接阶段：HTTP/2 多路复用、HTTPS 优化（TLS 复用）。
  • 传输阶段：CDN 分发、缓存复用、Gzip 压缩。
  • 渲染阶段：消除解析阻塞、内联关键 CSS、SSR/SSG、懒加载。

3. 性能分析工具及用途

  • Lighthouse：全面性能评分（含指标+优化建议），适合整体评估。
  • Network：分析资源加载瓶颈（TTFB、文件大小、缓存命中）。
  • Performance：定位主线程阻塞、重排重绘、JS 执行耗时。
  • Memory：排查内存泄漏（闭包、未清理的监听/定时器）。

七、Vue 中如何优化渲染性能？

1. 减少不必要的渲染

  • 合理使用 v-if / v-show：频繁切换用 v-show，条件不满足时用 v-if。
  • 使用 key 保证 Diff 准确，避免错误复用节点。
  • 使用 computed 缓存计算结果，避免重复计算。
  • 使用 watch 精准监听，而不是在模板中执行复杂逻辑。
  • 列表渲染优化：v-for 加 key，避免大列表同时渲染（可配合虚拟列表）。

2. 提升渲染效率

  • 组件拆分：细粒度拆分组件，减少不必要的整体更新。
  • 使用 keep-alive 缓存不活跃组件状态。
  • 使用 v-once 标记静态内容，使其只渲染一次。
  • 异步组件：按需加载路由或大组件。
  • SSR / SSG：服务端渲染或静态站点生成，提升首屏速度。

八、如何优化滚动、输入等高频事件？

1. 减少触发频率

  • 节流（throttle）：固定时间间隔执行一次，适合 scroll、resize 等事件。
  • 防抖（debounce）：延迟执行，适合 input 搜索、click 提交等场景。
  • 使用 requestAnimationFrame 代替频繁触发的回调，使动画更平滑。

2. 降低主线程压力

  • 复杂计算放入 Web Worker，避免阻塞渲染。
  • 使用 Passive Event Listener（{ passive: true }）提升滚动性能，告知浏览器事件监听器不会调用 preventDefault()。

3. 减少渲染开销

  • 滚动时避免频繁操作 DOM 或样式。
  • 批量更新 DOM（如虚拟滚动、合并修改）。
  • 使用 CSS transform、opacity 等属性创建动画，避免导致重排（Reflow）的属性（如 width, top）。

整理不易，有回答错误之处欢迎在评论区指正交流~

avatar
文章
阅读
粉丝