ブラウザは「せっかち」である。DOMContentLoadedとloadの深淵な関係
やあ。現場でコードを書いていて、「なぜこのスクリプトは動かないんだ？」「なぜこのタイミングで実行されるんだ？」とブラウザの挙動に頭を抱えたことはないかな？
フロントエンドエンジニアにとって、ブラウザは単なる表示器じゃない。DOMという「世界」を構築する建築現場だ。今回は、多くのエンジニアがなんとなく理解したつもりで通り過ぎる、DOMContentLoadedとloadという二つの重要なイベントの境界線、そしてブラウザが裏側で何と戦っているのかを紐解いていこう。
—
1. ブラウザという「建築現場」のリアルな裏側
まず、ブラウザがHTMLを受け取った瞬間から何が起きているか想像してみてほしい。
ブラウザのメインスレッドは、HTMLという「設計図」を上から下へ、猛烈な勢いで読み取っていく。この過程でHTML ParserがDOMツリーを組み立て、同時に``タグを見つければCSSOMツリーを構築する。
ここで最も重要なのは、「スクリプトがどこにあるか」だ。
- HTMLパース中（`
コメント