きっかけ
HTML5 Professional Certification HTML5プロフェッショナル認定試験 | 多くの企業が推進する次世代Web言語の認定資格 | LPI-Japan
こんなのあるのかー、アニメーションとかぐりぐりすごいなー
とか思っておもむろにソースを開いてみんです。
そしたらscriptタグが全部headにあるのね。
いまどきはbody末尾に書くのがスタンダードなんでしょうけど、さすがに試験とかのサイトになるとセマンティック重視しないといけないから、なのかな。
いや、だからといって別に重かったりするわけじゃないしいいんだけど。
というか私だってできればhead内に書きたいですし。。。
deferが使えれば。。。
script要素にdefer属性をつけると、コンテンツの表示が終わったあとに、そのJavaScriptを実行するようになります(正確にはDOMContentLoadedイベントの前になります)。そのため、body要素の最後にscript要素を記述したコードとほぼ同じ結果になりますが、ファイルの読込みは非同期で行われるため、こちらのほうが若干早くなる可能性があります。
via ユーザーの体感速度を高めるためのJavaScriptチューニング(前編) | HTML5Experts.jp
非同期なので読み込み順がバラバラ
↓
依存関係ないやつだけ使う?
↓
jQueryむりじゃん。。。
↓
\(^o^)/オワタ
結論
sync defer欲しい
memo
この件とはちょっとずれるけど
HTML5のリファレンスに以下の記述を発見
スクリプトから挿入された script 要素は、async がデフォルトでは true となりました。false をセットして、挿入順にスクリプトを実行させることも可能です。
via W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
scriptが動的に挿入される場合は非同期がデフォルトになったみたい。
参考
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
HTML5でJavaScript,jQueryを高速読み込みする| アイディア・ボード