非同期レンダリング (async属性)

レンダリングの仕組み

ブラウザ(Google ChromeやSafari)はhtmlファイルを上から順番に解析します。
htmlにCSSファイルやJavaScriptファイル、写真等のURLがあった場合、その都度サーバからファイルをダウンロードします。

非同期、非同期処理とは

あるタスクが実行をしている時に、他のタスクが別の処理を実行できる方式。

分かりにくいので下記は例です。

例)写真の表示(非同期読み込み)の場合

1. 写真のダウンロードを開始する(ダウンロードに1分かかる)。
2. 写真のダウンロードは時間がかかるため、ダウンロード完了を待たずに次の処理に進む。
3. 写真のダウンロードが完了したタイミングで写真表示の処理を行う。

イメージ(同期)

webサイトの表示に必要なリソース(CSS、JavaScript、写真)をダウンロード完了後、次の処理にいく。
ブラウザは、JavaScriptファイルのダウンロードが完了しないと次に進めないので、JavaScriptファイルの読み込みがレンダリングをブロックしている。

async="true"をつけた場合（非同期）

②'のJavaScriptファイルは②のCSSファイルのダウンロードとほぼ同時にダウンロードを開始する。ブラウザはJavaScriptファイルのダウンロード完了を待たずに次の処理にいく。
JavaScriptファイルのダウンロード完了を待たずにブラウザは次の処理に進めるので、JavaScriptファイルの読み込みはレンダリングをブロックしない。