2026年前端面试题：前端性能优化篇
核心性能指标
Core Web Vitals是Google定义的核心性能指标，包含LCP、FID（现已被INP取代）、CLS三个关键指标。LCP衡量最大内容渲染速度，标准为≤2.5秒；FID/INP衡量首次输入延迟，标准为≤100毫秒；CLS衡量布局稳定性，标准为≤0.1。这些指标直接影响用户体验和SEO排名，是性能优化的核心目标。
网络传输优化
减少HTTP请求是首要优化策略，通过合并JS/CSS文件、使用CSS Sprites合并图片、开启Gzip压缩实现。CDN加速将静态资源分发到边缘节点，缩短传输距离。HTTP缓存包括强缓存（Cache-Control、Expires）和协商缓存（ETag、Last-Modified），合理配置可大幅减少重复请求。HTTP/2多路复用和HTTP/3 QUIC协议进一步降低网络延迟。
构建打包优化
Webpack优化包括代码分割（SplitChunksPlugin）、Tree Shaking剔除未使用代码、压缩资源（TerserPlugin、CssMinimizerPlugin）。使用DllPlugin分离第三方库，避免重复打包。Vite在开发环境基于浏览器原生ESM实现按需编译，冷启动速度远超Webpack。生产环境使用Rollup打包，支持Tree Shaking和代码分割。
渲染性能优化
首屏加载优化策略包括：SSR/SSG服务端渲染、内联关键CSS、图片懒加载（Intersection Observer API）、预加载关键资源（preload）。减少重排重绘：使用transform/opacity实现动画，避免频繁操作DOM，批量修改样式。代码执行优化：拆分长任务、使用Web Worker处理复杂计算、合理使用防抖节流控制高频事件。
框架专项优化
React优化：合理使用React.memo、useMemo、useCallback避免不必要渲染，列表渲染添加key，使用虚拟滚动处理大数据量。Vue优化：v-if/v-show合理选择，computed缓存计算结果，keep-alive缓存组件状态，v-once标记静态内容。状态管理：Redux/Vuex合理拆分状态，避免全局状态频繁更新导致全树渲染。
性能分析工具
Lighthouse提供全面性能评分和优化建议。Chrome DevTools的Network面板分析资源加载瓶颈，Performance面板定位主线程阻塞和重排重绘，Memory面板排查内存泄漏。Webpack Bundle Analyzer可视化分析打包体积，定位大文件。Core Web Vitals API可编程方式监控性能指标。
内存与资源管理
避免内存泄漏：及时解绑事件监听器、清理定时器、避免循环引用。图片优化：使用WebP/AVIF格式压缩、响应式图片（srcset）、按需加载。字体优化：字体子集化、字体显示策略（font-display: swap）。第三方库：按需引入、CDN加载、使用轻量级替代方案。
移动端优化
响应式设计：使用Flex/Grid布局，媒体查询适配不同屏幕。触控优化：使用passive事件监听器提升滚动性能，避免300ms点击延迟（touch-action: manipulation）。电池优化：减少动画复杂度、使用requestIdleCallback处理非紧急任务。离线缓存：Service Worker实现离线访问，提升弱网体验。
性能优化是一个系统工程，需要从网络、构建、渲染、运行多个维度综合考虑。2026年的面试更注重实际场景的解决方案和性能指标的可量化验证，建议结合具体项目案例准备。
