JavaScript 腳本異步加載的幾種實現(xiàn)方法
更新時間：2025年10月20日 10:24:39 作者：晚夜微雨問海棠呀
本文主要介紹了JavaScript 腳本異步加載的幾種實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
JavaScript 腳本異步加載主要通過以下方式實現(xiàn)，它們在加載時機、執(zhí)行順序和阻塞行為上有明顯區(qū)別：
一、實現(xiàn)方式及區(qū)別
1.async屬性
<script src="script.js" async></script>
- 特點：
- 異步下載腳本，下載完成后立即執(zhí)行（可能中斷 HTML 解析）。
- 多個
async腳本的執(zhí)行順序不確定（先下載完先執(zhí)行）。
- 適用場景：獨立腳本（如統(tǒng)計代碼、廣告加載），無 DOM 依賴或無需嚴(yán)格順序。
2.defer屬性
<script src="script.js" defer></script>
- 特點：
- 異步下載腳本，但延遲到 HTML 解析完成后、
DOMContentLoaded事件前按順序執(zhí)行。 - 多個
defer腳本嚴(yán)格按聲明順序執(zhí)行。
- 異步下載腳本，但延遲到 HTML 解析完成后、
- 適用場景：依賴 DOM 或需要按序執(zhí)行的腳本（如庫文件+業(yè)務(wù)代碼）。
3.動態(tài)創(chuàng)建script標(biāo)簽
const script = document.createElement('script');
script.src = 'script.js';
document.head.appendChild(script); // 添加到文檔后開始加載
- 特點：
- 默認(rèn)行為類似
async（下載完成后立即執(zhí)行，順序不確定）。 - 可通過
script.async = false改為按順序執(zhí)行（模擬defer）。
- 默認(rèn)行為類似
- 控制權(quán)：可自由控制加載時機（例如用戶交互后加載）。
4.ES6 模塊（type="module"）
<script type="module" src="module.js"></script>
- 特點：
- 默認(rèn)具有
defer特性（延遲到 HTML 解析后執(zhí)行，且按順序）。 - 添加
async屬性后行為類似常規(guī)async（下載完立即執(zhí)行，順序不確定）。
- 默認(rèn)具有
- 注意：支持模塊化語法（
import/export），兼容現(xiàn)代瀏覽器。
二、關(guān)鍵區(qū)別對比
| 方式 | 是否阻塞 HTML 解析 | 執(zhí)行順序保證 | 觸發(fā)時機 |
|---|---|---|---|
| async | ?（異步下載） | ? | 下載完成立即執(zhí)行 |
| defer | ?（異步下載） | ? | HTML 解析后，DOMContentLoaded 前 |
| 動態(tài)腳本（默認(rèn)） | ? | ? | 下載完成立即執(zhí)行 |
| 動態(tài)腳本+async=false | ? | ? | 按添加順序執(zhí)行 |
| ES6 模塊（默認(rèn)） | ? | ? | 同 defer |
三、使用建議
- 優(yōu)先使用 defer：
- 將腳本放在 <head> 中，避免渲染阻塞，同時保證執(zhí)行順序（如依賴 jQuery 的插件）。
- 獨立腳本用 async：
- 用于無依賴的腳本（如 Google Analytics）。
- 動態(tài)加載非關(guān)鍵腳本：
- 用戶交互后或延遲加載非首屏必需的腳本（如評論區(qū)、懶加載庫）。
- 現(xiàn)代項目使用 ES6 模塊：
- 兼顧模塊化和加載性能（需配合打包工具如 Webpack 優(yōu)化）。
四、注意事項
- 避免在異步腳本中使用
document.write（可能導(dǎo)致頁面崩潰）。 - 可通過
onload/onerror事件監(jiān)聽加載狀態(tài)：script.onload = () => console.log('加載成功'); script.onerror = () => console.log('加載失敗'); - 兼容性：
defer/async兼容 IE10+，動態(tài)加載無兼容問題。
總結(jié)
異步加載的核心目標(biāo)是減少頁面渲染阻塞，根據(jù)腳本是否依賴 DOM 或其他腳本選擇合適方案：
- 順序重要 → defer
- 順序無關(guān) → async
- 精細(xì)控制 → 動態(tài)加載
- 模塊化項目 → ES6 模塊
到此這篇關(guān)于JavaScript 腳本異步加載的幾種實現(xiàn)方法的文章就介紹到這了,更多相關(guān)JavaScript 腳本異步加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
文章介紹了幾種查看Next.js默認(rèn)配置信息的方法,包括使用Next.js CLI、getConfigAPI、實驗性CLI命令以及在開發(fā)模式下訪問特定路徑,感興趣的小伙伴跟著小編一起來看看吧2025-02-02![JavaScript 用Node.js寫Shell腳本[譯]](http://img.jbzj.com/images/xgimg/bcimg1.png)
JavaScript 用Node.js寫Shell腳本[譯]
你懂JavaScript嗎?你需要寫一個Shell腳本嗎?那么你應(yīng)該試一下Node.js,它很容易安裝,而且很適合通過寫Shell腳本來學(xué)習(xí)它2012-09-09
遮照層效果實現(xiàn)代碼。2009-09-09
JavaScript數(shù)組reduce()方法的語法與實例解析
js函數(shù)中有三個在特定場合很好用的函數(shù):reduce(),map(),filter(),這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組reduce()方法的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Array.filter中如何正確使用Async,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
詳解基于DllPlugin和DllReferencePlugin的webpack構(gòu)建優(yōu)化
這篇文章主要介紹了詳解基于DllPlugin和DllReferencePlugin的webpack構(gòu)建優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了微信小程序如何實現(xiàn)精確的日期時間選擇器,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap輪播圖學(xué)習(xí)使用的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家介紹了javascript計算時間差的示例代碼，，一般來說都是計算當(dāng)前時間和一個指定時間點之間的差距，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了理解JavaScript設(shè)計模式中的單例模式，單例模式即Singleton?Pattern是最簡單的設(shè)計模式之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下2022-04-04