JavaScriptの読み込みを早くする方法

2018-12-24
プログラミング

JavaScriptの読み込みは、以下の形が一般的である。

<script src="foo.js"></script>
<script src="bar.js"></script>

この方法だと、 scriptタグがパースされるまでJavaScriptが読み込まれず、これ以下のHTMLドキュメントのパースもブロックされてしまう。
JavaScriptの読み込みをHTMLの下部に書くのも、HTMLドキュメントのパースがブロックされてないようにするためである。
でも、設計上どうしても、JavaScriptの読み込みをHTMLの上部に書かないといけない時もあるだろう。
そんな時は、非同期でJavaScriptの読み込みをしてくれるdefer属性かasync属性を使えばいいだろう。

defer属性

defer属性を使用すると、HTMLドキュメントのパースを待つことなく、JavaScriptのダウンロードを始める。
読み込んだJavaScriptは、DOMツリーが構築されてから実行される。
JavaScriptの実行順も、上から順に読み込む。
以下の場合だと、foo.js⇨bar.jsの順番は常に変わらない。

<script defer src="foo.js"></script>
<script defer src="bar.js"></script>

async属性

defer属性と同じく、async属性もHTMLドキュメントのパースを待つことなく、JavaScriptのダウンロードを始める。
ここからが、defer属性とasync属性の違う点である。
読み込んだJavaScriptは、DOMツリーが構築されてから実行されるというわけではない、読み込むと即時に実行される。
また、JavaScriptの実行順も、上から順に読み込むわけではなく、順番は保証されていない。
以下の場合だと、foo.js⇨bar.jsになるかbar.js⇨foo.jsの順番になるかは分からないのである。

<script async src="foo.js"></script>
<script async src="bar.js"></script>

defer/async属性の使いどころ

フロントエンドのパフォーマンスを考える上では、async属性を使用するのが一番良いだろう。
しかし、読み込むファイルが常に依存していないとは限らない。
例えば、JavaScriptのファイルが肥大化してしまい、ネットワークのパフォーマンスを考える上で分割する場合もあるだろう。
そういった場合には、defer属性を使用するべきである。
また、DOMツリーが構築されていない場合に、実行できないJavaScriptを読み込む場合なんかも、defer属性を使用すべきだろう。