javascriptの属性:defer/async と onload

kayama 193views 更新:2015年8月4日

defer/asyncは<script>タグに追加することでjavascriptの実行方法を指定することが出来ます。


<script src="*.js" async defer></script>

実行するタイミングを指定することで、ページ読み込みを高速化させることが出来ます。
こちらのサイトでスクリプトの位置と defer 属性のあり/なしによる、ページの読み込み/表示速度の違いを調査した動画を視聴することが出来ます。→scriptのdefer/asyncを理解し、ページの高速化方法を探る


load(); // 読み込みと同時に実行 defer // レンダリングを完了した段階で実行 async // 利用可能な時点で実行 (HTML5から追加)

※ レンダリング = 要素を生成
※ defer属性がついたスクリプトファイル内で即座に内容を生成するdocument.write()を使用することは、
 javascriptの仕様上出来ないので注意が必要となります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません