script 読み込み方式シミュレーター（async と defer）
script タグの async・defer が HTML パースと実行に与える影響をタイムラインで可視化します
スクリプト読み込みによる表示速度の問題を理解するための、視覚的な学習ツールです。スライダーで各処理の長さを変えながら、HTML のパース、スクリプトのダウンロードと実行がどのタイミングでブロッキングを起こすのかをタイムラインで一目で確認できます。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- スライダーをドラッグして、HTML のパース時間、スクリプトのダウンロード時間、実行時間を設定します。
- 通常のスクリプトを置く位置（head の中か body の末尾か）による違いを確認します。
- 3つの方式（Standard、Async、Defer）ごとに変化するパース遅延のグラフをその場で見比べます。
よくある質問
- async と defer の根本的な違いは何ですか？
- どちらもダウンロードは HTML のパースと並行して行われますが、async はダウンロードが終わった時点でパースを止めて実行を始めるのに対し、defer は HTML のパースが完了するまで実行を先送りします。
- 複数のスクリプトを順番どおりに実行したい場合はどちらを使いますか？
- async はダウンロードが終わった順に実行されるため、依存関係がある場合は危険です。defer は HTML に書かれたタグの順序どおりの実行が保証されるので、ライブラリを組み合わせて使う場合に適しています。
- type='module'で読み込んだスクリプトは、async/defer設定とどう違うのですか?
- ブラウザはtype='module'のスクリプトを、デフォルトでdefer属性と同じように扱います(パースをブロックせず、実行は文書のパース完了後)。さらにasync属性を付け加えると、モジュールスクリプトもダウンロードが完了し次第すぐに実行されるよう動作が変わります。