标簽及async、defer屬性注意事項

首先看下html中的<script>标簽

在 HTML 中，<script> 标簽用于引入和執行 JavaScript 代碼。它是一種用于在 HTML 文檔中嵌入或引用 JavaScript 代碼的标簽。

<script> 标簽具有以下作用：

1. 引入外部 JavaScript 檔案：使用 src 屬性指定外部 JavaScript 檔案的路徑，并通過 <script> 标簽将其引入到 HTML 頁面中。示例：

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

這樣，浏覽器将下載下傳并執行 script.js 檔案中的 JavaScript 代碼。

1. 内嵌 JavaScript 代碼：直接在 <script> 标簽中編寫 JavaScript 代碼。示例：

<script>
function sayHello() {
console.log('Hello, World!');
}
</script>
           

當浏覽器解析到該 <script> 标簽時，其中的 JavaScript 代碼将被立即執行。

1. 行内事件處理程式：通過在 HTML 元素上的事件屬性中使用 <script> 标簽，指定 JavaScript 代碼作為事件處理程式。示例：

<button onclick="alert('Button clicked!')">Click me</button>
           

當按鈕被點選時，所指定的 JavaScript 代碼将被執行。

1. 提供配置和資料：可以在 <script> 标簽中定義全局變量、對象或函數，供其他 JavaScript 代碼使用。示例：

<script>
var apiUrl = 'https://example.com/api';
</script>
           

<script>标簽中的async、defer屬性

在 HTML 的 <script> 标簽中，async 和 defer 是用于控制腳本加載和執行的屬性。

1. async 屬性

當 <script> 标簽具有 async 屬性時，腳本檔案将異步加載并執行，不會阻塞頁面的渲染。浏覽器遇到帶有 async 屬性的 <script> 标簽時，會立即開始下載下傳腳本檔案，并在下載下傳完成後立即執行腳本，同時繼續解析 HTML 文檔。多個帶有 async 屬性的腳本檔案的執行順序是不确定的，它們可能以不同的順序完成下載下傳和執行。

作用：

• 異步加載腳本，不會阻塞其他資源的加載和頁面渲染。
• 适用于獨立的、互不依賴的腳本檔案，或者對腳本執行順序沒有嚴格要求的情況。

示例：

<script async src="script1.js"></script>
<script async src="script2.js"></script>
           

1. defer 屬性：

當 <script> 标簽具有 defer 屬性時，腳本檔案将異步加載但延遲執行，直到 HTML 文檔完全解析完成後再執行腳本。

與 async 屬性不同，帶有 defer 屬性的腳本保留了它們在 HTML 文檔中出現的順序執行，并在 DOMContentLoaded 事件觸發前執行。

作用：

• 異步加載腳本，不會阻塞其他資源的加載和頁面渲染。
• 保留腳本的執行順序，适用于需要按照特定順序執行的腳本檔案，或者要在 DOMContentLoaded 事件之前執行的腳本。

示例：

<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
           

使用 async 和 defer 屬性可以優化腳本的加載和執行方式，提高頁面渲染性能和使用者體驗。

使用async 和 defer 需要注意

在使用 async 和 defer 屬性時，需要注意以下幾點：

1. 順序依賴：

async 屬性會導緻腳本檔案在下載下傳完成後立即執行，并且多個帶有 async 屬性的腳本檔案的執行順序是不确定的。

而 defer 屬性會保留腳本檔案的執行順序，按照它們在 HTML 文檔中出現的順序依次執行。是以，如果腳本之間有依賴關系或需要按特定順序執行，應選擇使用 defer 屬性。

1. DOMContentLoaded 事件：

帶有 defer 屬性的腳本會在 DOMContentLoaded 事件觸發前執行。是以，在腳本中操作和通路 HTML 元素時，要確定對應的 HTML 元素已經被解析和加載。如果腳本需要在 DOMContentLoaded 事件之前執行，請使用 defer 屬性。

1. 腳本加載失敗處理：

使用 async 或 defer 屬性加載的腳本檔案，如果下載下傳失敗，不會觸發腳本加載錯誤事件（onerror 事件），而是會靜默失敗。為了避免這種情況，可以在 <script> 标簽中添加 onerror 屬性來指定加載失敗時的處理方法。

1. 内聯腳本：

async 和 defer 屬性不能應用于内聯（inline）腳本，即在 HTML 檔案中直接寫入的腳本代碼（不是通過 src 屬性引用的外部腳本檔案）。async 和 defer 屬性隻能用于外部腳本檔案的加載。

使用 async 和 defer 屬性時需要考慮腳本之間的順序依賴、DOM 解析準備完成事件和加載失敗處理。根據具體需求選擇合适的屬性，并注意避免在内聯腳本中使用這些屬性。