一、下载速度优化（核心：减少资源体积 / 请求数，提升加载效率）

1. 资源体积优化

• 场景：电商首页首屏加载慢，打包后 vendor.js 体积达 800KB，H5 端 3G 网络下下载耗时超 3s。
• 解决方案：
  • 代码层面：Tree-Shaking 剔除无用代码，ESModule 模块化拆分，第三方库按需引入（如 element-plus 仅引入按钮、输入框组件）；
  • 资源层面：图片用 WebP/AVIF 格式，配合 imgCompress 工具压缩（如 banner 图从 2MB 压缩至 200KB），字体文件子集化（仅保留页面用到的字符）；
  • 构建层面：Gzip/Brotli 压缩（服务端开启，vendor.js 压缩后体积降至 200KB）。

2. 请求策略优化

• 场景：移动端资讯类 APP，首次打开需加载 10 + 接口，串行请求导致白屏时间长。
• 解决方案：
  • 资源加载：路由懒加载（import() 动态导入），首屏仅加载核心路由代码；
  • 接口请求：核心接口并行请求，非核心接口懒加载（如滚动到对应区域再请求），接口数据缓存（localStorage/Service Worker）；
  • 预加载：首屏关键资源（如首屏图片、核心 JS）通过 preload 预加载，非关键资源 prefetch 预获取。

二、运行时性能优化（核心：减少重绘 / 重排，提升交互流畅度）

1. 渲染性能优化

• 场景：大数据列表（如物流轨迹列表，1000 + 条数据）滚动卡顿，DOM 操作频繁导致重排。
• 解决方案：
  • 列表优化：虚拟列表（仅渲染可视区域 DOM，如 vue-virtual-scroller），分段加载（每次加载 20 条，滚动到底部再加载）；
  • DOM 操作：批量修改 DOM（文档碎片 /requestAnimationFrame），避免频繁增删节点，使用 transform/opacity 做动画（仅触发合成层，不重排）。

2. 计算性能优化

• 场景：金融类页面包含大量图表渲染、数据计算，页面滑动时帧率降至 30fps 以下。
• 解决方案：
  • 计算优化：复杂计算（如图表数据格式化）放入 Web Worker 中执行，避免阻塞主线程；
  • 缓存优化：高频计算结果（如价格换算、日期格式化）用 memoize 缓存，避免重复计算；
  • 渲染优化：图表采用 Canvas/SVG 替代 DOM 渲染，减少节点数量（如折线图从 1000 个 DOM 节点降至 1 个 Canvas 节点）。

三、体验兜底优化

• 场景：弱网环境下，用户操作按钮无反馈，页面加载超时导致体验差。
• 解决方案：
  • 加载兜底：骨架屏替代白屏，接口超时设置重试机制（最多 3 次），失败时展示降级文案 / 静态数据；
  • 交互兜底：按钮添加防抖 / 节流（如搜索框输入防抖、提交按钮节流），避免重复请求；
  • 缓存兜底：Service Worker 缓存静态资源，离线时展示缓存页面。

总结

回答核心需抓 3 个关键点：

1. 下载速度：通过「体积压缩 + 请求策略」减少资源加载耗时，优先保障首屏核心资源；
2. 运行性能：通过「虚拟列表 + 非主线程计算」减少主线程阻塞，提升交互流畅度；
3. 体验兜底：弱网 / 异常场景下的降级方案，保障基础体验。

核心思路：前端性能优化是「分层优化 + 场景适配」，先通过构建 / 网络层降低下载成本，再通过运行时减少渲染 / 计算开销，最后通过兜底方案保障极端场景体验。