本文目錄導讀：

1. 引言
2. 1. 什么是渲染阻塞？
3. 2. 如何優(yōu)化CSS加載以減少渲染阻塞？
4. 3. 如何優(yōu)化JavaScript加載以減少渲染阻塞？
5. 4. 其他優(yōu)化策略
6. 5. 實際案例分析
7. 6. 總結(jié)

在現(xiàn)代Web開發(fā)中，頁面性能優(yōu)化是提升用戶體驗的關(guān)鍵因素之一，JavaScript和CSS的加載方式直接影響頁面的渲染速度，如果這些資源加載不當，可能會導致渲染阻塞（Render Blocking），即瀏覽器必須等待這些資源下載并執(zhí)行完畢才能繼續(xù)渲染頁面，本文將深入探討如何通過延遲加載（Lazy Loading）技術(shù)優(yōu)化JavaScript和CSS的加載，從而減少渲染阻塞,提高頁面加載速度。

---

什么是渲染阻塞？

渲染阻塞是指瀏覽器在解析HTML時，遇到外部資源（如JavaScript和CSS）時，必須暫停DOM構(gòu)建和渲染,直到這些資源加載并執(zhí)行完畢。

• CSS阻塞渲染：瀏覽器在遇到<link rel="stylesheet">時，會暫停渲染，直到CSS文件加載并解析完成，以確保樣式正確應(yīng)用。
• JavaScript阻塞渲染：默認情況下，瀏覽器遇到<script>標簽時會暫停HTML解析，直到腳本下載并執(zhí)行完畢（除非使用async或defer屬性）。

這種阻塞行為會導致首屏渲染延遲（FCP, First Contentful Paint）變慢,影響用戶體驗和SEO評分。

---

如何優(yōu)化CSS加載以減少渲染阻塞？

1 使用media屬性優(yōu)化CSS加載

CSS的media屬性可以讓瀏覽器根據(jù)設(shè)備條件決定是否立即加載樣式表。

<link rel="stylesheet" href="print.css" media="print">  <!-- 僅在打印時加載 -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">  <!-- 僅在移動設(shè)備上加載 -->

這樣,非關(guān)鍵CSS不會阻塞首屏渲染。

2 內(nèi)聯(lián)關(guān)鍵CSS（Critical CSS）

將首屏渲染所需的關(guān)鍵CSS直接內(nèi)聯(lián)到HTML的<style>標簽中，避免額外的HTTP請求：

<style>
  /* 關(guān)鍵CSS代碼 */
  body { font-family: Arial; }
  .header { background: #fff; }
</style>

剩余的非關(guān)鍵CSS可以通過異步加載方式引入。

3 異步加載CSS

使用JavaScript動態(tài)加載CSS，避免阻塞渲染：

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);

或者使用preload結(jié)合onload事件優(yōu)化加載：

<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

---

如何優(yōu)化JavaScript加載以減少渲染阻塞？

1 使用async和defer屬性

• async：腳本異步加載，下載完成后立即執(zhí)行（不保證順序）。
• defer：腳本異步加載，但延遲到DOM解析完成后執(zhí)行（按順序執(zhí)行）。

<script src="script.js" async></script>  <!-- 適用于獨立腳本 -->
<script src="script.js" defer></script>  <!-- 適用于依賴DOM的腳本 -->

2 動態(tài)加載JavaScript

通過document.createElement動態(tài)插入<script>標簽：

const script = document.createElement('script');
script.src = 'app.js';
document.body.appendChild(script);

這樣可以避免阻塞主線程。

3 代碼拆分（Code Splitting）

現(xiàn)代前端框架（如React、Vue、Webpack）支持代碼拆分，按需加載模塊：

// Webpack動態(tài)導入
import('./module.js').then(module => {
  module.init();
});

這樣可以減少初始加載的JavaScript體積。

---

其他優(yōu)化策略

1 使用requestIdleCallback延遲非關(guān)鍵任務(wù)

requestIdleCallback可以讓瀏覽器在空閑時執(zhí)行低優(yōu)先級任務(wù)：

requestIdleCallback(() => {
  // 延遲加載廣告、分析腳本等
});

2 優(yōu)化資源加載順序

• 使用<link rel="preload">提前加載關(guān)鍵資源：

  <link rel="preload" href="font.woff2" as="font" crossorigin>

• 使用<link rel="preconnect">提前建立DNS連接：

  <link rel="preconnect" href="https://cdn.example.com">

3 減少JavaScript執(zhí)行時間

• 避免長任務(wù)（Long Tasks），使用setTimeout拆分計算密集型操作。
• 使用Web Workers處理后臺任務(wù),避免阻塞UI線程。

---

實際案例分析

案例：電商網(wǎng)站優(yōu)化首屏加載

1. 內(nèi)聯(lián)關(guān)鍵CSS：確保首屏樣式快速渲染。
2. 異步加載非關(guān)鍵CSS：使用preload優(yōu)化剩余樣式。
3. 延遲加載JavaScript：使用defer或動態(tài)加載廣告和分析腳本。
4. 代碼拆分：按需加載產(chǎn)品詳情頁的JS模塊。

優(yōu)化后，首屏加載時間從3.2秒降至1.5秒,提升用戶體驗和SEO排名。

---

減少JavaScript和CSS的渲染阻塞是提升網(wǎng)頁性能的關(guān)鍵，通過以下方法可以顯著優(yōu)化加載速度：
? CSS優(yōu)化：內(nèi)聯(lián)關(guān)鍵CSS、異步加載非關(guān)鍵CSS、使用media屬性。
? JavaScript優(yōu)化：使用async/defer、動態(tài)加載、代碼拆分。
? 其他策略：preload、requestIdleCallback、減少長任務(wù)。

通過合理的資源加載策略，可以有效降低渲染阻塞，提高頁面性能,讓用戶更快看到內(nèi)容。