JavaScript 腳本異步加載的幾種實現(xiàn)方法
更新時間：2025年10月20日 10:24:39 作者：晚夜微雨問海棠呀
本文主要介紹了JavaScript 腳本異步加載的幾種實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
JavaScript 腳本異步加載主要通過以下方式實現(xiàn)，它們在加載時機、執(zhí)行順序和阻塞行為上有明顯區(qū)別：
一、實現(xiàn)方式及區(qū)別
1.async屬性
<script src="script.js" async></script>
- 特點：
- 異步下載腳本，下載完成后立即執(zhí)行（可能中斷 HTML 解析）。
- 多個
async腳本的執(zhí)行順序不確定（先下載完先執(zhí)行）。
- 適用場景：獨立腳本（如統(tǒng)計代碼、廣告加載），無 DOM 依賴或無需嚴格順序。
2.defer屬性
<script src="script.js" defer></script>
- 特點：
- 異步下載腳本，但延遲到 HTML 解析完成后、
DOMContentLoaded事件前按順序執(zhí)行。 - 多個
defer腳本嚴格按聲明順序執(zhí)行。
- 異步下載腳本，但延遲到 HTML 解析完成后、
- 適用場景：依賴 DOM 或需要按序執(zhí)行的腳本（如庫文件+業(yè)務(wù)代碼）。
3.動態(tài)創(chuàng)建script標簽
const script = document.createElement('script');
script.src = 'script.js';
document.head.appendChild(script); // 添加到文檔后開始加載
- 特點：
- 默認行為類似
async（下載完成后立即執(zhí)行，順序不確定）。 - 可通過
script.async = false改為按順序執(zhí)行（模擬defer）。
- 默認行為類似
- 控制權(quán)：可自由控制加載時機（例如用戶交互后加載）。
4.ES6 模塊（type="module"）
<script type="module" src="module.js"></script>
- 特點：
- 默認具有
defer特性（延遲到 HTML 解析后執(zhí)行，且按順序）。 - 添加
async屬性后行為類似常規(guī)async（下載完立即執(zhí)行，順序不確定）。
- 默認具有
- 注意：支持模塊化語法（
import/export），兼容現(xiàn)代瀏覽器。
二、關(guān)鍵區(qū)別對比
| 方式 | 是否阻塞 HTML 解析 | 執(zhí)行順序保證 | 觸發(fā)時機 |
|---|---|---|---|
| async | ?（異步下載） | ? | 下載完成立即執(zhí)行 |
| defer | ?（異步下載） | ? | HTML 解析后，DOMContentLoaded 前 |
| 動態(tài)腳本（默認） | ? | ? | 下載完成立即執(zhí)行 |
| 動態(tài)腳本+async=false | ? | ? | 按添加順序執(zhí)行 |
| ES6 模塊（默認） | ? | ? | 同 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é)
異步加載的核心目標是減少頁面渲染阻塞，根據(jù)腳本是否依賴 DOM 或其他腳本選擇合適方案：
- 順序重要 → defer
- 順序無關(guān) → async
- 精細控制 → 動態(tài)加載
- 模塊化項目 → ES6 模塊
到此這篇關(guān)于JavaScript 腳本異步加載的幾種實現(xiàn)方法的文章就介紹到這了,更多相關(guān)JavaScript 腳本異步加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS封裝通過className獲取元素的函數(shù),涉及javascript針對頁面元素屬性的遍歷與數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)jquery焦點圖效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Javascript數(shù)組的?forEach?方法詳細介紹
這篇文章主要介紹了Javascript數(shù)組的forEach方法詳細介紹,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
對于js初學(xué)著必須理解this和srcElement的應(yīng)用，這也是面試中經(jīng)?？嫉降?。下面我們就通過幾個示例來詳細了解下2015-05-05
前端無接口實現(xiàn)Table導(dǎo)出Excel的兩種方案
在日常開發(fā)中,表格數(shù)據(jù)導(dǎo)出Excel是高頻需求,多數(shù)場景下依賴后端接口返回二進制文件實現(xiàn)下載,但當無后端接口支持時,前端也可通過純前端方案完成導(dǎo)出,以下是兩種實用方案的詳細實現(xiàn)與對比,需要的朋友可以參考下2025-08-08
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習一下2023-12-12
記錄一下這些內(nèi)容只是以后查閱起來方便，作為自己知識積累的記錄。其中有很多是參考網(wǎng)絡(luò)上的資源，不再一一寫出出處，還請原作者見諒。2010-12-12
JS實現(xiàn)網(wǎng)頁上隨滾動條滾動的層效果代碼
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁上隨滾動條滾動的層效果代碼,涉及JavaScript頁面元素屬性的獲取、運算及設(shè)置等操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)多條件篩選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
TypeScript中yield和Generator的使用指南
本文主要介紹了TypeScript中Generator與yield的用法,涵蓋其語法、類型定義、典型應(yīng)用場景及注意事項,具有一定的參考價值,感興趣的可以來了解一下2025-08-08