こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

JS イベント処理が完了するタイミングについて

JavaScriptで、DOMContentLoadedイベントリスナの処理が完了するタイミングについての質問です。

<script>
window.addEventListener('DOMContentLoaded', function() {
//処理A
});
</script>

上記のように、処理Aを記述した場合、
処理Aは、必ず画面が表示される前(loadの前)に完了しますか。・・・質問(1)

画面が表示される前に処理Aを完了させておきたいのですが、
処理Aと非同期でloadが開始されるのであれば、
処理Aが完了する前に画面が表示されてしまう事を懸念しての質問です。

また、上記<script>の記述位置は、
<head>内に記述しても、</body>の直前に記述しても、挙動に違いはありませんか。
・・・質問(2)

お手数ですが、上記質問(1)(2)について
理由も含めてお教えいただけますと幸いです。

投稿日時 - 2018-09-13 22:07:11

QNo.9537030

困ってます

質問者が選んだベストアンサー

(1) 処理A はHTML読み込み・DOM解析完了後に非同期で処理されるため、画像読み込みやレンダリングより時間が掛かる処理内容だった場合は画面表示後に完了する可能性が有ります。

(2) 記述位置によって挙動に違いがあります。
ブラウザはHTMLを上から解析しながら逐次処理を行うため、<head>内に記述した場合は<bosy>内の解析が終わっておらず特定のタグを指定して処理しようとしても見つけられない場合があります。
一方</body>の直前に書いた場合は、それより上に書かれているタグは読み込みが完了しているので必ず見つけられると言う事になります。
質問(1)で書かれているようなイベントリスナを使ってJavaScriptを記述するのは、<head>内に処理を記述してもタグが見つからないと言った問題が起きないようにする事が目的です。

投稿日時 - 2018-09-14 07:51:48

お礼

早速、わかりやすくご丁寧にご回答いただき、ありがとうございます。

(1)について、よく理解できました。
画面表示後に完了してしまう可能性がある以上、
そういった処理はサーバーサイドであらかじめ完了させておく
など、代替案を検討いたします。

(2)については、
質問(1)のようなイベントリスナの形式で書いている限りは、
どの位置に記述しても、処理Aの実行タイミングに違いは無い
と理解しましたが、正しいでしょうか。

投稿日時 - 2018-09-14 11:28:44

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

> 質問(1)のようなイベントリスナの形式で書いている限りは、
> どの位置に記述しても、処理Aの実行タイミングに違いは無い
> と理解しましたが、正しいでしょうか。

イベントの種類次第ですが、書く場所が悪ければイベント発火後にJavaScriptが読み込まれるような事になってしまうと処理されない事もあり得ます。
(最近のブラウザは賢いから大丈夫だと思うけど)
また、JavaScriptを外部ファイルにして読み込ませる場合は、読み込みの時間もあるので<head>内に書いてイベントリスナで制御する方がいいかもしれません。(書き方の好みにもなってしますが)

投稿日時 - 2018-09-14 13:28:15

お礼

迅速なご回答、あらためて感謝申し上げます。
いろんなケースを想定されており、とても参考になりました。

投稿日時 - 2018-09-14 20:50:49

あなたにオススメの質問