介紹async 和 defer的使用
在HTML中，<script>標(biāo)簽用于嵌入或引用JavaScript代碼。async和defer都是<script>標(biāo)簽的屬性，用于改變腳本的加載和執(zhí)行方式，以優(yōu)化頁面加載性能。
async屬性
定義：async屬性表示異步地加載腳本。當(dāng)瀏覽器遇到帶有async屬性的<script>標(biāo)簽時(shí)，它會(huì)并行下載腳本，而不阻塞HTML文檔的解析。
行為：當(dāng)腳本下載完成后，瀏覽器會(huì)暫停文檔的解析，執(zhí)行這個(gè)腳本，然后再繼續(xù)HTML文檔的解析。
使用場(chǎng)景：適用于那些與頁面其余部分相互獨(dú)立的腳本，比如廣告加載和數(shù)據(jù)追蹤腳本。因?yàn)?code>async腳本不保證按照指定的順序執(zhí)行，所以不適用于相互依賴的腳本。
defer屬性
定義：defer屬性表示在文檔解析和顯示完成后，再延遲執(zhí)行腳本。
行為：帶有defer屬性的腳本將被并行下載，但不會(huì)阻斷文檔的解析。這些腳本直到整個(gè)頁面都解析完成后，才會(huì)按照它們?cè)谖臋n中出現(xiàn)的順序執(zhí)行。
使用場(chǎng)景：適用于那些需要等待DOM樹構(gòu)建完成后才能執(zhí)行的腳本，比如操作DOM的腳本。defer腳本保證了執(zhí)行順序，適用于有依賴關(guān)系的腳本。
async與defer的區(qū)別
執(zhí)行時(shí)間：async腳本在下載完成后立即執(zhí)行，這可能會(huì)在文檔解析過程中發(fā)生；而defer腳本則要等到文檔解析完成后，才會(huì)按順序執(zhí)行。
執(zhí)行順序：多個(gè)async腳本不能保證按照它們?cè)贖TML文檔中的順序執(zhí)行，而多個(gè)defer腳本則總是會(huì)按照它們?cè)谖臋n中出現(xiàn)的順序依次執(zhí)行。
使用示例
<!-- 異步加載腳本，不保證執(zhí)行順序 -->
<script async src="script1.js"></script>
<script async src="script2.js"></script>
<!-- 延遲執(zhí)行腳本，保證按照出現(xiàn)順序執(zhí)行 -->
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
在實(shí)際開發(fā)中，根據(jù)腳本的功能和依賴關(guān)系選擇使用async或defer，可以在不阻塞頁面渲染的同時(shí)，優(yōu)化用戶體驗(yàn)。
如果用JS創(chuàng)建的script標(biāo)簽，想創(chuàng)建一個(gè)async的script，應(yīng)該怎么寫呢？
在JavaScript中動(dòng)態(tài)創(chuàng)建并插入一個(gè)具有async屬性的<script>標(biāo)簽，可以按照以下步驟進(jìn)行：
使用document.createElement()方法創(chuàng)建一個(gè)新的<script>元素。
設(shè)置這個(gè)新創(chuàng)建的<script>元素的src屬性，指定需要加載的腳本URL。
設(shè)置async屬性為true，使其異步加載。
將這個(gè)<script>元素添加到文檔中，通常是添加到<head>或<body>元素中。
以下是具體的代碼示例：
// 創(chuàng)建一個(gè)新的script元素
var script = document.createElement('script');
// 設(shè)置script元素的src屬性
script.src = 'https://example.com/some-script.js';
// 將async屬性設(shè)置為true
script.async = true;
// 將script元素添加到文檔的<head>部分
document.head.appendChild(script);
這段代碼將創(chuàng)建一個(gè)新的<script>元素，將其src屬性設(shè)置為指定的腳本URL，并通過設(shè)置async屬性為true來實(shí)現(xiàn)異步加載。最后，這個(gè)<script>元素被添加到文檔的<head>部分，從而開始異步加載并執(zhí)行指定的JavaScript文件。
通過這種方式動(dòng)態(tài)添加的<script>標(biāo)簽，其行為與在HTML中直接使用<script async src="...">標(biāo)簽相同，即不會(huì)阻塞頁面的解析和渲染，提高了頁面加載的性能。
作者：Struggle_zhu
鏈接：https://juejin.cn/post/7362080157191651354
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
該文章在 2024/4/28 10:25:37 編輯過
400 186 1886
