【入門編】 async/defer属性によるスクリプト実行とレンダリング – Webブラウザの仕組み実践ガイド

メリット: 読み込みが爆速になります。
注意点: 「取れたらすぐ実行」なので、順序が保証されません。例えば「メインのJS」より先に「広告のJS」が終わったら、広告が先に動いてしまいます。
適した場面: 広告タグや分析ツールなど、他のJSと関係のない独立したスクリプト。

こんにちは。Webブラウザという「魔法のような箱」の裏側へようこそ。

HTMLやCSSを書いていると、ふと「なぜか画面が真っ白な時間が長いな」「スクリプトが読み込まれるまでボタンが動かないな」なんて悩むことはありませんか？実はそれ、ブラウザが一生懸命「読み込み」と「表示」のバランスを取ろうと四苦八苦している証拠なんです。

今日は、そんなブラウザのレンダリング（描画）というドラマにおいて、主役級の重要さを持つ「`async`」と「`defer`」という二人の助っ人について、現場の知見を交えてお話ししますね。

—

まず、ブラウザがHTMLを読み込んで画面を表示する様子を、「キッチンで料理を作るシェフ」に例えてみましょう。

シェフは上から順にメニュー（HTMLタグ）を読んでいきます。