async属性(アシンクアトリビュート)とは | 意味や読み方など丁寧でわかりやすい用語解説

「async属性」は、ウェブページにおけるJavaScriptファイルの読み込みと実行方法を制御するために、HTMLの<script>タグに指定する属性である。この属性を利用することで、JavaScriptのダウンロードと実行が、ページのHTML解析やレンダリングと並行して進むようになる。これは「非同期処理」と呼ばれる動作であり、スクリプトがページの表示を妨げることなく処理されるため、ユーザーが体感するページの読み込み速度を向上させる効果がある。特に、ウェブページの初期表示パフォーマンスの改善に貢献する重要な機能だ。

ウェブページがブラウザで表示される際、HTMLファイルは通常、上から順に解析されていく。この解析の途中で<script src="ファイル名.js"></script>のようなJavaScriptを読み込むタグに遭遇すると、ブラウザは一時的にHTMLの解析を中断する。そして、指定されたJavaScriptファイルをネットワークからダウンロードし、その内容を解析・実行し終えるまで待機する。この間、ブラウザはページの残りの部分の解析や表示を進めることができないため、ユーザーから見るとページの表示が止まったように感じる。この状態を「同期処理」と呼び、スクリプトがページのレンダリングを「ブロック」していると表現される。スクリプトのファイルサイズが大きい場合や、ネットワークの状況が悪くダウンロードに時間がかかる場合、このブロッキングによってページの初期表示が大きく遅れる原因となる。

しかし、<script async src="ファイル名.js"></script>のようにasync属性を<script>タグに追加すると、ブラウザの動作は大きく変わる。async属性が指定されたスクリプトは、HTMLの解析を停止することなく、バックグラウンドでダウンロードが開始される。つまり、HTMLの解析とスクリプトのダウンロードが同時に進行するのだ。そして、スクリプトのダウンロードが完了した時点で、ブラウザは一時的にHTMLの解析を中断し、ダウンロードされたスクリプトの解析と実行を行う。このスクリプトの実行が完了すると、再び中断していたHTMLの解析を再開し、ページの残りの部分のレンダリングを進める。このように、スクリプトのダウンロードにかかる時間がページの表示をブロックせず、実行中の一時的な中断も同期処理に比べて全体の表示遅延を大幅に軽減できるため、ページの体感速度が向上する。

async属性の最大の利点は、ページの初期表示速度を改善し、ユーザーエクスペリエンスを高めることにある。例えば、Googleアナリティクスのようなウェブサイトのアクセス状況を分析するツールや、広告を表示するスクリプト、ソーシャルメディアのウィジェットなど、ページのメインコンテンツの表示に直接関わらず、かつ読み込みに時間がかかる可能性のある外部スクリプトに特に有効である。これらのスクリプトをasyncで読み込むことで、ページの主要なコンテンツが速やかに表示され、ユーザーはすぐに情報を得たり操作を開始したりできるようになる。

しかし、async属性を使用する際にはいくつかの重要な注意点がある。一つは、複数のasync属性付きスクリプトが存在する場合、それらのスクリプトが実行される順序は保証されないという点だ。asyncスクリプトはダウンロードが完了した順に実行されるため、HTMLファイルに記述された順序とは異なる順序で実行される可能性がある。この特性は、あるスクリプトが別のスクリプトによって定義された変数や関数に依存している場合に問題を引き起こすことがある。例えば、スクリプトAが何らかの共通機能を提供し、スクリプトBがその機能を利用する場合、スクリプトBがスクリプトAよりも先に実行されてしまうと、必要な機能が見つからずにエラーが発生する可能性がある。そのため、スクリプト間に厳密な依存関係がある場合には、async属性の利用は慎重に検討する必要がある。

もう一つは、asyncスクリプトはウェブページのDOM（Document Object Model、HTML文書の構造をプログラムから操作できるように表現したもの）が完全に構築される前に実行される可能性があることだ。もしスクリプトが、ページ内の特定のHTML要素にアクセスして操作を行う内容である場合、その要素がまだブラウザによって解析・構築されていない状態でスクリプトが実行されてしまうと、要素が見つからずにエラーになったり、期待通りの動作をしなかったりする。したがって、DOMの構造に強く依存する操作を行うスクリプトには、async属性は適さないことが多い。

async属性とよく比較されるものに「defer属性」がある。defer属性もasyncと同様に、スクリプトのダウンロードをHTML解析と並行して行うことで、ページのレンダリングをブロックしないという利点を持つ。しかし、asyncがダウンロード完了後すぐに実行されるのに対し、defer属性が指定されたスクリプトは、HTMLの解析がすべて完了した後、かつDOMContentLoadedイベント（DOMツリーの構築が完了した時点で発生するイベント）が発火する直前に実行されるという違いがある。さらに、複数のdeferスクリプトはHTMLに記述された順序で実行されることが保証されるため、依存関係のあるスクリプトを非同期で読み込みたい場合にはdefer属性の方が適している場合が多い。asyncは「可能な限り早く」実行することに重点を置き、deferは「HTML解析のブロックを避けつつ、決められた順序で」実行することを目的としていると理解すると良い。

結論として、async属性はウェブページのパフォーマンスを向上させるための強力な手段だが、その非同期的な実行特性によって生じる順序の非保証やDOM構築状況への影響を十分に理解することが重要だ。スクリプトの機能（依存関係の有無やDOM操作の有無）を考慮し、async、defer、または通常の同期読み込みのいずれかを適切に選択することで、ユーザーにとってより快適なウェブ体験を提供することができるようになる。