こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で渡り歩いてきたチーフアーキテクトの私です。
Webサイトを作っていて、「あれ、なんか画面が表示されるのが遅いな……」「JavaScriptを読み込ませたら、HTMLの読み込みが止まっちゃった？」なんて悩んだ経験はありませんか？
大丈夫ですよ、そこはすべてのWebエンジニアが一度は通る「お約束のつまずきポイント」です。
今日は、ブラウザの裏側で何が起きているのか、身近な例えを交えながら優しく紐解いていきましょう。
—
ブラウザは「超真面目な職人さん」です
まず、Webブラウザが画面を表示する仕組みをイメージしてみましょう。
ブラウザの中には、「HTMLパーサー」という名前の、それはそれは真面目な職人さんが住んでいます。
この職人さんの仕事は、届いたHTMLの設計図（コード）を上から順番に読んで、家（DOMツリーという画面の骨組み）をコツコツと建てていくことです。
[HTMLの設計図] ──> [職人さん（パーサー）] ──> [お家の骨組み（DOM）完成！]
上から下へ、1行ずつ、一文字も見落とさないように猛烈なスピードで読んでいきます。「よし、ここに柱を立てて、次に壁を……」と順調に作業が進んでいる、その時です。
設計図の中に、突然こんなものが現れました。
そう、`
- イメージ： 「この指示書、あとで時間がある時に読んでおいてね」と、店員さんのポケットにそっと突っ込んでおくイメージです。
- 挙動： 職人さんは足を止めず、最後まで一気に家を建てきります。家が完成したあとに、こっそりJavaScriptを実行してくれます。
- ここがおすすめ： DOMがすべて完成した安全な状態でスクリプトが動くので、実務では一番よく使われる、もっとも安全な方法です。
3. `async` 属性 （「届き次第、最優先で割って入るよ」）
- イメージ： 買い物中に、急ぎの宅急便が届いたので、その場でパッと荷物を開けて確認しちゃうイメージです。
- 挙動： HTMLを読んでいる途中であっても、JavaScriptのダウンロードが終わった瞬間、容赦なく職人さんの作業を中断させてスクリプトを実行します。
- 向いている用途： アクセス解析のタグ（Googleアナリティクスなど）や、他の要素に依存しない独立したスクリプトによく使われます。
---
実務でどう使い分ける？（サンプルコード付き）
さて、ここまで読んだあなたなら、もう迷うことはありません。
実際にコードを書くときは、どのように書けばいいか見てみましょう。
こんにちは、ブラウザの裏側へようこそ！
このテキストは、JavaScriptに邪魔されることなくスムーズに画面に表示されます。
---
最後に：ブラウザと仲良くなろう
Webブラウザは、私たちが書いたコードを画面という形にしてユーザーに届けてくれる、とても健気で優秀な相棒です。
「なぜ画面の表示が遅いんだろう？」と立ち止まったときは、ぜひ今日の話を思い出してください。
「あ、今ブラウザの職人さんが、途中でJSに足を引っ張られて困ってるんだな」と頭の中でイメージできるようになると、フロントエンドの景色がガラリと変わって見えてきますよ。
それでは、快適なWeb制作ライフを！あなたのコードが、今日もスムーズにブラウザに届きますように。
コメント