快捷導(dǎo)航

一文詳解如何避免JavaScript 代碼阻塞頁面渲染

更新時間：2026年02月01日 11:39:47 作者：Smilezyl

阻塞渲染是指瀏覽器在解析 HTML 構(gòu)建 DOM 樹的過程中,遇到 <script> 標簽時會暫停 DOM 解析,等待腳本下載并執(zhí)行完畢后才繼續(xù)解析,本文給大家介紹了如何避免JavaScript 代碼阻塞頁面渲染,需要的朋友可以參考下

核心答案

阻塞渲染是指瀏覽器在解析 HTML 構(gòu)建 DOM 樹的過程中，遇到 <script> 標簽時會暫停 DOM 解析，等待腳本下載并執(zhí)行完畢后才繼續(xù)解析。這是因為 JavaScript 可能會修改 DOM 結(jié)構(gòu)（如 document.write），瀏覽器必須確保 DOM 的正確性。

避免阻塞的核心方法：

使用 async 屬性：腳本異步下載，下載完立即執(zhí)行
使用 defer 屬性：腳本異步下載，DOM 解析完成后按順序執(zhí)行
將腳本放在 </body> 前
動態(tài)創(chuàng)建 script 標簽

深入解析

瀏覽器渲染流程

HTML → DOM Tree
                  → Render Tree → Layout → Paint
CSS  → CSSOM

阻塞機制詳解

1. JavaScript 阻塞 DOM 解析

HTML解析 → 遇到<script> → 暫停解析 → 下載JS → 執(zhí)行JS → 繼續(xù)解析

2. CSS 也會間接阻塞

CSS 本身不阻塞 DOM 解析，但阻塞渲染
如果 JS 在 CSS 之后，JS 會等待 CSSOM 構(gòu)建完成（因為 JS 可能訪問樣式）

async vs defer 的區(qū)別

特性	async	defer
下載	異步，不阻塞解析	異步，不阻塞解析
執(zhí)行時機	下載完立即執(zhí)行	DOM 解析完成后執(zhí)行
執(zhí)行順序	不保證順序	保證順序
適用場景	獨立腳本（統(tǒng)計、廣告）	有依賴關(guān)系的腳本

常見誤區(qū)

誤區(qū)：async 和 defer 可以同時使用

實際：同時存在時，現(xiàn)代瀏覽器優(yōu)先使用 async

誤區(qū)：內(nèi)聯(lián)腳本可以使用 async/defer

實際：async/defer 只對外部腳本有效

誤區(qū)：放在 body 底部就不會阻塞

實際：仍會阻塞，只是此時 DOM 已基本解析完成，影響較小

代碼示例

<!-- 1. 阻塞渲染（默認行為） -->
<script src="app.js"></script>

<!-- 2. async：異步下載，下載完立即執(zhí)行 -->
<script async src="analytics.js"></script>

<!-- 3. defer：異步下載，DOM 解析后按順序執(zhí)行 -->
<script defer src="vendor.js"></script>
<script defer src="app.js"></script>  <!-- 保證在 vendor.js 之后執(zhí)行 -->

<!-- 4. 動態(tài)加載腳本 -->
<script>
  const script = document.createElement('script');
  script.src = 'lazy-module.js';
  script.async = false; // 保證順序執(zhí)行
  document.body.appendChild(script);
</script>

<!-- 5. 模塊腳本（默認 defer 行為） -->
<script type="module" src="app.mjs"></script>

<!-- 6. 預(yù)加載關(guān)鍵資源 -->
<link rel="preload" href="critical.js" rel="external nofollow"  as="script">

現(xiàn)代優(yōu)化方案

// 使用 Intersection Observer 懶加載腳本
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const script = document.createElement('script');
      script.src = entry.target.dataset.src;
      document.body.appendChild(script);
      observer.unobserve(entry.target);
    }
  });
});

// 使用 requestIdleCallback 在空閑時加載
requestIdleCallback(() => {
  const script = document.createElement('script');
  script.src = 'non-critical.js';
  document.body.appendChild(script);
});