前端性能优化点？

访客全栈框架 2026-06-06 02:45:45 2

关键点剖析与实战指南

目录导读

性能优化的核心价值与衡量指标
网络层面的优化策略
渲染与加载效率提升
资源与代码的极致压缩
运行时性能与内存管理
高频面试问答与实战建议

性能优化的核心价值与衡量指标

为什么前端性能至关重要？

每延迟100ms，用户流失率可能上升7%（亚马逊数据）。
Google 明确将 Core Web Vitals（LCP、FID、CLS）纳入排名算法。

关键指标速览：
| 指标 | 描述 | 理想值 |
|------|------|--------|
| LCP | 最大内容绘制时间 | ≤2.5s |
| FID | 首次输入延迟 | ≤100ms |
| CLS | 累计布局偏移 | ≤0.1 |
| TTFB | 首字节时间 | ≤800ms |

问答：为什么 TTFB 也很重要？
答：TTFB 代表服务器响应速度，若过慢，后续所有优化（如懒加载）都无法弥补，需结合 CDN 和网络优化。

网络层面的优化策略

1 减少请求次数

资源合并：将小图标转为 CSS Sprite 或 SVG 雪碧图。
HTTP/2 多路复用：合并文件并非必须，但需保证域名连接数不过多。

2 启用 CDN 与缓存

静态资源（JS/CSS/图片）部署到 CDN，减少地理延迟。
设置合理 Cache-Control（如 max-age=31536000）。
使用 Service Worker 实现离线缓存。

3 预加载与预连接

<link rel="preload" href="critical.css" as="style">
<link rel="preconnect" href="https://example.com">

问答：preload 和 prefetch 有何区别？
答：preload 用于当前页面关键资源（优先级高），prefetch 预取下一页面可能用到的资源（优先级较低）。

渲染与加载效率提升

1 关键渲染路径优化

CSS 在头部，JS 在底部：防止渲染阻塞。
使用 async 或 defer 加载外部 JS（非关键脚本用 defer）。

2 懒加载（Lazy Loading）

图片懒加载：loading="lazy" 属性。
组件懒加载：React.lazy() + Suspense，或 Intersection Observer。

3 减少重排与重绘

批量修改 DOM（使用 documentFragment 或虚拟 DOM）。
避免强制同步布局（如 offsetTop 后立即修改 style）。

问答：什么是“强制同步布局”？如何避免？
答：当 JS 读取布局属性（如 offsetHeight）后立即修改样式，浏览器需强制计算新布局，应分批读写，或使用 requestAnimationFrame。

资源与代码的极致压缩

1 图片优化

格式选择：WebP（比 JPEG 小 30%）、AVIF（更优但兼容性待提升）。
响应式图片：srcset 和 sizes 属性。
图片压缩工具：TinyPNG、Squoosh。

2 代码层面的压缩

Tree Shaking：移除未使用的代码（Webpack 的 sideEffects 配置）。
代码分割：import() 动态按需加载模块。
使用 Terser 或 esbuild 进行高级压缩（去除空格、注释、变量重命名）。

3 文本资源的 Gzip / Brotli

HTTP 层开启 Gzip 可减少 70% 体积；Brotli 比 Gzip 再小 20%。

问答：Brotli 和 Gzip 各适用什么场景？
答：Brotli 更适合 JS/CSS/HTML 等文本资源（压缩率更高）；Gzip 作为后备方案，需确保服务端和 CDN 都支持。

运行时性能与内存管理

1 减少 JavaScript 执行时间

按需执行：使用 Intersection Observer 或 requestIdleCallback。
避免长任务（＞50ms）阻塞主线程。
使用 Web Workers 处理计算密集型任务。

2 内存泄漏防控

定时器（setInterval）及时清除。
事件监听器在组件销毁时移除（Vue 的 beforeDestroy 或 React 的 useEffect 清理函数）。

3 虚拟滚动（Virtual List）

渲染可见区域内的 DOM，节省内存与重排成本（如 react-window）。

问答：如何监测前端的内存泄漏？
答：Chrome DevTools 的 Performance 面板可录制页面活动，观察 JS heap 是否持续增长，也可用 performance.memory API。

高频面试问答与实战建议

典型面试题与解析

Q1：如何优化首屏渲染速度？

关键 CSS 内联，非关键 CSS 懒加载。
骨架屏（Skeleton Screen）提升感知速度。
服务端渲染（SSR）或静态生成（SSG）。

Q2：SPA 应用如何避免白屏？

使用 loading 动画或骨架屏。
路由级代码分割 + 预加载。
应用层采用流式渲染（如 React 的 renderToNodeStream）。

Q3：移动端优化有哪些特殊点？

减少 JS 体积（移动端网络慢）。
使用 touch 事件替代 click（300ms 延迟）。
图片采用 2x/3x 分辨率适配。