Web 性能优化完全指南
Web 性能优化是现代 Web 开发中的重要主题。一个快速响应的网站不仅能提供更好的用户体验，还能提高搜索引擎排名和转化率。
性能指标与测量
首先，我们需要了解关键的性能指标：
Core Web Vitals
// 使用 Web Vitals 库测量性能
import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);
资源优化
图片优化
图片通常是网页中最大的资源，优化图片可以显著提升性能。
代码分割
将代码分割成更小的块，按需加载。
// 动态导入
const LazyComponent = lazy(() => import('./LazyComponent'));
// 路由级别的代码分割
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
function App() {
return (
Loading...
);
}
缓存策略
HTTP 缓存
// Express.js 缓存设置
app.use('/static', express.static('public', {
maxAge: '1y', // 静态资源缓存一年
etag: true,
lastModified: true
}));
// API 响应缓存
app.get('/api/data', (req, res) => {
res.set({
'Cache-Control': 'public, max-age=300', // 5分钟
'ETag': generateETag(data)
});
res.json(data);
});
Service Worker 缓存
// service-worker.js
const CACHE_NAME = 'app-v1';
const urlsToCache = [
'/',
'/static/css/main.css',
'/static/js/main.js'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
// 缓存命中，返回缓存的资源
if (response) {
return response;
}
// 否则发起网络请求
return fetch(event.request);
})
);
});
关键渲染路径优化
CSS 优化
JavaScript 优化
网络优化
HTTP/2 和 HTTP/3
利用现代 HTTP 协议的优势：
**多路复用**：并行请求 **服务器推送**：主动推送资源 **头部压缩**：减少传输开销
CDN 配置
// 使用 CDN 加速静态资源
const cdnUrl = 'https://cdn.example.com';
function getAssetUrl(path) {
if (process.env.NODE_ENV === 'production') {
return `${cdnUrl}${path}`;
}
return path;
}
运行时性能优化
虚拟滚动
对于大量数据的列表，使用虚拟滚动：
// 简单的虚拟滚动实现
function VirtualList({ items, itemHeight, containerHeight }) {
const [scrollTop, setScrollTop] = useState(0);
const visibleStart = Math.floor(scrollTop / itemHeight);
const visibleEnd = Math.min(
visibleStart + Math.ceil(containerHeight / itemHeight),
items.length
);
const visibleItems = items.slice(visibleStart, visibleEnd);
return (
style={{ height: containerHeight, overflow: 'auto' }}
onScroll={(e) => setScrollTop(e.target.scrollTop)}
>
{visibleItems.map((item, index) => (
key={visibleStart + index}
style={{
position: 'absolute',
top: (visibleStart + index) * itemHeight,
height: itemHeight
}}
>
{item}
))}