https://idea-hack.com/courses/lets-understand-the-tips-to-write-javascript-efficiently-such-as-organizing-the-timing-of-reading-javascript-dividing-files-and-generalizing-processing/lessons/lets-understand-how-to-add-async-defer-attribute-to-javascript-file-to-speed-up-page-loading/
https://idea-hack.com/courses/lets-understand-the-tips-to-write-javascript-efficiently-such-as-organizing-the-timing-of-reading-javascript-dividing-files-and-generalizing-processing/lessons/lets-understand-how-to-add-async-defer-attribute-to-javascript-file-to-speed-up-page-loading/

JavaScriptファイルにasync/defer属性を付与してページの読み込みの高速化を図る方法を理解しよう

JavaScriptのasync/defer属性を使ってページの読み込みの高速化を図る

JavaScriptの読み込み順を理解する

JavaScriptのasync/defer属性を使ってページの読み込みの高速化を図ることができます。

WEBページを表示する際、ブラウザーはHTMLコードの上部のコードから順番に解析します。

そのため、headタグ内にscrptタグが存在する場合、そこに辿りついた時点で解析が一時停止されてしまい、JavaScriptファイルのダウンロードと実行が同期的に行われます。

scriptタグにdefer属性や設定することで、JavaScriptファイルのダウンロードを非同期にすることが可能です。こうすることで、HTMLの解析が停止しなくなります。

async/deferの違い

構文意味
<script src=”【パス】” async></script>JavaScriptgファイルを非同期で読み込む様にして、即座に実行
<script src=”【パス】” defer></script>JavaScriptgファイルを非同期で読み込む様にして、HTMLの解析後に実行
async / deferの仕様

asyncとdeferの違いは、JavaScriptの実行タイミングにあります。

asyncの場合

asyncの場合はダウンロードが完了次第ただちに実行されます。ただし、非同期で読み込まれるため、HTMLの解析を妨げることがなくなります。

結果、サイトの表示速度が上がります。

ただし、JavaScriptファイルの読み込み順が保証されないため、不具合を起こすことがあります。

例えば、jQueryが読み込まれているファイルがjQueryより先に読み込まれた場合はどうでしょうか?

まず間違いなくエラーが出ます。

そのため、依存関係にあるファイルを展開している場合、この方法はオススメしません。

deferの場合

deferの場合はHTMLの完了後まで処理が保留されます。つまりに、<html></html>までが読み込まれて、ページの表示が開始されるまでJavaScriptは読み込まれません。(ただしインラインスクリプトは除く

その上で、ページの上から JavaScriptのファイルを同期的に読み込みます。

この方法はJavaScriptの読み込みは遅延させつつ、読み込み順序は保証されますので依存関係にあるファイルを展開している場合でも不具合を起こすことがありません。

注意

ただし、インラインスクリプトはdeferもasyncも受け付けません。常に同期的に読み込まれます。ここを知らずに苦労する人が多いです。

そのため、例えば、jQueryに依存しているインラインスクリプトがある状態でjQueryにasyncはもちろん、deferを付けてしまうとインラインスクリプトがjQueryより先に読み込まれることになり、エラーになります。

deferを用いた時の<script>タグの読み込み順は以下の様に捉えておくと良いでしょう。

  1. deferがついていない<script src=””>タグおよびインラインスクリプトが読み込まれる
  2. deferがついている<script src=””>タグおよびインラインスクリプトが読み込まれる
コラム

HTMLのDOM取得をしたいならdefer

deferはHTMLの解析後に実行されるため、document.getElementById()の様なDOM上の各要素を参照する構文の利用が可能です。asyncは無理です。

インストラクター