面试题库 词条目录
前端Wiki/词条/性能优化总览

性能优化总览

定义从加载、渲染、运行时三个层面提升页面性能的方法论与常用手段

性能优化先分两个阶段：加载阶段关注核心 Web 指标，LCP（最大内容绘制）建议 2.5 秒内，手段包括压缩资源、懒加载、CDN 加速、HTTP 缓存与预渲染；渲染阶段关注重绘与回流，尽量批量修改 DOM、用 transform 替代会触发布局的属性、对滚动监听加节流防抖。打包层面靠代码分割与 Tree Shaking 减少首屏体积。

答题的关键是有体系感：先定指标（用 Lighthouse 和 performance 面板量化），再分加载、渲染、运行时三层给出手段，最后结合项目经验讲一个具体优化案例与前后数据。避免只背零散技巧，面试官想看到的是完整的方法论。

JavaScript
// 高频事件优化：防抖与节流
function debounce(fn, wait) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}
function throttle(fn, wait) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) { last = now; fn.apply(this, args); }
  };
}

const log = throttle(v => console.log('节流触发', v), 300);
[0, 50, 100, 150, 200, 900].forEach(t => setTimeout(() => log(t), t));
// 预期：开头与 900 毫秒附近各触发一次，中间被节流掉
⚠ 常见误区
🔗 相关词条重绘回流与性能优化项目经验与职业规划回答技巧
← 返回来源章节重绘回流与性能优化