前端一面：加载与运行时性能优化核心思路

性能优化也是前端一面的常见方向，这一篇从“加载阶段”和“运行时阶段”两个维度，总结一些高频考点和典型问题的答题思路。

加载阶段的性能优化，主要围绕“首屏渲染速度”和“感知性能”：

  • 资源体积控制

    • 压缩 JS/CSS/图片（minify、gzip/brotli、webp/avif 等）；
    • 按需引入组件和库，避免一次性打包所有页面逻辑；
    • 使用 Tree-Shaking 和 Code Splitting。

  • 资源加载顺序优化

    • 把关键 CSS 放在 <head>，避免阻塞首屏渲染；
    • 非关键 JS 使用 defer/async 或延迟加载；
    • 利用 preload / prefetch 提前加载关键资源。

  • 缓存策略

    • 对静态资源使用长缓存 + 文件名哈希；
    • 对 HTML 控制缓存以保证页面逻辑的及时更新。

一面中常见问法：“你在项目里做过哪些首屏优化？”
答题时可以从这几个方向挑你实际做过的优化来说。

运行时性能更多关注“用户在操作时感受到的流畅度”：

  • 避免在主线程上执行长时间阻塞任务（大计算、同步 XHR 等）；
  • 对高频事件（scroll/resize/input/mousemove）使用防抖/节流；
  • 合理拆分大组件，避免一次性重渲染过多节点；
  • 在 React/Vue 场景下，使用 memoization/shouldComponentUpdate 等减少不必要更新；
  • 对长列表使用虚拟列表（virtualized list）技术。

可以用一句话概括：

加载阶段优化“多久能看到东西”，运行时优化“看到东西后用起来卡不卡”。

参考答案要点：

  • 从三个维度回答：体积、并行度、顺序和缓存；
    • 体积：按需加载、拆分 bundle、压缩资源；
    • 并行度：合理使用 preload/prefetch，避免串行加载依赖；
    • 顺序：关键 CSS 在前、非关键 JS 延迟加载。

如果有实际项目经验，可以给出一个具体例子，例如：

  • 把公共依赖拆成单独 chunk，并利用浏览器缓存；
  • 对某些非首屏模块改成路由懒加载。

参考答案要点：

  • 虚拟列表（virtualization）：只渲染可视区域附近的一小部分 DOM 节点，其余部分占位；
  • 分批渲染：将渲染拆分到多帧完成，避免一次性阻塞主线程；
  • 简化每一行的渲染结构，避免组件树过重。

可以顺带提到已有的轮子（如 react-window/react-virtualized），说明你知道业界实践。

参考答案思路：

  • 使用浏览器 Performance/Profiler 工具：
    • 录制一次用户操作，看有哪些长任务（>50ms）阻塞主线程；
    • 分析是 JS 计算多，还是频繁布局/重绘，还是网络资源拖慢；
  • 对高频事件加上日志/埋点，分析触发频率和处理耗时；
  • 根据定位结果选择优化手段：拆分任务、下放到 Web Worker、防抖/节流、缓存计算结果等。

这类题更看重“你有没有性能排查与优化的实战意识”，而不是背一堆名词。