javascript

JavaScriptの読み込みは、以下の形が一般的である。 &lt;script src="foo.js">&lt;/script> &lt;script src="bar.js">&lt;/script> この方法だと、 scriptタグがパースされるまでJavaScriptが読み込まれず、これ以下のHTMLドキュメントのパースもブロックされてしまう。JavaScriptの読み込みをHTMLの下部に書くのも、HTMLドキュメントのパースがブロックされてないようにするためである。でも、設計上どうしても、JavaScriptの読み込みをHTMLの上部に書かないといけない時もあるだろう。そんな時は、非同期でJavaScriptの読み込みをしてくれるdefer属性かasync属性を使えばいいだろう。 defer属性 defer属性を使用すると、HTMLドキュメントのパースを待つことなく、JavaScriptのダウンロードを始める。読み込んだJavaScriptは、DOMツリーが構築されてから実行される。JavaScriptの実行順も、上から順に読み込む。以下の場合だと、foo.js⇨bar.jsの順番は常に変わらない。 &lt;script defer src="foo.js">&lt;/script> &lt;script defer src="bar.js">&lt;/script> async属性 defer属性と同じく、async属性もHTMLドキュメントのパースを待つことなく、JavaScriptのダウンロードを始める。ここからが、defer属性とasync属性の違う点である。読み込んだJavaScriptは、DOMツリーが構築されてから実行されるというわけではない、読み込むと即時に実行される。また、JavaScriptの実行順も、上から順に読み込むわけではなく、順番は保証されていない。以下の場合だと、foo.js⇨bar.jsになるかbar.js⇨foo.jsの順番になるかは分からないのである。 &lt;script async src="foo.js">&lt;/script> &lt;script async src="bar.js">&lt;/script> defer/async属性の使いどころ フロントエンドのパフォーマンスを考える上では、async属性を使用するのが一番良いだろう。しかし、読み込むファイルが常に依存していないとは限らない。例えば、JavaScriptのファイルが肥大化してしまい、ネットワークのパフォーマンスを考える上で分割する場合もあるだろう。そういった場合には、defer属性を使用するべきである。また、DOMツリーが構築されていない場合に、実行できないJavaScriptを読み込む場合なんかも、defer属性を使用すべきだろう。

javascript

【Ionic】ion-tabs と ion-segment の違いについて学んだ話

脱IE。IEに対応すること辟易している人へ

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

Kento Matsumoto

とみまつ

CATEGORY

ARCHIVE