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