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