HTML-Script 屬性

src屬性

src 屬性指定外部腳本的 URL，允許開發者將 JavaScript 程式碼組織在單獨檔案中，而非直接寫在 HTML 內。當<script>標籤包含src屬性時，不應包含嵌入式腳本程式碼。

type屬性

type 屬性聲明腳本的 MIME 類型 (現已非必需，因為現代瀏覽器預設使用JavaScript)。早期 HTML 規範中，這個屬性用來指示腳本語言的類型，如”text/javascript“ 或 “application/javascript“。

async屬性

async 屬性是個布林屬性，告訴瀏覽器非同步的載入檔案。這意味著腳本會在下載完畢後儘快執行，但不會阻塞 HTML 文件的解析。此屬性僅適用於帶有src屬性的<script>標籤。

1	<script src="xxx/script.js" async></script>

defer屬性

與async屬性類似，defer屬性也會指示瀏覽器非同步載入腳本，但有個關鍵不同：帶有 defer 屬性的腳本保證會在文件解析完成後、DOMContentLoaded事件觸發前，按照它們在檔案中出現的順序執行。這也僅適用於帶有src屬性的腳本。

1	<script src="xxx/script.js" defer></script>

時序圖
(圖片來源：Speed up Google Maps(and everything else) with async & defer)

crossorigin屬性

crossorigin 屬性用於設定與跨源資源共享 (CORS) 相關設定。對於從CDN等不同來源載入的腳本特別重要。它可設為”anonymous“(不會發送用戶憑證) 或 “use-credentials“ (會發送使用者憑證)。

1	<script src="https://cdn.example.com/library.js" crossorigin="anonymous"></script>

integrity屬性

integrity 屬性提供了一種安全特性，允許瀏覽器驗證取得的資源是否未經篡改。透過與腳本匹配的Hash值 (如SHA-256) 來確保腳本的完整性。
當瀏覽器載入帶有 integrity 屬性的資源時，它會計算從網絡上取得的文件的Hash值，並與integrity屬性中指定的Hash值進行比對：
如果兩個Hash值相同，則認為這個檔案是安全的，未被篡改，瀏覽器將正常載入和執行該檔案。
如果Hash值不同，則表示檔案可能在傳輸過程中被篡改，瀏覽器會拒絕載入該文件，以保護 Client 免受潛在的安全風險。