页面性能优化

页面性能优化是前端面试的高频考点，建议从加载性能和运行性能两大维度来组织回答。

加载性能优化（让页面更快显示）

减少请求数量

• 资源合并：合并 CSS、JS 文件，减少 HTTP 请求数。
• 雪碧图（Sprite）：将多个小图标合并为一张图，通过 background-position 定位。
• 字体图标 / SVG：替代小图标图片，减少图片请求。

减小资源体积

• 代码压缩：使用 Webpack、Vite 等工具压缩 JS、CSS、HTML（去除空格、注释、变量名混淆）。
• 图片压缩：使用 WebP 格式替代 JPEG/PNG，体积可减少 30%~50%。
• Gzip / Brotli 压缩：服务器开启压缩，文本资源可压缩 70% 以上。

利用缓存

• 强缓存：通过 Cache-Control: max-age 和 Expires，让浏览器直接使用本地缓存，不发请求。
• 协商缓存：通过 ETag / Last-Modified，让服务器判断资源是否变化，未变则返回 304。
• Service Worker：实现离线缓存，PWA 的核心技术。

资源加载优化

• 懒加载：图片、组件等进入视口时才加载。
• 预加载：<link rel="preload"> 提前加载关键资源；<link rel="prefetch"> 预取可能用到的资源。
• CDN 加速：将静态资源部署到 CDN，就近访问，减少网络延迟。
• DNS 预解析：<link rel="dns-prefetch" href="//cdn.example.com"> 提前解析域名。

首屏优先

• 关键 CSS 内联：将首屏所需的 CSS 直接写入 HTML <style> 中，避免阻塞渲染。
• JS 异步加载：使用 <script defer> 或 <script async>，避免阻塞 DOM 解析。
• SSR / 预渲染：服务端渲染，用户能更快看到内容。

运行性能优化（让页面更流畅）

减少重排（Reflow）与重绘（Repaint）

• 批量修改 DOM：使用 DocumentFragment 或先 display: none 再修改。
• 避免频繁读取布局属性：如 offsetTop、getComputedStyle 会触发重排，应缓存结果。
• 使用 transform 和 opacity 做动画：这两个属性只触发合成（Composite），不触发重排/重绘，性能最好。

事件优化

• 节流（throttle）：固定时间间隔执行一次，适用于 scroll、resize。
• 防抖（debounce）：事件停止触发后延迟执行，适用于搜索框输入。
• 事件委托：将事件绑定到父元素，利用事件冒泡，减少事件监听器数量。

长任务拆分

• 时间分片：将大量数据处理拆分为多个小任务，用 requestIdleCallback 或 setTimeout 分批执行，避免阻塞主线程。
• Web Worker：将耗时计算放到子线程中执行，不阻塞 UI 渲染。

虚拟列表

当渲染大量列表数据时（如 10000 条），只渲染可视区域内的项，滚动时动态更新，大幅减少 DOM 节点数量。

监控与度量

面试时提到监控指标，会显得更专业：

• FCP（First Contentful Paint）：首次内容绘制时间。
• LCP（Largest Contentful Paint）：最大内容绘制时间，衡量加载性能的核心指标。
• CLS（Cumulative Layout Shift）：累计布局偏移，衡量页面稳定性。
• FID（First Input Delay）：首次输入延迟，衡量交互响应速度。

这些是 Google 提出的 Core Web Vitals（核心网页指标），是衡量页面体验的官方标准。

一句话总结

性能优化 = 减少请求 + 减小体积 + 利用缓存 + 首屏优先 + 减少重排重绘 + 异步非阻塞

面试时不需要全部背下来，挑 3~5 个你最有把握的点深入展开即可。