如何提高前端应用的性能？

# 前端性能优化实战指南

## 1. 资源加载优化

### 1.1 代码拆分与懒加载
```javascript
// 动态导入实现懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));

关键点：

• 使用Webpack的SplitChunksPlugin进行代码分割
• 路由级懒加载减少首屏资源
• 图片懒加载使用IntersectionObserver API

1.2 资源预加载

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

1.3 缓存策略

# Nginx配置示例
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public";
}

2. 渲染性能优化

2.1 减少重排重绘

// 批量DOM操作
const fragment = document.createDocumentFragment();
items.forEach(item => {
    fragment.appendChild(createItemElement(item));
});
container.appendChild(fragment);

优化技巧：

• 使用transform代替top/left动画
• 避免在循环中读取布局属性
• 使用will-change提示浏览器

2.2 虚拟列表

// React实现示例
<VirtualList
    itemCount={10000}
    itemSize={50}
    height={500}
    width={300}
>
    {Row}
</VirtualList>

3. JavaScript优化

3.1 防抖节流

// 节流函数实现
function throttle(fn, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= delay) {
            fn.apply(this, args);
            lastCall = now;
        }
    }
}

3.2 Web Worker

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);

// worker.js
self.onmessage = function(e) {
    const result = heavyCalculation(e.data);
    self.postMessage(result);
}

4. 网络层优化

4.1 HTTP/2优化

# 启用HTTP/2
listen 443 ssl http2;

优势：

• 多路复用减少连接数
• 头部压缩降低开销
• 服务器推送预加载资源

4.2 压缩优化

// Webpack配置
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
    plugins: [new CompressionPlugin()]
}

5. 监控与持续优化

5.1 性能指标监控

// 使用Performance API
const [entry] = performance.getEntriesByName('first-contentful-paint');
console.log('FCP:', entry.startTime);

关键指标：

• FCP (First Contentful Paint)
• LCP (Largest Contentful Paint)
• CLS (Cumulative Layout Shift)
• TTI (Time to Interactive)

5.2 性能测试工具

推荐工具：

• Lighthouse
• WebPageTest
• Chrome DevTools Performance面板

最佳实践总结

1. 测量优先：优化前先用工具量化性能瓶颈
2. 渐进增强：确保核心功能在低端设备可用
3. 持续监控：建立性能预算和报警机制
4. 平衡策略：根据业务场景选择合适优化方案
5. 新技术评估：谨慎采用新技术，确保兼容性

通过以上多维度的优化策略，可以显著提升前端应用的加载速度、交互流畅度和整体用户体验。建议建立性能优化checklist，在项目各阶段持续实施。