クリティカルレンダリングパスの深淵：ブラウザは「なぜ」あなたのコードで立ち止まるのか
ブラウザがHTMLを読み込み、最初の1ピクセルを画面に描画するまでの数ミリ秒。この「クリティカルレンダリングパス（CRP）」こそが、WebアプリのUXを決定づける最前線です。多くのエンジニアは「とにかくJSを非同期にすればいい」と教わりますが、なぜそれが機能するのか、あるいはなぜ時に裏目に出るのか。その深層心理を、ブラウザエンジンの挙動と共に紐解いていきましょう。
1. パーサーの沈黙：DOM構築を阻む「ブロッキング」の正体
ブラウザのパーサーは、HTMLを上から順に一行ずつトークン化し、DOMツリーを構築します。しかし、途中に`
CSSファイルが重いと、ブラウザは「JSがDOMを操作した時にスタイルが崩れるのを防ぐ」という防衛本能から、CSSのダウンロードが終わるまで後続のJSの実行を待ちます。JSがCSSに依存していない場合でも、です。
最適化戦略：
クリティカルなパスには、ページ上部の描画に不可欠なスタイルだけを`