1. 网络优化
减少HTTP请求
- 合并资源:通过合并CSS和JavaScript文件减少请求次数。
- 资源内联:对于小的CSS和JavaScript,直接内联到HTML中。
使用HTTP/2
- HTTP/2支持多路复用,减少请求阻塞,提高加载速度。
开启GZIP压缩
服务器端配置,压缩文本资源,减小传输体积。
缓存策略
利用HTTP缓存头,如Cache-Control,设置合适的缓存策略。
2. 资源加载优化
懒加载
只在资源即将进入视口时才加载,适用于图片和视频等。
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy" />
<script>
document.addEventListener('DOMContentLoaded', function() {
let lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(img => {
img.src = img.dataset.src;
});
});
</script>
预加载与预读取
使用<link rel="preload">
提前加载关键资源。
使用<link rel="prefetch">
预读取非关键资源。
3. 渲染优化
Critical CSS
将首屏渲染所需的CSS内联在HTML头部,避免阻塞渲染。
减少CSS和JavaScript的阻塞
- 使用
<link rel="stylesheet" media="print" onload="this.media='all'">
延迟非关键CSS加载。 - 使用
async
或defer
属性异步加载JavaScript。
<script async src="script.js"></script>
避免强制同步布局
- 使用requestAnimationFrame或CSS动画代替复杂的JavaScript动画,减少重排重绘。
图片优化
- 选择合适的图片格式(如WebP),并使用正确的尺寸和分辨率。
4. Service Worker与离线存储
- 使用Service Worker实现离线缓存和资源更新。
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/sw.js')
.then(registration => console.log('SW registered:', registration))
.catch(error => console.error('SW registration failed:', error));
});
}
5. 性能监控与分析
- 使用Lighthouse、WebPageTest或Chrome DevTools等工具进行性能测试和分析。
6. 代码拆分与懒加载
动态导入
利用动态导入(import()表达式)按需加载代码块,减少初始加载时间。
button.onclick = async () => {
const module = await import('./lazyModule.js');
module.default();
};
路由级别代码拆分
在SPA应用中,利用框架提供的路由级别代码拆分功能,如Vue Router的懒加载。
// Vue Router 示例
const Foo = () => import('./Foo.vue');
const routes = [
{ path: '/foo', component: Foo },
];
7. 图像优化
响应式图片
利用<picture>
元素或srcset属性,根据设备像素比或视口大小提供不同分辨率的图片。
<picture>
<source srcset="img/low-res.jpg" media="(max-width: 600px)">
<source srcset="img/high-res.jpg" media="(min-width: 600px)">
<img src="img/fallback.jpg" alt="Example">
</picture>
8. Web Workers
将耗时的计算任务移到Web Worker中,避免阻塞主线程,保持UI响应。
// main.js
const worker = new Worker('worker.js');
worker.postMessage([1024, 512]);
// worker.js
self.onmessage = function(e) {
const result = e.data[0] * e.data[1];
self.postMessage(result);
};
9. 避免内存泄漏
定期清理不再使用的定时器、事件监听器和大型数据结构,防止内存泄漏。
window.addEventListener('resize', handleResize);
// 清理
window.removeEventListener('resize', handleResize);
// 对于setTimeout或setInterval
let timerId = setInterval(() => { /*...*/ }, 1000);
clearInterval(timerId);
10. Web Vitals监控
关注LCP(最大内容绘制)、FID(首次输入延迟)和CLS(累计布局偏移)等Web Vitals指标,它们是衡量用户体验的关键指标。
// 使用Web Vitals库进行监控
import { getCLS, getFID, getLCP } from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。