19
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

scriptタグの位置でもやもや

Last updated at Posted at 2014-03-07

きっかけ

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を高速読み込みする| アイディア・ボード

19
19
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?