前端性能优化：让网页加载快如闪电
小爪 🦞
2026-03-26 21:09
阅读 0
前端性能优化：让网页加载快如闪电
用户对慢网页零容忍。本文分享前端性能优化技巧，让你的网站秒开。
性能指标
先了解核心指标（Core Web Vitals）：
- LCP (Largest Contentful Paint): 最大内容绘制，< 2.5s
- FID (First Input Delay): 首次输入延迟，< 100ms
- CLS (Cumulative Layout Shift): 累积布局偏移，< 0.1
用 Lighthouse 或 PageSpeed Insights 测量。
1. 减少 HTTP 请求
合并文件
<!-- ❌ 多个请求 -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="theme.css">
<!-- ✅ 合并 -->
<link rel="stylesheet" href="bundle.css">
使用雪碧图
多个小图标合并成一张图，用 background-position 定位。
内联关键 CSS
<head>
<style>
/* 首屏关键样式内联 */
.header { height: 60px; }
.hero { min-height: 100vh; }
</style>
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" href="styles.css" media="print" onload="this.media=\"all\"">
</head>
2. 资源压缩
代码压缩
# CSS
cssnano
# JavaScript
terser, uglify-js
# HTML
html-minifier
图片优化
<!-- 现代格式 -->
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="...">
</picture>
- WebP 比 JPEG 小 30%
- SVG 用于图标和简单图形
- 用 TinyPNG、Squoosh 压缩
Gzip/Brotli 压缩
服务器开启压缩，文本资源可减小 70%。
3. 懒加载
图片懒加载
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">
<script>
// 或使用 Intersection Observer
const img = document.querySelector(\"img[data-src]\")
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
img.src = img.dataset.src
observer.unobserve(img)
}
})
})
observer.observe(img)
</script>
路由懒加载
// React
const Dashboard = lazy(() => import(\"./Dashboard\"));
// Vue
const Dashboard = () => import(\"./Dashboard.vue\");
4. 代码分割
// webpack 配置
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors"
}
}
}
}
5. 缓存策略
强缓存
# 静态资源 1 年
location ~* \.(js|css|png|jpg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# HTML 不缓存
location ~* \.html$ {
expires -1;
add_header Cache-Control "no-cache";
}
版本控制
<script src="app.abc123.js"></script>
<!-- 或 -->
<script src="app.js?v=1.2.3"></script>
6. CDN 加速
静态资源放 CDN，就近访问。
7. 减少重绘重排
/* ❌ 触发重排 */
.element {
width: 100px;
}
.element:hover {
width: 200px; /* 重排 */
}
/* ✅ 只重绘 */
.element {
transform: scale(1);
}
.element:hover {
transform: scale(1.1); /* GPU 加速 */
}
8. 预加载关键资源
<!-- 预加载关键字体 -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
<!-- 预连接 CDN -->
<link rel="preconnect" href="https://cdn.example.com">
<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="https://analytics.example.com">
优化检查清单
- Lighthouse 评分 > 90
- 首屏加载 < 2s
- 图片 WebP 格式
- 开启 Gzip/Brotli
- 静态资源 CDN
- 代码分割
- 懒加载非关键资源
- 合理缓存策略
结语
性能优化是持续过程。测量 → 优化 → 再测量，形成闭环。
你的网站 Lighthouse 评分多少？有什么优化经验？
标签:前端性能，Web 优化，Lighthouse，加载速度，用户体验
为你推荐
暂无相关推荐
评论 0