1. 網絡優(yōu)化
減少HTTP請求
- 合并資源：通過合并CSS和JavaScript文件減少請求次數(shù)。
- 資源內聯(lián)：對于小的CSS和JavaScript缔莲，直接內聯(lián)到HTML中肄渗。
使用HTTP/2
- HTTP/2支持多路復用搞乏，減少請求阻塞扶欣，提高加載速度。
開啟GZIP壓縮
服務器端配置音同，壓縮文本資源词爬，減小傳輸體積。
緩存策略
利用HTTP緩存頭权均，如Cache-Control顿膨，設置合適的緩存策略。
2. 資源加載優(yōu)化
懶加載
只在資源即將進入視口時才加載叽赊，適用于圖片和視頻等恋沃。
<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. 渲染優(yōu)化
Critical CSS
將首屏渲染所需的CSS內聯(lián)在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動畫，減少重排重繪葛家。
圖片優(yōu)化
- 選擇合適的圖片格式（如WebP）户辞，并使用正確的尺寸和分辨率。
4. Service Worker與離線存儲
- 使用Service Worker實現(xiàn)離線緩存和資源更新癞谒。
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. 性能監(jiān)控與分析
- 使用Lighthouse底燎、WebPageTest或Chrome DevTools等工具進行性能測試和分析刃榨。
6. 代碼拆分與懶加載
動態(tài)導入
利用動態(tài)導入(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. 圖像優(yōu)化
響應式圖片
利用<picture>元素或srcset屬性，根據(jù)設備像素比或視口大小提供不同分辨率的圖片读存。
<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. 避免內存泄漏
定期清理不再使用的定時器敬察、事件監(jiān)聽器和大型數(shù)據(jù)結構，防止內存泄漏尔当。
window.addEventListener('resize', handleResize);
// 清理
window.removeEventListener('resize', handleResize);
// 對于setTimeout或setInterval
let timerId = setInterval(() => { /*...*/ }, 1000);
clearInterval(timerId);
10. Web Vitals監(jiān)控
關注LCP（最大內容繪制）莲祸、FID（首次輸入延遲）和CLS（累計布局偏移）等Web Vitals指標，它們是衡量用戶體驗的關鍵指標椭迎。
// 使用Web Vitals庫進行監(jiān)控
import { getCLS, getFID, getLCP } from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
