在HTML中， <script> 標簽用於嵌入或引用JavaScript代碼。 在 <script> 標簽中，有兩個屬性可以用來控制腳本的載入和執行方式： async 和 defer 。 當然這也是常見的一道面試題， async 和 defer 的作用和區別。 async 和 defer 屬性都可以 ...
在HTML中， <script> 標簽用於嵌入或引用JavaScript代碼。
在 <script> 標簽中，有兩個屬性可以用來控制腳本的載入和執行方式： async 和 defer 。
當然這也是常見的一道面試題， async 和 defer 的作用和區別。
async 和 defer 屬性都可以用於非同步載入腳本，從而避免了在載入腳本時阻塞瀏覽器渲染頁面的問題。但是它們的具體行為略有不同。
當使用 async 屬性時，瀏覽器會非同步地載入腳本，併在下載完成後立即執行腳本，而不會等待頁面的其他內容載入完成。如果頁面中有多個非同步載入的腳本，它們的執行順序是不確定的，取決於它們完成下載的時間。 async 屬性適用於不依賴於其他腳本或文檔解析順序的獨立腳本。
當使用 defer 屬性時，瀏覽器會非同步地載入腳本，但是會在文檔解析完畢後，按照它們在頁面中出現的順序執行它們。因此，如果頁面中有多個 defer 腳本，它們會按照它們在頁面中的順序依次執行。這對於依賴於文檔結構或其他腳本的腳本非常有用，因為它們需要在文檔解析完成後才能正確執行。
以下是一個簡單的例子，展示了 async 和 defer 屬性的不同行為：
<!DOCTYPE html> <html> <head> <title>Script</title> </head> <body> <h1>Hello, script!</h1> <script src="script1.js" async></script> <script src="script2.js" defer></script> </body> </html>
在這個例子中，我們在頁面中引入了兩個腳本： script1.js 和 script2.js 。其中， script1.js 使用了 async 屬性，而 script2.js 使用了 defer 屬性。
當瀏覽器解析這個頁面時，它會非同步地載入 script1.js ，但會繼續解析頁面並渲染內容。一旦 script1.js 下載完成，它會立即執行。在此期間，瀏覽器可能仍在解析和渲染頁面。
對於 script2.js ，瀏覽器也會非同步載入它，但是會等待頁面解析完畢後才執行。因此， script2.js 的執行會在頁面解析完畢後，按照它在頁面中的出現順序執行。
總結一下：
- 不帶 async 或 defer 的腳本會立即載入並阻塞HTML解析。
- 帶有 async 屬性的腳本會非同步載入併在載入完成後立即執行，可能在HTML解析完成之前或之後。
- 帶有 defer 屬性的腳本會延遲執行，直到HTML文檔解析完成。
- 如果在一個 <script> 標簽中同時使用了 async 和 defer 屬性， async 屬性會被忽略。
除了 async 和 defer 屬性外， <script> 標簽還有一些其他屬性和特性：
1. src 屬性：用於指定外部腳本文件的URL。如果設置了 src 屬性， <script> 標簽內部的JavaScript代碼將被忽略。
<script src="script.js"></script>
2. type 屬性：用於指定腳本的MIME類型。對於JavaScript，推薦使用 text/javascript 。但是，大多數瀏覽器預設將 <script> 標簽識別為JavaScript，因此通常不需要顯式設置 type 屬性。
<script type="text/javascript" src="script.js"></script>
3. charset 屬性：用於指定腳本文件的字元編碼。這個屬性已經不太常用，因為現在大多數瀏覽器和伺服器預設使用UTF-8編碼。
<script charset="UTF-8" src="script.js"></script>
4. crossorigin 屬性：用於配置跨域資源共用（CORS）設置。當載入的腳本文件位於不同的功能變數名稱下時，可以使用 crossorigin 屬性來控制瀏覽器的跨域策略。
<script crossorigin="anonymous" src="https://script.com/script.js"></script>
5. integrity 屬性：用於確保腳本文件的完整性。通過提供腳本文件的哈希值（例如，SHA-256、SHA-384或SHA-512），瀏覽器可以在載入文件時驗證其完整性。
<script src="script.js" integrity="sha384-xxxxxxx"></script>
6. nomodule 屬性：用於指定腳本不應在支持ES6模塊的瀏覽器上執行。這可以用於向不支持ES6模塊的舊瀏覽器提供回退腳本。
<script nomodule src="script.js"></script>
這些屬性和特性使得 <script> 標簽在不同的使用場景下更加靈活和易於配置。
