scriptタグのdefer属性

書き方

<!-- html -->
<script defer src="hoge.js"></script>
<!-- xhtml -->
<script defer="defer" src="hoge.js"></script>

defer属性とは

• ページの読み込み速度向上に使われる
• レンダリング完了後にdefer付きのJSを上から実行
• HTML4はIEのみ対応で、HTML5からその他主要ブラウザも対応
• 外部JSファイルの読み込みにのみ有効

ここ見るとすごい詳しい
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…

簡単に言うとJSを後から読み込むことでページの表示を早くしてくれるやつ

JSでdefer設定

<div id="defer-obj"></div>
<script>
  var deferObj = document.createElement('script');
  deferObj.setAttribute('defer', true); <!-- これ -->
  <!-- deferObj.setAttribute('defer', 'defer'); も可-->
  $('#defer-obj')['0'].appendChild(deferObj);
</script>

html上では

<script defer="true"></script>
<!-- deferObj.setAttribute('defer', 'defer'); の場合-->
<script defer="deter"></script>

になり、Chromeで見ると

になる

同じくJSタグにつける属性としてasync属性があって

async属性とは

• 利用可能になった時点で非同期に実行
• 外部JSファイルの読み込みにのみ有効

asyncはGoogle Analyticsでも使われてるそうです

参考：script 要素 - HTML | MDN