# 前端性能优化实战指南
## 1. 资源加载优化
### 1.1 代码拆分与懒加载
```javascript
// 动态导入实现懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
关键点：
- 使用Webpack的SplitChunksPlugin进行代码分割
- 路由级懒加载减少初始包体积
- 图片懒加载使用IntersectionObserver API
1.2 资源预加载
<!-- 关键资源预加载 -->
<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.js" as="script">
优化策略：
- 关键CSS内联到HTML
- 字体文件使用
preconnect+preload - 非关键资源使用
prefetch
2. 渲染性能优化
2.1 减少重排重绘
// 批量DOM操作
const container = document.getElementById('container');
const fragment = document.createDocumentFragment();
for(let i=0; i<100; i++) {
const div = document.createElement('div');
fragment.appendChild(div);
}
container.appendChild(fragment);
最佳实践：
- 使用CSS transform代替top/left动画
- 避免在循环中读取布局属性
- 使用will-change提示浏览器优化
2.2 虚拟列表优化
// React虚拟列表示例
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const App = () => (
<List
height={500}
width={300}
itemSize={35}
itemCount={1000}
>
{Row}
</List>
);
适用场景：
- 大数据量表格/列表
- 无限滚动页面
- 复杂树形结构
3. JavaScript优化
3.1 防抖与节流
// 防抖实现
function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, arguments), delay);
};
}
// 节流实现
function throttle(fn, interval) {
let lastTime = 0;
return function() {
const now = Date.now();
if(now - lastTime >= interval) {
fn.apply(this, arguments);
lastTime = now;
}
};
}
使用场景：
- 搜索框输入建议
- 窗口resize事件
- 滚动事件处理
3.2 Web Worker应用
// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {
console.log('Result:', e.data);
};
// worker.js
self.onmessage = (e) => {
const result = heavyCalculation(e.data);
self.postMessage(result);
};
适用场景：
- 大数据处理
- 复杂计算任务
- 加密解密操作
4. 缓存策略
4.1 Service Worker缓存
// 注册Service Worker
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('SW registered');
});
}
// sw.js缓存策略示例
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
缓存策略：
- 静态资源使用Cache First
- API数据使用Network First
- 关键资源使用Stale-While-Revalidate
4.2 HTTP缓存控制
# 强缓存
Cache-Control: max-age=31536000
Expires: Wed, 21 Oct 2025 07:28:00 GMT
# 协商缓存
Last-Modified: Wed, 21 Oct 2020 07:28:00 GMT
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
最佳实践：
- 静态资源设置长期缓存
- 内容哈希实现缓存失效
- API响应设置适当缓存头
