【JavaScript】HTML5 の script要素[async]と[defer]を使ってパフォーマンスアップする方法。

Ads by Google

HTML5 の script要素では、[async]または[defer]属性を指定することで、主にページの読み込み速度が改善し、パフォーマンスが劇的に改善するケースがあります。

async属性を指定

script要素にasync属性を指定すると、「非同期で読み込み、読み込み終わり次第実行する」と言う動作をします。なので、ページのレンダリングをブロックすることなくスクリプトを実行できます。asyncはHTML5から加わった属性です。

defer属性を指定

またdefer属性を指定すると、ページの読み込みが完了してからスクリプトが実行されます。body.onloadで実行されるのとほぼ同様?defer属性は、HTML5以前からあったようです(未調査)。

asyncとdeferを同時に指定すると、ブラウザasyncをサポートしているならその動作を、asyncをサポートしていないならdefer時の動作を行わせることが出来ます。asyncをサポートしていない古いブラウザ上でも、非同期でJavaScript実行されるように代替動作をさせることが出来る訳です。(ただし、読み込み中ページはブロックする)

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google