defer属性(ディファ―アトリビュート)とは | 意味や読み方など丁寧でわかりやすい用語解説
defer属性(ディファ―アトリビュート)の意味や読み方など、初心者にもわかりやすいように丁寧に解説しています。
読み方
日本語表記
デファード属性 (デファードアトリビュート)
英語表記
defer attribute (ディファ―・アトリビュート)
用語解説
HTMLの<script>タグに指定するdefer属性は、ウェブページの表示性能とユーザー体験を向上させるために重要な役割を果たす。この属性の主な目的は、JavaScriptファイルのダウンロードと実行のタイミングを制御することにある。ウェブブラウザがHTMLファイルを解析し、ページを画面に描画する際、通常、<script>タグに遭遇すると、そのJavaScriptファイルのダウンロードと実行が完了するまでHTMLの解析を一時停止する。この一時停止は、特に大きなJavaScriptファイルの場合、ページの表示が遅れる原因となり、ユーザーにとってはコンテンツが表示されるまでの待機時間が長く感じられることがある。
defer属性を使用すると、このようなブロッキング動作を回避できる。具体的には、HTMLパーサーが<script defer>タグを見つけると、JavaScriptファイルのダウンロードをバックグラウンドで開始する。しかし、HTMLの解析は中断されず、並行して続行される。これにより、ユーザーはより早くページのコンテンツを目にすることができ、体感的な読み込み速度が向上する。そして、HTMLドキュメントの解析が完全に終了した後、ダウンロード済みのdeferスクリプトが実行される。この実行タイミングは、ブラウザがDOM（Document Object Model）ツリーの構築を完了し、DOMContentLoadedイベントが発火する直前である。このため、defer属性を持つスクリプトは、ページ上のすべてのHTML要素が利用可能になった状態で実行されることが保証される。
通常の<script>タグの動作では、HTMLパーサーが<script src="xxx.js"></script>のような外部スクリプトタグに到達すると、HTMLの解析を中断し、そのJavaScriptファイルがネットワークからダウンロードされるのを待つ。ダウンロードが完了すると、次にそのJavaScriptコードが実行される。JavaScriptの実行もまた、CPUリソースを使用するため、その間はページの描画がブロックされる。これらの工程がすべて完了して初めて、HTMLパーサーは残りのHTMLの解析を再開する。この逐次的な処理が、特にページの先頭付近に配置されたスクリプトによって、ページの初回描画（First Contentful Paintなど）が遅れる大きな要因となる。
一方、defer属性が指定されたスクリプトの場合、HTMLパーサーはスクリプトのダウンロード要求を発行するが、そのダウンロード完了を待たずにHTMLの解析を続行する。つまり、JavaScriptファイルのダウンロードとHTMLの解析処理が同時に進行するのだ。これは非同期ダウンロードと呼ばれ、ページの表示を妨げないため、ユーザーは空白の画面ではなく、徐々にコンテンツが表示されていく状態を体験できる。ダウンロードが完了しても、deferスクリプトは直ちには実行されない。その実行は、HTMLドキュメント全体の解析が完了し、すべてのDOM要素が構築された後に、HTMLファイル内での記述順序に従って行われる。この「記述順序の保証」はdefer属性の重要な特徴の一つであり、複数のスクリプトが互いに依存し合っている場合でも、予期せぬエラーが発生することなく、正しい順序で実行されることを意味する。
defer属性は、DOMの構築が完了した後にスクリプトを実行するため、JavaScriptコード内でdocument.getElementById()などのDOM操作を行う際に、対象の要素がまだ存在しないという問題を避けることができる。これは、スクリプトを<body>タグの閉じタグ直前に配置する従来のベストプラクティスと同様の効果をもたらすが、defer属性を使用すれば、<head>セクションにスクリプトを配置しても、同様のメリットを享受できる。
ここで、defer属性とよく比較されるasync属性について簡単に触れる。async属性もJavaScriptファイルのダウンロードを非同期で行う点ではdefer属性と共通している。しかし、asyncスクリプトはダウンロードが完了次第、HTML解析を一時的にブロックして直ちに実行される点がdefer属性と異なる。そのため、複数のasyncスクリプトがある場合、ダウンロードが完了した順に実行されるため、HTMLファイル内での記述順序は保証されない。どちらを使用するかは、スクリプトの性質による。ページの表示に必須ではないが、DOMに依存し、実行順序が重要なスクリプトにはdefer属性が適している。一方、ページの他の要素から完全に独立しており、できるだけ早く実行されてほしいスクリプトにはasync属性が適していると言える。
defer属性は、ウェブページのパフォーマンス最適化において非常に有効なツールである。特に、ウェブページの主要なコンテンツの表示には直接影響しない、分析ツール用のスクリプト、広告スクリプト、ソーシャルメディアボタン用のスクリプト、または複雑なUIコンポーネントの初期化スクリプトなどに対して利用されることが多い。これらのスクリプトはページの描画を遅延させることなく、裏で準備され、ページの読み込み完了後に実行されることで、ユーザーにスムーズな閲覧体験を提供する。
defer属性は外部スクリプトファイルにのみ有効である。つまり、<script>タグ内に直接JavaScriptコードを記述するインラインスクリプトには効果がない。また、現代の主要なブラウザでは広くサポートされているが、非常に古いブラウザ環境では期待通りに動作しない可能性も考慮する必要がある。しかし、システムエンジニアとして現代のウェブ開発に携わる上では、defer属性を適切に利用することは、ユーザー体験を向上させ、検索エンジンのランキングにも間接的に良い影響を与える（ページの表示速度が改善されるため）重要なスキルとなる。このように、defer属性はウェブアプリケーションのパフォーマンスと可用性を高めるための強力な手段として理解しておくべきだ。