前端性能优化面试八股：懒加载、节流防抖与首屏提速

性能优化是前端面试的高频板块，考点集中在几个固定方向。把下面这些"八股"吃透，答起来就有条理了。

1. 图片懒加载：原理与实现

懒加载（延迟加载）：只加载当前视口内的图片，滚动到附近时才加载，可提升首屏速度、减轻服务器压力。

实现思路四步：

图片地址先存到 data-src 属性，不设置 src；
监听滚动/视口变化，判断图片是否进入可视区域；
进入可视区后把 data-src 赋给 src；
加载完成后移除监听。

现代浏览器可直接用 IntersectionObserver 代替 scroll 监听，性能更好、代码更简洁。

2. 节流（throttle）与防抖（debounce）

两者都用于控制高频触发，但语义不同：

节流：n 秒内只执行一次，多次触发被忽略。适合拖拽、scroll、窗口 resize；
防抖：n 秒内连续触发则重新计时，保证最后一次触发 n 秒后才执行。适合输入框搜索、表单提交、编辑器保存。

口诀：拖拽滚动用节流，输入提交用防抖。

3. SPA 首屏为什么慢？怎么优化

首屏慢的四个常见原因和对应优化：

JS 文件过大 → 代码分割（Code Splitting）、路由级懒加载、Tree Shaking、压缩 + CDN；
数据请求多/慢 → 减少请求、数据缓存（localStorage/内存）、接口合并、SSR/预渲染；
首屏图片多且大 → 图片压缩（WebP）、懒加载、CDN 分发；
渲染与重绘多 → 减少 DOM 操作、避免强制同步布局、用虚拟列表。

4. 浏览器渲染流程与重绘/回流

渲染流程：HTML 解析 → 样式计算 → 布局（Layout/回流）→ 绘制（Paint）→ 合成。

回流（reflow）：布局变化导致重新计算（改尺寸/增删 DOM）；
重绘（repaint）：样式变化但不影响布局（改颜色/背景）。

优化：合并样式修改、批量 DOM 操作、文档片段、transform/opacity 代替位置变化（走合成层，不触发重排）、will-change 提示。

5. CDN 与缓存

静态资源上 CDN：就近分发、减轻源站压力；配合强缓存（Cache-Control）+ 协商缓存（ETag/Last-Modified），文件名带 hash 实现更新时缓存失效。

6. 手写题速记

面试常让手写防抖/节流，记住核心：

// 防抖
function debounce(fn, delay) {
  let t;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), delay);
  };
}
// 节流（时间戳版）
function throttle(fn, limit) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= limit) { last = now; fn.apply(this, args); }
  };
}

写在最后

性能优化题的回答主线：减少请求（懒加载/CDN/合并）→ 减少体积（压缩/分割）→ 减少计算（防抖节流/虚拟列表）→ 减少渲染（避免回流）。按这条线答，覆盖面和逻辑都完整。

把性能优化这类高频考点配合真实项目实践讲出来最有说服力，复习刷题的话可以用可面猫笔试助手检验掌握程度。