>[danger]Js中async和defer的區別 在HTML文檔中，`<script>`標簽用于引入JavaScript腳本。默認情況下，瀏覽器在解析HTML時遇到`<script>`標簽會執行以下操作： 1. **阻塞HTML解析**：瀏覽器會暫停解析HTML文檔，直到腳本下載并執行完成。這是因為早期的JavaScript腳本可能會修改DOM。 2. **下載腳本**：瀏覽器發起網絡請求下載腳本文件。 3. **執行腳本**：下載完成后，瀏覽器執行腳本。如果腳本是外部的（即`src`屬性指定了一個URL），則執行前會先解析并構建該腳本的DOM。 4. **繼續HTML解析**：腳本執行完成后，瀏覽器繼續解析HTML文檔。 然而，這種阻塞行為可以通過`<script>`標簽的屬性來改變： - **`async`屬性**：當`<script>`標簽包含`async`屬性時，腳本會異步下載，不會阻塞HTML解析。下載完成后，腳本會立即執行，但仍然可能阻塞后續的腳本執行。 - **`defer`屬性**：當`<script>`標簽包含`defer`屬性時，腳本會異步下載，不會阻塞HTML解析。與`async`不同，`defer`腳本會等到文檔解析完成后，按照它們在文檔中出現的順序執行。 以下是`<script>`標簽不同屬性對加載和執行行為的影響的表格： | 屬性 | 下載 | HTML解析 | 執行時機 | 執行順序 | |------|------|----------|----------|----------| | 無 | 同步 | 阻塞 | 下載后 | 未知 | | async | 異步 | 不阻塞 | 下載后 | 未知 | | defer | 異步 | 不阻塞 | 解析后 | 文檔順序 | **示例**： ```html <!-- 阻塞加載，執行時機未知，可能在解析DOM時阻塞 --> <script src="script1.js"></script> <!-- 異步加載，不阻塞HTML解析，執行時機在下載完成后，可能在文檔解析之前或之后 --> <script async src="script2.js"></script> <!-- 異步加載，不阻塞HTML解析，執行時機在文檔解析完成后，按照在文檔中出現的順序 --> <script defer src="script3.js"></script> ``` **最佳實踐**： - 如果腳本不依賴于DOM，可以使用`async`屬性來避免阻塞。 - 如果腳本之間有依賴關系，或者需要在DOM完全解析后執行，使用`defer`屬性。 - 對于內聯腳本（即直接在`<script>`標簽中編寫JavaScript代碼），通常不需要`async`或`defer`屬性，除非腳本非常短，且不依賴于頁面其他部分的執行。 通過合理使用這些屬性，可以提高頁面的加載性能和響應速度。