script標(biāo)簽的異步加載async、defer、type="module"全面解析
更新時(shí)間：2026年03月08日 15:31:00 作者：FarmerLiusun
script標(biāo)簽用來(lái)在網(wǎng)頁(yè)中執(zhí)行JavaScript,它可以直接包含JavaScript代碼,也可以直接通過(guò)src指向一個(gè)同域或者不同域的外鏈,這篇文章主要介紹了script標(biāo)簽異步加載async、defer、type="module"的相關(guān)資料,需要的朋友可以參考下
本文主要是分享一下，關(guān)于加載script多種方式及區(qū)別
- 1.同步加載：
<script src="index.js"></script> - 2.
defer異步加載：<script defer src="index.js"></script> - 3.
async異步加載：<script async src="index.js"></script> - 4.
module異步加載：<script type="module" src="index.js"></script> - 5.
module async異步加載：<script type="module" src="index.js" async></script>
眾農(nóng)周知，瀏覽器解析
html時(shí)，如果遇到使用<script src="index.js"></script>加載js時(shí)，html的解析會(huì)被阻塞，這個(gè)時(shí)候會(huì)先去下載index.js，等待下載完并執(zhí)行完js之后，然后再繼續(xù)解析html。這樣的話，如果js下載時(shí)間過(guò)長(zhǎng)，無(wú)疑會(huì)增加頁(yè)面的渲染時(shí)間，那么，有沒有啥辦法可以讓解析html與下載js并行執(zhí)行呢？有的，并且提供了多種。
1.五種加載方式深度解析
1.1 同步加載<script src="index.js"></script>
特點(diǎn)
- 阻塞解析html
- 須等加載完js并執(zhí)行完之后才能繼續(xù)解析html
- 增加首屏渲染時(shí)間
不推薦使用
適用場(chǎng)景
- 傳統(tǒng)的加載script方式，需要兼容低版本瀏覽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 同步加載且阻塞解析html -->
<script src="index.js"></script>
</head>
<body>
</body>
</html>
1.2 異步加載，使用defer屬性
特點(diǎn)
- 并行下載js
- 不阻塞解析html，解析html與下載并行
- 在html解析完成后，
DOMContentLoaded事件觸發(fā)前執(zhí)行 - 多個(gè)script時(shí)，異步加載，按順序執(zhí)行
適用場(chǎng)景
- 加載的js存在依賴關(guān)系，須按順序執(zhí)行
- 加載的js需要操作DOM
- 常見vue、react項(xiàng)目中，構(gòu)建工具已自動(dòng)處理，編譯后自動(dòng)添加defer屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/test/favicon.ico" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<title>xxxxx管理系統(tǒng)</title>
<!-- 異步加載，優(yōu)先執(zhí)行第三方依賴 -->
<script defer="defer" src="/test/js/chunk-vendors.0821bbb1.js"></script>
<!-- 異步加載，上面的js執(zhí)行完再執(zhí)行 -->
<script defer="defer" src="/test/js/app.566a7ad5.js"></script>
<link href="/test/css/chunk-vendors.ff7db5f3.css" rel="external nofollow" rel="stylesheet" />
<link href="/test/css/app.0d1bd94e.css" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<noscript
><strong
>System doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong
></noscript
>
<div id="app"></div>
</body>
</html>
1.3 異步加載，使用async屬性
特點(diǎn)
- 并行下載js
- 下載階段，不阻塞解析html，解析html與下載并行
- 下載完成后馬上執(zhí)行
- 多個(gè)script時(shí)，異步加載，誰(shuí)先下載完誰(shuí)就執(zhí)行
- 可能阻塞解析html，如果解析html完成前就已經(jīng)下載完了，那就會(huì)執(zhí)行js，阻塞解析html
- 可能會(huì)阻塞
DOMContentLoaded事件的觸發(fā)時(shí)機(jī)當(dāng)js在 DOMContentLoaded 事件觸發(fā)前完成下載并執(zhí)行，就會(huì)延長(zhǎng) DOMContentLoaded的觸發(fā)時(shí)間，js的執(zhí)行會(huì)阻塞主線程，執(zhí)行完才會(huì)觸發(fā) DOMContentLoaded事件
適用場(chǎng)景
- 加載的js沒有賴關(guān)系，單獨(dú)執(zhí)行
- 加載的js無(wú)需操作DOM
- 常用于分析、廣告、埋點(diǎn)腳本加載
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/test/favicon.ico" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<title>xxxxxx官網(wǎng)</title>
<!-- 異步加載，獨(dú)立運(yùn)行，無(wú)腳本依賴 -->
<script async src="https://www.guanggao.com/gg/js?id=GG_1"></script>
<script async src="https://www.guanggao.com/gg/js?id=GG_2"></script>
</head>
<body>
<noscript
><strong
>System doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong
></noscript
>
<div id="app"></div>
</body>
</html>
1.4 異步加載，使用type="module"屬性
特點(diǎn)與defer差不多
- 不阻塞解析html，解析html與下載并行
- 在html解析完成后，
DOMContentLoaded事件觸發(fā)前執(zhí)行 - 多個(gè)script時(shí)，異步加載，按順序執(zhí)行
- 與
defer主要差異是，使用esm模塊化，且默認(rèn)開啟嚴(yán)格模式
適用場(chǎng)景 與defer差不多
- 加載的js存在依賴關(guān)系，須按順序執(zhí)行
- 加載的js需要操作DOM
- 使用esm開發(fā)的腳本
- 常見使用vite構(gòu)建的vue、react項(xiàng)目中，編譯后自動(dòng)添加type="module"屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/test/favicon.ico" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<title>xxxxxx系統(tǒng)</title>
<!-- 異步加載，使用esm開發(fā) -->
<script type="module" crossorigin src="/assets/index-BmxZ5FsG.js"></script>
</head>
<body>
<noscript
><strong
>System doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong
></noscript
>
<div id="app"></div>
</body>
</html>
1.5 異步加載，使用type="module" async屬性
特點(diǎn)與async差不多
- 并行下載js
- 下載階段，不阻塞解析html，解析html與下載并行
- 下載完成后馬上執(zhí)行
- 多個(gè)script時(shí)，異步加載，誰(shuí)先下載完誰(shuí)就執(zhí)行
- 可能阻塞解析html，如果解析html完成前就已經(jīng)下載完了，那就會(huì)執(zhí)行js，阻塞解析html
- 可能會(huì)阻塞
DOMContentLoaded事件的觸發(fā)時(shí)機(jī)當(dāng)js在 DOMContentLoaded 事件觸發(fā)前完成下載并執(zhí)行，就會(huì)延長(zhǎng) DOMContentLoaded的觸發(fā)時(shí)間，js的執(zhí)行會(huì)阻塞主線程，執(zhí)行完才會(huì)觸發(fā) DOMContentLoaded事件
- 與async主要差異是，使用esm模塊化，且默認(rèn)開啟嚴(yán)格模式``
適用場(chǎng)景 與async差不多
- 加載的js沒有賴關(guān)系，單獨(dú)執(zhí)行
- 加載的js無(wú)需操作DOM
- 常用于分析、廣告、埋點(diǎn)腳本加載
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/test/favicon.ico" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<title>xxxxxx官網(wǎng)</title>
<!-- 異步加載，使用esm開發(fā)，獨(dú)立運(yùn)行，無(wú)腳本依賴 -->
<script type="module" async src="https://www.guanggao.com/gg/js?id=GG_1"></script>
</head>
<body>
<noscript
><strong
>System doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong
></noscript
>
<div id="app"></div>
</body>
</html>
2.總結(jié)
2.1.加載script的5種方式：
- 同步-阻塞解析html：
<script> - 異步-不阻塞解析html-按順序執(zhí)行：
<script defer> - 異步-不阻塞解析html-無(wú)序下載完立即執(zhí)行：
<script async> - 異步-esm-不阻塞解析html-按順序執(zhí)行：
<script type="module"> - 異步-esm-不阻塞解析html-無(wú)序下載完立即執(zhí)行：
<script type="module" async>
2.2.各方式差異：
| 加載方式 | 執(zhí)行時(shí)機(jī) | 是否阻塞HTML解析 | 執(zhí)行順序 | 適用場(chǎng)景 |
|---|---|---|---|---|
<script> | 立即執(zhí)行 | 是 | 文檔順序 | 傳統(tǒng)腳本 |
<script defer> | DOM解析后 | 否 | 文檔順序 | 依賴DOM的腳本 |
<script async> | 下載完成后 | 下載不阻塞，執(zhí)行可能阻塞 | 無(wú)序 | 獨(dú)立第三方腳本 |
<script type="module"> | DOM解析后 | 否 | 文檔順序 | ES模塊化代碼 |
<script type="module" async> | 下載完成后 | 下載不阻塞，執(zhí)行可能阻塞 | 無(wú)序 | 獨(dú)立ES模塊 |
2.3.加載流程圖：
2.4.使用建議：
- js使用非esm，優(yōu)先考慮使用
defer - js使用esm，優(yōu)先考慮使用
type="module"
總結(jié)
到此這篇關(guān)于script標(biāo)簽的異步加載async、defer、type="module"的文章就介紹到這了,更多相關(guān)script標(biāo)簽的異步加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
實(shí)現(xiàn)div可編輯的常見方法總結(jié)
實(shí)現(xiàn)div可編輯的常見方法總結(jié)...2007-04-04
js canvas畫布實(shí)現(xiàn)高斯模糊效果
這篇文章主要為大家詳細(xì)介紹了js canvas畫布實(shí)現(xiàn)高斯模糊效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
懸浮效果想必大家都不陌生吧，本文為大家介紹下使用js固定懸浮的實(shí)現(xiàn)思路及代碼，感興趣的朋友可以參考下2013-08-08
js跨域是個(gè)討論很多的話題。iframe跨域訪問也被研究的很透了,本文今天就叨叨兩句，感興趣的朋友可以了解下，就當(dāng)鞏固知識(shí)了，希望本文對(duì)你有所幫助2013-01-01
可折疊的樹形菜單想必大家并不陌生吧，實(shí)現(xiàn)方法有多種，在本文將為大家介紹下js是如何實(shí)現(xiàn)的，希望對(duì)大家有所幫助2013-09-09
js 效率組裝字符串,主要是利用了數(shù)組原理。2009-12-12
記得幾年前剛接觸前端的時(shí)候，覺得能在網(wǎng)頁(yè)上拖移元素是一件很爽的事，能寫一段這樣的代碼是件很了不起的事情，于是乎google,baidu蠻多代碼來(lái)學(xué)習(xí)，大致明白了思路，總結(jié)如下2010-12-12
這篇文章主要介紹了JS操作HTML自定義屬性的方法,以實(shí)例形式分析了html中自定義屬性的設(shè)置與對(duì)應(yīng)的javascript操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
微信小程序?qū)崿F(xiàn)列表的橫向滑動(dòng)方式
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表的橫向滑動(dòng)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
簡(jiǎn)單的加密css地址防止別人下載你的CSS文件的方法
阻止別人不那么容易下載或查看到你的CSS文件,高手可能阻止不了,不過(guò)新手們一時(shí)會(huì)不知所措,費(fèi)一番周折了2009-10-10