3

下記で、1.jsの内容を、常に2.jsで使用できるでしょうか?

<script src="1.js" defer></script>
<script src="2.js" defer></script>

下記の場合の実行順序は?
・1.js処理後に、2.jsを処理?

<script src="1.js" defer></script>
<script src="2.js"></script>

1 件の回答 1

9

仕様上の話だけだと

<script src="1.js" defer></script>
<script src="2.js" defer></script>

の場合は2.jsが実行される段階で1.jsの処理は終わっていて

<script src="1.js" defer></script>
<script src="2.js"></script>

の場合1.jsが実行される段階で2.jsの処理は終わっていることが保証されます(deferの付いていない2.jsはhtmlのパースを中断して実行されるのでdeferされたものより先になります)。

ただ現実問題として、最低でもFirefoxには仕様通りに動かないバグ(タイトルだとFirebugアドオンを入れているととありますが、アドオンなしでも起きることが確認されています)が確認されていますし、deferをサポートしない古いブラウザとかもあると思うので、現段階でdeferの仕様に頼った実装をするのは危険だと思います。


余談ですが、async属性をつけた場合そのスクリプトがいつ実行されるかは全く予想がつきませんが、ロードが終わり次第最速のタイミングで実行されます(htmlのパースが終わっていない場合そちらを一時中断)。またdeferasyncは同時に使え、ともに外部スクリプト専用です。

6
  • HTMLパースを遅延させたくなかったので、<script defer>を複数記述すれば良いのでは? と思ったのですが…。「仕様」で定義されていても「現実的な問題」があるわけですね。参考になりました。async属性も検討したのですが、HTMLパースを一時中断する可能性があるみたいなので…
    – re9
    Commented 2016年8月29日 2:27
  • HTMLパースを一時中断したくないのと、スクリプトをdeferしたいのはなぜですか?HTMLエレメントに対して処理をしたいとかでしたらDOMContentLoadedイベントなどを使えばできますが。
    – packet0
    Commented 2016年8月29日 4:42
  • 外部ライブラリスクリプトなので、HTMLパースを一時中断しないためには、deferするしかないと思っていました。ライブラリを普通に読み込んだ後、DOMContentLoadedイベント経由で呼び出せば同じ意味? <script defer>と「DOMContentLoadedイベント」には何か違いがあるのでしょうか?
    – re9
    Commented 2016年8月30日 3:02
  • 2
    ライブラリスクリプトとのことなので、それ単体を読み込んだだけではDOM に触れることはないと思います。DOMConte‌​ntLoadedイベントに登録した関数はHTMLのパースが終わった段階で発火するので、その関数内でライブラリ関数を呼ぶ限りはdeferした場合と同じ結果になるはずです。ただこのイベントはHTMLだけでスタイルシートや画像の読み込みは終わってない可能性があります(なので座標などはイベント発火後に変わる可能性あり)。画像なども読み込んだあとに発火して欲しい場合はloadイベントを使います(ただDOMConte‌​ntLoadedより遅くなるのでなるべくは使わないほうがいいです)。ちなみにdeferasyncは実行タイミングの制御を目的としたものではなく、読み込みを並列化してウェブサイトのパフォーマンスを向上させるのが本来の使い方ではないかと思います。
    – packet0
    Commented 2016年8月30日 15:46
  • 1
    役立ったのであればよかったです。1つ書き忘れたのがasyncDOMContentLoadedイベントを登録するとHTMLパースよりあとになる可能性があり、DOMContentLoadedイベントが発行されるタイミングよりあとにリスナーを登録すると関数が実行されません。deferもつけておけばそちらが優先(deferは仕様上DOMContentLoadedの直前)されるので大丈夫だとはおもいます。それ以外にもPromiseオブジェクト(これも割と最近なので古い環境だとない)を使うとどのタイミングでスクリプトが実行されても大丈夫なようにできるので興味・必要性がある場合は調べてみてください。
    – packet0
    Commented 2016年8月31日 16:36

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。