JavaScript實現無阻塞加載的常用方式

更新時間：2025年03月11日 08:40:30 作者：Epicurus

在 JavaScript 中,無阻塞加載（Non-blocking Loading）是優(yōu)化網頁性能的關鍵技術,通過避免腳本阻塞頁面渲染和其他資源的加載,提升用戶體驗,以下是實現無阻塞加載的常用方法及示例,需要的朋友可以參考下

1. 使用 async 屬性
2. 使用 defer 屬性
3. 動態(tài)腳本加載
4. 使用 Promise 或 async/await 控制加載順序
5. 使用 Intersection Observer 延遲加載
6. 模塊化動態(tài)導入（ES6 import()）
7. 使用 Web Workers 處理計算密集型任務
8. 資源預加載（preload 和 prefetch）
9. 條件加載（根據瀏覽器特性）
10. 服務端異步加載（SSR + Hydration）

總結

JavaScript無阻塞加載的方式

在 JavaScript 中，無阻塞加載（Non-blocking Loading）是優(yōu)化網頁性能的關鍵技術，通過避免腳本阻塞頁面渲染和其他資源的加載，提升用戶體驗。以下是實現無阻塞加載的常用方法及示例：

1. 使用 async 屬性

作用：異步加載腳本，下載完成后立即執(zhí)行，不阻塞 HTML 解析。
適用場景：獨立腳本，不依賴其他腳本或 DOM。
示例：

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

2. 使用 defer 屬性

作用：異步加載腳本，但延遲到 HTML 解析完成后按順序執(zhí)行。
適用場景：需要按順序執(zhí)行且依賴 DOM 的腳本。
示例：

<script defer src="script1.js"></script>
<script defer src="script2.js"></script> <!-- script1 先執(zhí)行 -->

3. 動態(tài)腳本加載

通過 JavaScript 動態(tài)創(chuàng)建 <script> 標簽，實現按需加載。

適用場景：非關鍵腳本或條件加載。
示例：

function loadScript(src) {
    const script = document.createElement('script');
    script.src = src;
    document.body.appendChild(script);
}
// 在需要時加載
window.addEventListener('DOMContentLoaded', () => {
    loadScript('script.js');
});

4. 使用 Promise 或 async/await 控制加載順序

結合動態(tài)加載和 Promise，管理腳本依賴關系。

示例：

function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

async function init() {
    await loadScript('lib.js');
    await loadScript('app.js'); // 確保 lib.js 先加載
}
init();

5. 使用 Intersection Observer 延遲加載

在元素進入視口時加載腳本，適用于非首屏資源。

示例：

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadScript('lazy-script.js');
            observer.unobserve(entry.target);
        }
    });
});
observer.observe(document.querySelector('#lazy-element'));

6. 模塊化動態(tài)導入（ES6 import()）

按需加載 ES6 模塊，適用于現代瀏覽器。

示例：

button.addEventListener('click', async () => {
    const module = await import('./module.js');
    module.doSomething();
});

7. 使用 Web Workers 處理計算密集型任務

將耗時任務移至后臺線程，避免阻塞主線程。

示例：

const worker = new Worker('worker.js');
worker.postMessage({ data: 'start' });
worker.onmessage = (e) => {
    console.log('Result:', e.data);
};

8. 資源預加載（preload 和 prefetch）

通過 <link> 標簽提示瀏覽器提前加載資源。

preload：高優(yōu)先級資源，當前頁面使用。

<link rel="preload" href="critical.js" rel="external nofollow"  as="script">

prefetch：低優(yōu)先級資源，未來頁面可能使用。

<link rel="prefetch" href="next-page.js" rel="external nofollow"  as="script">

9. 條件加載（根據瀏覽器特性）

檢測瀏覽器支持后加載特定腳本。

示例：

if ('IntersectionObserver' in window) {
    loadScript('modern-script.js');
} else {
    loadScript('fallback-script.js');
}

10. 服務端異步加載（SSR + Hydration）

結合服務端渲染（SSR）和客戶端激活（Hydration），按需加載交互邏輯。

示例（Next.js 框架）：

import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));

總結

方法	核心原理	適用場景	優(yōu)點	缺點
`async`/`defer`	異步加載腳本	首屏非關鍵腳本	簡單易用	`async` 不保證執(zhí)行順序
動態(tài)腳本加載	按需創(chuàng)建`<script>` 標簽	非關鍵腳本/條件加載	靈活控制加載時機	需手動管理依賴
`import()` 動態(tài)導入	按需加載 ES6 模塊	現代瀏覽器應用	模塊化支持	需支持 ES6 模塊
`Intersection Observer`	延遲加載視口外資源	圖片、懶加載組件	高性能懶加載	兼容性需處理
`Web Workers`	后臺線程執(zhí)行任務	計算密集型操作	避免主線程阻塞	無法直接操作 DOM
資源預加載	提前加載關鍵資源	優(yōu)化關鍵路徑	減少加載延遲	可能浪費帶寬