中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
はじめに asyncとdefer どちらが得かを知る前に
Webページを作るとき外部のJavaScriptファイルをどう読み込むかがとても重要なポイントになります
その中でもasyncとdeferは代表的な選択肢であり使い方を間違えるとページの表示が遅くなったり逆に動作が不安定になったりします
この記事では中学生でもわかるように丁寧に違いを解説し具体的な使い分けのコツを紹介します
まず結論から言うとasyncは読み込みと同時に実行を進めたいとき deferはHTMLの解析が終わってから実行したいときに適しています
それぞれの挙動を例とともに見ていきましょう
asyncとdeferの基本的な仕組みを詳しく知る
ここでは実際の仕組みを図解せずとも理解できる言葉で説明します
外部スクリプトを読み込むときHTMLパーサーはスクリプトの実行を待つか待たないかを決めます
asyncを指定するとスクリプトはダウンロード中もページの解析をブロックしない状態で待機しダウンロードが終わるとすぐに実行しますその間にHTMLの解析は進みません
つまりページのレンダリングは一時止まる可能性があり実行順序はダウンロード完成のタイミング次第になります
一方deferを指定するとスクリプトはダウンロード中もHTMLの解析を続けられダウンロードが終わった後に全てのdeferスクリプトをHTMLの元の順番通りに実行します
この性質が複数のスクリプトを扱うときの安定性を生み出します
| 特性 | async | defer |
|---|---|---|
| 読み込みタイミング | ダウンロードと同時に実行 | 解析完了後に実行 |
| 実行順序 | 順序保証なし | HTMLの順序通りに実行 |
| 対象の要素 | srcがある場合のみ | srcがある場合のみ |
| 使い分けの目安 | 独立した機能向き | 依存関係がある場合に向く |
実務での使い分けと注意点
実際のWebサイトでは読み込みの最適化を進めるためにasyncとdeferを組み合わせて使う場面が多くなります
前提として外部スクリプトは可能な限り遅延のない表示を優先するべきです
ただしスクリプト間の依存関係がある場合やDOMContentLoadedの後に初期化処理を走らせたい場合はdeferを選ぶのが安全です
逆に広告や解析ツールのようにページの表示と同時に走らせたい場合にはasyncが適しています
重要なのはスクリプトの依存関係を把握することと可能なら実行をトリガーするイベントのタイミングを確認することです
また本番環境での挙動検証は必須であり異なるブラウザやネットワーク環境でのテストを行うことが安定性につながります
- 重要度が高い処理はdeferで後ろに回す
- 依存関係がある場合は順序を守る
- 外部資源が多い場合は適切な並列性を活かす
これらのポイントを実務で押さえておくとページの表示速度と動作の安定性を両立させやすくなります
ある日の放課後のこと 私と友人はパソコンの前で asyncとdeferの話題をしていました 友人はどちらを選べばよいのか迷っていて 私はゆっくり息を整えながら説明を始めました まずasyncは外部のスクリプトを読み込みながらもすぐに実行を始める性質があり そのためページの表示が少し止まることがあります これを避けたいときにはdeferを選ぶのが安全です しかし複数のスクリプトが順番通りに動く必要がある場合は defer が有利で 依存関係が薄い処理や、表示と同時に走らせたい機能には async が適しています さらに実務では DOM ContentLoaded などのイベントで実行タイミングを制御する癖をつけると 後で見返したときに全体像が掴みやすくなります こうした考え方を共有し合うと 二人のWebサイト作りはずっと安定して速く動くようになりました
ITの人気記事
