如何提高前端应用的性能？
1. 代码优化
1.1 精简JavaScript
// 使用箭头函数替代传统函数
const sum = (a, b) => a + b;
// 使用模板字符串
const greeting = `Hello, ${name}`;
// 使用解构赋值
const { prop1, prop2 } = object;
关键点：
- 使用现代ES6+语法减少代码量
- 避免全局变量污染
- 合理使用模块化开发
1.2 CSS优化
/* 使用复合属性 */
.box {
margin: 10px 5px;
}
/* 避免过度具体的选择器 */
.header .nav .item {} /* 不推荐 */
.nav-item {} /* 推荐 */
优化建议：
- 减少CSS选择器层级
- 使用CSS预处理器减少重复代码
- 避免使用@import
2. 资源加载优化
2.1 图片优化
<!-- 使用WebP格式 -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback">
</picture>
<!-- 懒加载 -->
<img data-src="image.jpg" loading="lazy">
优化方案：
- 使用适当的图片格式（WebP > JPEG > PNG）
- 实现懒加载
- 使用响应式图片
2.2 资源压缩
# 使用webpack压缩资源
npm install terser-webpack-plugin --save-dev
工具推荐：
- Webpack/Terser压缩JS
- CSSNano压缩CSS
- ImageOptim压缩图片
3. 渲染性能优化
3.1 减少重排重绘
// 批量DOM操作
const fragment = document.createDocumentFragment();
items.forEach(item => {
fragment.appendChild(createItemElement(item));
});
container.appendChild(fragment);
最佳实践：
- 使用虚拟DOM库（React/Vue）
- 避免频繁操作DOM
- 使用transform替代top/left动画
3.2 使用Web Workers
// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
// worker.js
self.onmessage = function(e) {
const result = heavyCalculation(e.data);
self.postMessage(result);
};
适用场景：
- 复杂计算
- 大数据处理
- 不影响UI响应的后台任务
4. 缓存策略
4.1 浏览器缓存
# 服务器响应头
Cache-Control: max-age=31536000
ETag: "xyz123"
缓存类型：
- 强缓存（Cache-Control）
- 协商缓存（ETag/Last-Modified）
- Service Worker缓存
4.2 CDN加速
<!-- 使用CDN引入库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.min.js"></script>
优势：
- 地理分布减少延迟
- 减轻源服务器压力
- 自动压缩和缓存
5. 监控与分析
5.1 性能指标
// 使用Performance API
const timing = performance.timing;
const loadTime = timing.loadEventEnd - timing.navigationStart;
关键指标：
- FCP (首次内容绘制)
- LCP (最大内容绘制)
- CLS (布局偏移)
5.2 性能工具
工具推荐：
- Lighthouse
- WebPageTest
- Chrome DevTools Performance面板
6. 架构优化
6.1 代码分割
// 动态导入
const module = await import('./module.js');
实现方式：
- 路由级代码分割
- 组件级代码分割
- 第三方库单独打包
6.2 SSR/SSG
// Next.js示例
export async function getServerSideProps(context) {
const data = await fetchData();
return { props: { data } };
}
优势：
- 更好的首屏性能
- 更好的SEO
- 更稳定的用户体验
7. 其他优化技巧
7.1 字体优化
/* 使用font-display */
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
建议：
- 使用WOFF2格式
- 预加载关键字体
- 设置适当的font-display
7.2 减少第三方依赖
优化策略：
- 定期审计依赖项
- 使用轻量级替代方案
- 按需引入库功能
总结
前端性能优化是一个系统工程，需要从代码、资源、架构等多个维度综合考虑。最佳实践包括：
- 编写高效的代码
- 优化资源加载
- 减少渲染阻塞
- 合理利用缓存
- 持续监控性能
- 选择适当的架构
通过持续优化，可以显著提升用户体验和业务指标。建议建立性能优化检查清单，在项目各个阶段进行针对性优化。
