快捷導(dǎo)航

JavaScript文件引用方式及其同步執(zhí)行與異步執(zhí)行示例代碼

更新時(shí)間：2025年08月21日 11:22:01 作者：Yolanda0504

js是一門單線程語(yǔ)言,因此如果在js的線程中出現(xiàn)耗時(shí)操作,就容易堵塞后續(xù)代碼的執(zhí)行,這篇文章主要介紹了JavaScript文件引用方式及其同步執(zhí)行與異步執(zhí)行的相關(guān)資料,需要的朋友可以參考下

前言

同步加載適用于需要依賴該文件中的代碼執(zhí)行結(jié)果的情況，而異步加載適用于不需要依賴該文件中的代碼執(zhí)行結(jié)果的情況，可以優(yōu)化頁(yè)面加載速度。

一、同步加載

同步加載：即阻塞模式，會(huì)影響瀏覽器的后續(xù)處理，停止瀏覽器的后續(xù)解析，因此，會(huì)停止瀏覽器后續(xù)對(duì)文件（eg: img）的加載、渲染和執(zhí)行。js 之所以要同步執(zhí)行，是因?yàn)?js 中可能有輸出 document 內(nèi)容、修改dom、重定向等行為，所以默認(rèn)同步執(zhí)行才是安全的。

常見(jiàn)的同步加載方式：

（1）script外鏈

html文件中的<script src='xxx.js'></script> js文件將會(huì)以同步的方式加載。

我們平時(shí)最常使用的就是這種同步加載形式：

<script src="http://yourdomain.com/script.js"></script>

同步模式，又稱阻塞模式，會(huì)阻止瀏覽器的后續(xù)處理，停止了后續(xù)的解析，因此停止了后續(xù)的文件加載（如圖像）、渲染、代碼執(zhí)行。
js 之所以要同步執(zhí)行，是因?yàn)?js 中可能有輸出 document 內(nèi)容、修改dom、重定向等行為，所以默認(rèn)同步執(zhí)行才是安全的。

以前的一般建議是把

（2）h5 中script的新屬性 async 設(shè)定為false ，js文件將會(huì)以同步的方式加載。

（3）html中script標(biāo)簽之間的js代碼也是同步加載執(zhí)行的。

<script>
//將會(huì)被同步加載執(zhí)行的代碼。
</script>

總的來(lái)說(shuō)，瀏覽器在解析 HTML 文檔時(shí)，如果遇到 script標(biāo)簽，便會(huì)停下對(duì) HTML 文檔的解析，轉(zhuǎn)而去處理腳本。如果腳本是內(nèi)聯(lián)的，瀏覽器會(huì)先去執(zhí)行這段內(nèi)聯(lián)的腳本，如果是外鏈的，那么先會(huì)去加載腳本，然后再執(zhí)行。等到腳本執(zhí)行結(jié)束后，瀏覽器才會(huì)繼續(xù)解析 HTML 文檔。

二、異步加載

常見(jiàn)的異步加載方式：

1、任何以添加 script 節(jié)點(diǎn)(例如 appendChild(scriptNode) ) 的方式引入的js文件都是異步執(zhí)行的。

這種技術(shù)可以讓腳本的加載與頁(yè)面的其它部分并行進(jìn)行，下面是一個(gè)示例：

var script = document.createElement(“script”);
script.setAttribute(“src”,“xx.js”);
documenrt.getElementsByTagName(“head”)[0].appendChild(script);

在以上代碼中，創(chuàng)建了一個(gè)新的script元素并指定了其源文件。通過(guò)將這個(gè)元素添加到document.head中，實(shí)現(xiàn)了腳本文件的異步加載。

2.使用async和defer實(shí)現(xiàn)異步加載

使用async屬性：

async屬性允許腳本異步加載。一旦腳本可用，它將盡快執(zhí)行，而不用等到頁(yè)面解析完成。這意味著腳本的執(zhí)行順序無(wú)法保證。

async 屬性詳解：

加載方式: 使用 async 的腳本會(huì)異步加載，與 HTML 解析同時(shí)進(jìn)行。
執(zhí)行順序: 腳本會(huì)在加載完成后立即執(zhí)行，不保證按照它們?cè)陧?yè)面中的出現(xiàn)順序執(zhí)行。
執(zhí)行時(shí)機(jī): 一旦腳本加載完成，就會(huì)立即執(zhí)行，可能會(huì)在 HTML 解析完成之前執(zhí)行，也可能在解析過(guò)程中執(zhí)行。
適用場(chǎng)景: 用于獨(dú)立、不依賴于其他腳本或 DOM 內(nèi)容的腳本，例如分析工具或廣告腳本，因?yàn)樗鼈兛梢员M快執(zhí)行而不影響頁(yè)面的解析。

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

如果頁(yè)面上存在多個(gè)設(shè)置了async屬性并通過(guò)src引用的外部腳本的

使用defer屬性：

與async屬性類似，defer同樣允許腳本在HTML解析時(shí)異步加載，但腳本只會(huì)在整個(gè)頁(yè)面解析完成后執(zhí)行。使用這種方式，腳本的執(zhí)行順隨是相對(duì)于它們?cè)谖臋n中的出現(xiàn)順序的。

defer 屬性

加載方式: 使用 defer 的腳本在 HTML 解析的同時(shí)異步加載。
執(zhí)行順序: 所有帶有 defer 的腳本會(huì)按照它們?cè)陧?yè)面中的出現(xiàn)順序依次執(zhí)行。
執(zhí)行時(shí)機(jī): 腳本會(huì)在 HTML 文檔解析完畢后執(zhí)行，也就是在 DOMContentLoaded 事件觸發(fā)之前，但不會(huì)阻塞頁(yè)面的解析。
適用場(chǎng)景: 當(dāng)腳本依賴于 DOM 結(jié)構(gòu)時(shí)，使用 defer 是理想的，因?yàn)樗ＷC了腳本執(zhí)行時(shí) DOM 已經(jīng)完全加載完成。

如果頁(yè)面中存在設(shè)置了defer="defer"屬性并且是通過(guò)src引用的外部腳本的

如果頁(yè)面上存在多個(gè)設(shè)置了defer="defer"屬性并通過(guò)src引用的外部腳本的

<script src="example.js" defer></script>

// 正常加載順序從上到下
<script src="./js/test.js"></script> // console.log('這是普通外鏈的js文件');
// 設(shè)置defer屬性
<script defer src="./js/test1.js"></script> // console.log('這是設(shè)置了defer屬性的外鏈的js文件');
// 內(nèi)嵌腳本
<script>
	console.log('這是內(nèi)嵌的JS腳本');
    document.addEventListener('DOMContentLoaded', function () {
      console.log('這是頁(yè)面的DOMContentLoaded事件');
    });
</script>

執(zhí)行結(jié)果：