やあ。今日も元気にコード書いてるかい？

フロントエンド開発をやっていると、一度は「なぜか画面の表示が妙に遅い」「JavaScriptのせいでレンダリングがブロックされている気がする」という壁にぶ当たるよな。特に、ユーザーが最初に目にするファーストビューの表示速度（Core Web VitalsのLCPなど）をシビアにチューニングしなきゃいけない現場では、ブラウザの「中身」を理解しているかどうかが、プロとアマの分かれ道になる。

今回は、Webブラウザの心臓部の一つである「パーサーブロッキング（Parser Blocking）」、そしてそれを華麗にいなすための`defer`と`async`属性の正しい使い分けについて、ブラウザの裏側の動きを覗き見ながら徹底的に解説しようか。

中級からワンランク上のシニアへステップアップしたい君なら、知っておいて損はないどころか、明日からのコードの書き方がガラリと変わるはずだ。さあ、いってみよう。

—

1. ブラウザはなぜ `` で足を止めるのか？

まず、ブラウザがHTMLをどうやって画面上のピクセルに変換しているか、その大まかな流れを思い出してくれ。

1. HTMLパース: サーバーから送られてきたバイト列を文字コードに変換し、トークン化してDOMツリーを構築する。 2. CSSOM構築: CSSを見つけたら、同様にパースしてスタイル情報をまとめたCSSOMツリーを構築する。 3. レンダリングツリー構築: DOMとCSSOMを合体させて、画面に何を表示するかを決めるツリーを作る。 4. レイアウトとペイント: 各要素の位置を計算し（レイアウト）、実際に画面を描画する（ペイント）。

ここで問題になるのが、HTMLをパースしている最中にインライン、あるいは外部読み込みの `

パターンB: 動的インポートやサードパーティ用 `async`

もし、ボタンを押された時や、特定の条件を満たした時に動的にスクリプトを読み込みたい場合や、完全に独立した外部ツールを組み込む場合は、JavaScript側から動的に要素を生成して挿入することもある。

/

• 完全に独立したサードパーティ製スクリプト（例：ウィジェットやアナリティクス）を
• パフォーマンスを落とさずに非同期で読み込む関数
• @param {string} src - 読み込むスクリプトのURL
• @returns {Promise}

/
function loadThirdPartyScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true; // DOMや他のスクリプトに依存しないため async を指定

script.onload = () => {
console.log(`[Success] スクリプトの読み込みと実行が完了しました: ${src}`);
resolve();
};

script.onerror = () => {
console.error(`[Error] スクリプトの読み込みに失敗しました: ${src}`);
reject(new Error(`Failed to load script: ${src}`));
};

// documentの末尾に追加して非同期ダウンロードを開始
document.head.appendChild(script);
});
}

// 実行例
loadThirdPartyScript('https://example.com/analytics-widget.js')
.catch((error) => {
console.warn('アナリティクスの読み込みエラーをキャッチしましたが、アプリの動作には影響しません。', error);
});

---

5. シニアからの実践的なアドバイス（まとめ）

最後に、現場で後輩によく言う注意点をいくつかまとめておく。

1. `` の一番下に `