次の項目のタイムライン: <script defer>を複数記述した場合、実行順序は保証されるでしょうか?
現在のライセンス: CC BY-SA 3.0
12 件のイベント
日時 書式を切り替える | 内容 | ユーザー | ライセンス | コメント | |
---|---|---|---|---|---|
2016年8月31日 16:36 | コメント | 追加済み | packet0 |
役立ったのであればよかったです。1つ書き忘れたのがasync でDOMContentLoaded イベントを登録するとHTMLパースよりあとになる可能性があり、DOMContentLoaded イベントが発行されるタイミングよりあとにリスナーを登録すると関数が実行されません。defer もつけておけばそちらが優先(defer は仕様上DOMContentLoaded の直前)されるので大丈夫だとはおもいます。それ以外にもPromise オブジェクト(これも割と最近なので古い環境だとない)を使うとどのタイミングでスクリプトが実行されても大丈夫なようにできるので興味・必要性がある場合は調べてみてください。
|
|
2016年8月31日 2:44 | コメント | 追加済み | re9 | 最初に動機を書いておけばよかったのですが、元々は指定jsライブラリを読み込むとページ表示が遅くなるので、それを何とかしたいと思い質問しました。js処理はHTMLパース後で良かったのでその方法を探している過程で「defer」にたどり着いた感じです。「DOMContentLoadedイベント」には気が付きませんでした。参考になりました | |
2016年8月30日 15:46 | コメント | 追加済み | packet0 |
ライブラリスクリプトとのことなので、それ単体を読み込んだだけではDOM に触れることはないと思います。DOMContentLoaded イベントに登録した関数はHTMLのパースが終わった段階で発火するので、その関数内でライブラリ関数を呼ぶ限りはdefer した場合と同じ結果になるはずです。ただこのイベントはHTMLだけでスタイルシートや画像の読み込みは終わってない可能性があります(なので座標などはイベント発火後に変わる可能性あり)。画像なども読み込んだあとに発火して欲しい場合はload イベントを使います(ただDOMContentLoaded より遅くなるのでなるべくは使わないほうがいいです)。ちなみにdefer やasync は実行タイミングの制御を目的としたものではなく、読み込みを並列化してウェブサイトのパフォーマンスを向上させるのが本来の使い方ではないかと思います。
|
|
2016年8月30日 3:02 | コメント | 追加済み | re9 | 外部ライブラリスクリプトなので、HTMLパースを一時中断しないためには、deferするしかないと思っていました。ライブラリを普通に読み込んだ後、DOMContentLoadedイベント経由で呼び出せば同じ意味? <script defer>と「DOMContentLoadedイベント」には何か違いがあるのでしょうか? | |
2016年8月29日 4:42 | コメント | 追加済み | packet0 |
HTMLパースを一時中断したくないのと、スクリプトをdeferしたいのはなぜですか?HTMLエレメントに対して処理をしたいとかでしたらDOMContentLoaded イベントなどを使えばできますが。
|
|
2016年8月29日 2:27 | コメント | 追加済み | re9 | HTMLパースを遅延させたくなかったので、<script defer>を複数記述すれば良いのでは? と思ったのですが…。「仕様」で定義されていても「現実的な問題」があるわけですね。参考になりました。async属性も検討したのですが、HTMLパースを一時中断する可能性があるみたいなので… | |
2016年8月29日 2:11 | 投票 | 承認 | re9 | ||
2016年8月28日 5:13 | 履歴 | 編集日時 | packet0 | CC BY-SA 3.0 |
本文に 50 文字追加
|
2016年8月28日 5:08 | 履歴 | 編集日時 | packet0 | CC BY-SA 3.0 |
余談の順序変更
|
2016年8月28日 5:02 | 履歴 | 編集日時 | packet0 | CC BY-SA 3.0 |
本文に 2 文字追加; 本文から 7 文字削除
|
2016年8月28日 4:57 | 履歴 | 編集日時 | packet0 | CC BY-SA 3.0 |
リンクについて追記; 本文に 2 文字追加
|
2016年8月28日 4:51 | 履歴 | 回答済み | packet0 | CC BY-SA 3.0 |