前端性能优化的面试题一

题目

一个 Vue/React 电商首页存在以下问题：

• 首屏白屏时间较长

• 商品图片加载缓慢

• 页面滚动时掉帧

• 点击“加入购物车”后响应延迟

• 打包后的 JavaScript 体积较大

如果由你负责性能优化，你会如何定位问题并制定优化方案？

考察点

• 性能指标与测量工具

• 网络、资源加载和构建优化

• 浏览器渲染与长任务

• Vue/React 渲染优化

• 优化方案的优先级和效果验证

参考答案

我会按照“测量—定位—优化—验证”的流程处理，而不是直接修改代码。

1. 使用 Lighthouse、Chrome DevTools、Performance、Network 等工具建立性能基线，重点观察首屏加载、最大内容渲染、交互延迟、长任务、请求瀑布图和资源体积。

2. 首屏加载方面：

   • 路由和非首屏组件按需加载

   • 拆分体积较大的依赖

   • 移除无用代码，检查Tree Shaking

   • 核心资源使用 preload，非关键脚本延迟加载

   • 使用 CDN、HTTP 缓存和压缩

   • 必要时使用 SSR、SSG 或骨架屏

3. 图片方面：

   • 使用 WebP、AVIF 等现代格式

   • 根据展示尺寸生成响应式图片

   • 非首屏图片懒加载

   • 设置图片宽高，避免加载后引起布局偏移

4. 滚动掉帧方面：

   • 通过 Performance 找出长任务和频繁重排

   • 对高频事件进行节流

   • 避免在循环中交替读取和修改布局属性

   • 长列表使用虚拟列表

   • 动画优先使用 transform 和 opacity

5. 点击响应延迟方面：

   • 减少主线程上的同步计算

   • 将大任务拆分为多个小任务

   • 重计算考虑使用 Web Worker

   • 检查组件是否发生了不必要的级联更新

   • 点击后立即提供视觉反馈，异步完成后续操作

6. 框架层面：

   • Vue 中避免不必要的深层响应式和重复计算

   • React 中检查不合理的状态提升、Context 大范围更新和重复渲染

   • 谨慎使用缓存优化，先通过性能分析确认瓶颈

完成后使用相同设备、网络条件和测试流程重新测量，并结合真实用户监控验证线上效果。

常见误区

• 一上来就使用 memo、useMemo 或缓存，却没有定位瓶颈

• 只关注打包体积，不关注代码执行时间

• 用骨架屏掩盖慢加载，却没有降低真实加载时间

• 为所有图片启用懒加载，导致首屏关键图片更晚出现

• 只依赖本地 Lighthouse 得分，没有观察真实用户数据