フロントエンドの開発現場で、若手エンジニアから「なんかこのコード、たまに要素が取得できなくてエラーになるんです」「画面の初期化処理をどこで書くのが正解なんですか？」という質問を受けることはないだろうか。
JavaScriptの実行タイミングと画面のレンダリングのライフサイクル、そして`DOMContentLoaded`や`load`といったイベントの機序は、Webフロントエンドの基礎中の基礎でありながら、意外と「なんとなく」で実装してしまいがちな領域だ。
今回は、ブラウザが裏側でHTMLをどうパースし、どのタイミングで我々の書いたスクリプトを執行し、そしていつイベントを発火させているのか。そのアーキテクチャの深層を、現場のリアルな知見を交えて徹底的に紐解いていこう。
—
1. ブラウザの心臓部：HTMLパースからツリー構築までの裏舞台
まず、ネットワークの海を越えてサーバーからHTMLのバイトストリームが手元に届いた瞬間から、ブラウザのレンダリングエンジン（WebKitやBlinkなど）の地味で激しい戦いが始まる。
ブラウザは届いた生データを、次のようなステップで料理していく。
1. バイトから文字への変換 (Bytes to Characters): 取得した生データを指定されたエンコーディング（UTF-8など）で文字列に変換する。
2. トークン化 (Tokenizing): 文字列をW3CのHTML5仕様に沿った最小単位の「トークン（開始タグ、終了タグ、属性など）」に分解する。
3. ノード生成 (Node Generation): トークンをそれぞれの特性を持った「ノードオブジェクト」に変換する。
4. DOMツリー構築 (DOM Tree Construction): 親子関係を解決し、最終的なDocument Object Model（DOM）ツリーを作り上げる。
この過程で絶対に忘れてはならないのが、HTMLパースは「同期的なストリーム処理」であるという点だ。ブラウザは上から下へテキストを読み進めながらDOMを構築していく。
同期スクリプトという「絶対的ボトルネック」
ここで厄介なのが、HTMLの途中にインライン、あるいは`
コメント