script

スクリプト要素

ローディングに関する属性

• async

  • 非同期実行
  • 実行されるタイミングは不定（ダウンロード完了後に非同期で実行）
  • DOM操作可否は不明
• defer

  • 同期実行(HTML解析をブロッキングしない)
  • 実行されるタイミングはページ解析の直後（DOMContentLoaded発火の直前）
  • DOM操作可能
• deferもasyncもない

  • 同期実行（HTML解析をブロックする）
  • HTML上に現れたタイミングで実行される
  • DOM操作、自分より前の要素なら可能（DOMContentLoadedイベントハンドラ内で行う必要がある）

type="module"のスクリプトは自動的にdeferとなる。インラインのスクリプトにはasyncやdefer属性は無効。

SRI(サブリソース完全性)

外部リソースの改ざんチェックを行う仕組み

<script defer 
  src="https://unpkg.com/vue@3.4.19/dist/vue.esm-browser.prod.js" 
  integrity="sha384-pKZY5xMGy7vCIxo75F6uZ9BgHef4lye4JZtpkjh6GjDsUdFL3rXMpM3+FhpFI1cs">
</script>

ブラウザはスクリプトをダウンロードしハッシュ値を計算してintegrityの値と一致しない場合、実行を抑止する