在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> 標籤在不同的使用場景下更加靈活和易於設定。