下記で、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>
仕様上の話だけだと
<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のパースが終わっていない場合そちらを一時中断)。またdefer
とasync
は同時に使え、ともに外部スクリプト専用です。
DOMContentLoaded
イベントなどを使えばできますが。
DOMContentLoaded
イベントに登録した関数はHTMLのパースが終わった段階で発火するので、その関数内でライブラリ関数を呼ぶ限りはdefer
した場合と同じ結果になるはずです。ただこのイベントはHTMLだけでスタイルシートや画像の読み込みは終わってない可能性があります(なので座標などはイベント発火後に変わる可能性あり)。画像なども読み込んだあとに発火して欲しい場合はload
イベントを使います(ただDOMContentLoaded
より遅くなるのでなるべくは使わないほうがいいです)。ちなみにdefer
やasync
は実行タイミングの制御を目的としたものではなく、読み込みを並列化してウェブサイトのパフォーマンスを向上させるのが本来の使い方ではないかと思います。
async
でDOMContentLoaded
イベントを登録するとHTMLパースよりあとになる可能性があり、DOMContentLoaded
イベントが発行されるタイミングよりあとにリスナーを登録すると関数が実行されません。defer
もつけておけばそちらが優先(defer
は仕様上DOMContentLoaded
の直前)されるので大丈夫だとはおもいます。それ以外にもPromise
オブジェクト(これも割と最近なので古い環境だとない)を使うとどのタイミングでスクリプトが実行されても大丈夫なようにできるので興味・必要性がある場合は調べてみてください。