前言

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

一、同步加載

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

常見的同步加載方式：

（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>

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

二、異步加載

常見的異步加載方式：

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

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

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

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

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

使用async屬性：

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

async 屬性詳解：

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

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

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

使用defer屬性：

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

defer 屬性

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

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

如果頁面上存在多個(gè)設(shè)置了defer="defer"屬性并通過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('這是頁面的DOMContentLoaded事件');
    });
</script>

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

區(qū)別總結(jié)：

• 加載順序: async 無序（哪個(gè)腳本先加載完哪個(gè)先執(zhí)行），defer 有序（按照 HTML 中的順序執(zhí)行）。
• 執(zhí)行時(shí)機(jī): async 腳本一旦加載完成立刻執(zhí)行，defer 腳本會(huì)在 HTML 解析完成之后執(zhí)行。

執(zhí)行時(shí)機(jī)圖示：

• 普通 script 標(biāo)簽：同步加載，立即阻塞 HTML 解析，加載完畢后執(zhí)行。
• defer 腳本：異步加載，不阻塞 HTML 解析，等 HTML 全部解析完后按順序執(zhí)行。
• async 腳本：異步加載，不阻塞 HTML 解析，但加載完畢后立即執(zhí)行，且無序。

哪個(gè)更好？

當(dāng)腳本依賴于頁面的 DOM 結(jié)構(gòu)時(shí)，使用 defer 更安全。

當(dāng)腳本與其他腳本和頁面結(jié)構(gòu)無關(guān)時(shí)，可以使用 async 以加快加載和執(zhí)行速度。

不同scritp的加載和執(zhí)行時(shí)機(jī)

總結(jié) 

到此這篇關(guān)于JavaScript文件引用方式及其同步執(zhí)行與異步執(zhí)行的文章就介紹到這了,更多相關(guān)js文件引用方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論