深入理解前端效能優化：從網路到渲染

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" alt="深入理解前端效能優化：從網路到渲染" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load 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 example
const Foo = () => import('./Foo.vue');

const routes = [
{ path: '/foo', component: Foo },
];

7.影像優化

響應式影像

使用 element 或 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="深入理解前端效能優化：從網路到渲染">
</source></source></picture>

8. 網路工作者

將耗時的運算任務移至 Web Workers，以避免阻塞主執行緒並保持 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. 避免記憶體洩漏

定期清理未使用的計時器、事件監聽器和大型資料結構，以防止記憶體洩漏。

<img  src="placeholder.jpg" data-src="real-image.jpg" alt="深入理解前端效能優化：從網路到渲染" >



<h4>
  
  
  Preloading and prefetching
</h4>

<p>Use <link rel="preload"> to load critical resources in advance.<br>
Use <link rel="prefetch"> to prefetch non-critical resources.</p>
<h3>
  
  
  3. Rendering optimization
</h3>
<h4>
  
  
  Critical CSS
</h4>

<p>Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.</p>
<h4>
  
  
  Reduce CSS and JavaScript blocking
</h4>

• Use to delay non-critical CSS loading.
• Use async or defer attributes to asynchronously load JavaScript.

<script async src="script.js"></script>

10. 網路生命徵象監控

專注於LCP（最大內容繪製）、FID（首次輸入延遲）和CLS（累積佈局偏移）等Web Vitals指標，這些是衡量使用者體驗的關鍵指標。

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));
    });
}

以上是深入理解前端效能優化：從網路到渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！