前端性能优化完全指南

Sat, 04 Apr 2026 09:15:00 +0800

什么是前端性能？

前端性能是指网页在浏览器中加载、渲染和交互的速度。它影响用户体验，同时也是搜索引擎排名的重要因素。

性能指标

First Contentful Paint (FCP) - 首次内容绘制
Largest Contentful Paint (LCP) - 最大内容绘制
Cumulative Layout Shift (CLS) - 累积布局偏移
First Input Delay (FID) - 首次输入延迟

性能优化策略

1. 图片优化

使用现代格式（WebP）
响应式图片（srcset）
懒加载
压缩和裁剪

1
2
3
4
5
6


<img
 src="image.jpg"
 srcset="image-small.jpg 480w, image-large.jpg 1200w"
 alt="描述"
 loading="lazy"
/>

2. JavaScript 优化

代码分割

1
2


// 动态导入
const module = await import('./module.js');

体积优化

移除未使用的代码
使用 tree-shaking
压缩和混淆
使用 CDN

3. CSS 优化

压缩 CSS 文件
移除重复的选择器
使用 CSS 变量避免重复
内联关键 CSS

1
2
3
4
5
6
7


/* 关键 CSS - 直接内联 */
@media (prefers-color-scheme: dark) {
 body {
 background: #1a1a1a;
 color: #ffffff;
 }
}

4. 网络优化

技术	效果	实施难度
缓存策略	高	低
HTTP/2	中	中
CDN	高	低
预连接	中	低
预加载	高	中

1
2
3
4
5
6
7
8


<!-- 预连接 -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="critical.js" as="script">

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="https://api.example.com">

5. 渲染性能

避免强制同步布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// ❌ 不好 - 产生布局抖动
for (let i = 0; i < 100; i++) {
 element.style.width = element.offsetWidth + 1 + 'px';
}

// ✅ 好 - 批量操作
const width = element.offsetWidth;
for (let i = 0; i < 100; i++) {
 element.style.width = width + i + 'px';
}

使用 requestAnimationFrame

1
2
3
4
5
6


function animate() {
 // 执行动画帧
 element.style.transform = `translateX(${x}px)`;
 requestAnimationFrame(animate);
}
animate();

监测和分析

使用 Lighthouse

1
2
3


# 使用 Chrome DevTools 或命令行
npm install -g lighthouse
lighthouse https://example.com

实时监测

Web Vitals
Performance API
Google Analytics
自定义指标

1
2
3
4
5
6
7
8


// 测量 FCP
performance.measureUserAgentSpecificMemory?.()
new PerformanceObserver((entryList) => {
 const entries = entryList.getEntries();
 entries.forEach(entry => {
 console.log(entry.name, entry.duration);
 });
}).observe({ entryTypes: ['paint', 'measure'] });

总结

前端性能优化是一个持续的过程：

✅ 定期测量性能指标
✅ 确定瓶颈
✅ 实施优化方案
✅ 验证改进效果
✅ 重复此过程

记住：性能优化永无止境，但永远是值得的！

推荐阅读：

最佳实践 on 小杨的博客

前端性能优化完全指南

什么是前端性能？

性能指标

性能优化策略

1. 图片优化

2. JavaScript 优化

3. CSS 优化

4. 网络优化

5. 渲染性能

避免强制同步布局

使用 requestAnimationFrame

监测和分析

使用 Lighthouse

实时监测

总结