前端金九银十面试必备八股文——性能优化

前端性能优化是面试中高频考察的核心能力，主要围绕加载速度、渲染效率、资源管理展开。以下从原理、指标、方案三个维度梳理关键知识点：

1. 图片懒加载

   原理：通过data-src存储真实图片地址，初始时设置占位图或空路径。监听滚动事件，利用IntersectionObserver或getBoundingClientRect()判断图片是否进入可视区域，若进入则将data-src赋值给src触发加载。

   优化点：

   结合节流（Throttle）减少滚动事件触发频率。

   预加载下一屏图片（提前1-2个视口高度）。

   使用loading="lazy"原生属性（现代浏览器支持）。

2. 节流（Throttle）与防抖（Debounce）

   节流：固定时间间隔内最多执行一次函数（如100ms内只触发一次scroll回调）。

   应用场景：滚动事件、窗口调整、拖拽。

   防抖：延迟执行函数，若在延迟期内再次触发则重新计时（如输入框搜索建议）。

   应用场景：输入框、表单提交、按钮点击。

3. SPA首屏优化

   慢因：

   JavaScript文件过大 → 代码分割（Code Splitting）、CDN加速。

   数据请求过多 → 合并请求、缓存（LocalStorage/SessionStorage）、GraphQL优化。

   图片过多 → 懒加载、WebP格式、雪碧图。

   渲染阻塞 → 异步加载CSS/JS、v-if替代v-show（减少初始DOM）。

1. 核心Web Vitals

   FCP（First Contentful Paint）：首次绘制文本/图像的时间（目标<2秒）。

   LCP（Largest Contentful Paint）：最大元素绘制完成时间（目标<2.5秒）。

   TTI（Time to Interactive）：页面可交互时间（目标<5秒）。

   TBT（Total Blocking Time）：主线程阻塞总时间（目标<300ms）。

2. 用户体验指标

   258原则：

   2秒内加载：用户满意度高。

   5秒内加载：不满意度上升。

   8秒以上：流失率激增。

   SEO影响：加载速度直接影响搜索引擎排名（Google将LCP纳入排名因素）。

1. HTML/CSS优化

   减少DOM节点：避免深层嵌套，使用语义化标签。

   压缩代码：删除注释、空格，合并文件（如雪碧图）。

   CSS优化：

   避免复杂选择器（如div ul li a）。

   使用transform/opacity触发GPU加速。

   动画优先使用CSS3（transition/animation）。

2. JavaScript优化

   减少DOM操作：批量更新、使用DocumentFragment。

   事件委托：利用事件冒泡减少绑定次数（如ul上绑定li的点击事件）。

   缓存策略：

   内存缓存（Map/Object存储频繁访问数据）。

   浏览器缓存（Cache-Control/ETag）。

3. 框架专项优化（Vue为例）

   组件级：

   路由懒加载（() => import('./Component.vue')）。

   异步组件（defineAsyncComponent）。

   v-for避免用index作key，优先使用唯一ID。

   状态管理：

   合理使用watch/computed（computed依赖不变时复用结果）。

   Vuex模块化分割，避免全局状态过大。

4. 构建工具优化（Webpack）

   代码分割：

   入口分割（entry配置多入口）。

   动态导入（import()语法）。

   资源压缩：

   TerserPlugin压缩JS。

   CssMinimizerPlugin压缩CSS。

   Tree Shaking：移除未导出代码（需ES6模块语法）。

5. 网络优化

   HTTP/2：多路复用减少连接数，头部压缩减少传输量。

   CDN加速：静态资源部署到边缘节点。

   预加载：

   <link rel="preload">提前加载关键资源。

   DNS预解析（<link rel="dns-prefetch">）。

1. Q：如何实现图片懒加载？

   A：

   初始时图片src为占位图，真实URL存于data-src。

   监听滚动事件，判断图片是否进入视口（IntersectionObserver或getBoundingClientRect()）。

   进入视口后，将data-src赋值给src并移除监听（避免重复检查）。

2. Q：节流和防抖的区别是什么？

   A：

   节流：固定时间间隔执行一次（如每秒触发一次）。

   防抖：延迟执行，若延迟期内再次触发则重新计时（如输入框停止输入1秒后搜索）。

3. Q：SPA首屏白屏如何解决？

   A：

   代码分割 + 路由懒加载。

   骨架屏（Skeleton Screen）提升感知速度。

   服务端渲染（SSR）或预渲染（Prerender）。

掌握以上内容可覆盖80%前端性能优化面试题，建议结合实际项目经验阐述优化效果（如“通过图片懒加载使首屏加载时间减少40%”）。