【JavaScript】DOMContentLoadedイベントより早くloadイベントが実行される

Question

内容

ローディングの非表示処理を、window.loadイベントで実行しています。
・初回アクセス時は問題なし。
・2回目以降のアクセスでは、ファイルキャッシュが使用され、
loadイベントハンドラが先に実行されている（console.logで確認）。

document.DOMContentLoadedイベント と
window.loadイベントの順番保証はできるのでしょうか？

imgタグにおけるloadイベント登録の記事は、teratail上で見つけましたが、
windowオブジェクトにはcompleteプロパティがないため非該当かと思いました。

環境

HTML上では、script1.js　→ script2.jsで記載。
共用レンタルサーバー。.htaccess使用可能。
ソースは以下です。

// script1.js
(function($,underfined) {
	'use strict';

	$(window).on('load',function(){
		console.log("load");
		// 初期化後の処理
	});
})(jQuery);

// script2.js
(function($, undefined) {
	'use strict';

	$(function() {
		console.log("DOMContentLoaded");
        // 初期化
	});
})(jQuery);

現状対応

.htaccess内に、画像ファイルキャッシュを禁止にすることで、
loadイベントの遅延を強制的に起こしてコントロールしています。
発生しているのがWebサイトであるため、
ユーザーの速度対応の向上を含めてキャッシュを有効なまま対応を行いたいです。

よろしくお願いします。

Comments

[maisumakun]

> HTML上では、script1.js　→ script2.jsで記載。

asyncやdeferredを付けたりはしていませんか？

[m.ts10806]

順番が保証されるようなコードを組みたいのか、単になぜ起きてるのか知りたいのか　どちらでしょうか。

[t-ochi]

maisumakun様、m.ts10806様、
ご質問ありがとうございます。

> asyncやdeferredを付けたりはしていませんか？
　確認しました。
　ついていませんでした。

> 順番が保証されるようなコードを組みたいのか、単になぜ起きてるのか知りたいのか　どちらでしょうか。
　順番が保障されるようなコードを組みたい
　　が優先高くなります。

何か他の対応が必要になった時のために、　なぜ起きてるのか　も知りたいです。

画像がブラウザキャッシュが使用されているため、
DOMを読み込むよりも早く、ブラウザ内では先にloadが終わったと思っていました。

他に気づけていない要因があるのでしょうか？
ご教示いただけると嬉しいです。

よろしくお願いします。

[think49]

HTMLも含めて、再現可能なコードを掲示して下さい。
https://ja.stackoverflow.com/help/minimal-reproducible-example

[t-ochi]

ご質問ありがとうございます。
開発環境上で再現させようと元に戻したのですが再現しませんでした。

その際に、ブラウザを変更して（Firefox）でネットワークタブを見た中で、
原因となりそうな箇所を見つけましたので、自己解決として投稿いたします。

きっかけ、および、質問する際の
「良いサンプルコード」のガイドラインをご紹介いただきありがとうございました！

今後、より良い質問ができるようにいたします！

Answer 1

(function($,underfined) {

の中で「$(window).on('load',」を呼んでるからでは？
並列に書いてみてください

window.addEventListener('pageshow', e=>{
  console.log(e.type)
});
window.addEventListener('load', e=>{
  console.log(e.type)
});
window.addEventListener('DOMContentLoaded', e=>{
  console.log(e.type)
});
/* 
DOMContentLoaded→load→pageshow
の順で出力される
*/

Comments

[think49]

(function($,underfined) は即時関数なので、実行順に影響しないのでは？

[t-ochi]

自己回答内容からの考察ですが、
即時関数でラップしたため、script2.jsのレスポンス受信前に、
loadイベントハンドラが実行されたことも考えられると思いました。

関数スコープで閉じたかったため、
読み込み順で対応しようと思ってます！

本当は、import文などを使用する方がいいんでしょうね・・・。
https://qiita.com/TakamiChie/items/4d92c7e80a9d4cce0178

yambejp様、think49様　ありがとうございました！

Answer 2

偶然ですが、原因を特定できましたので、投稿いたします。

追記情報

• 本環境はWordPress。
• サーバーはさくらスタンダード（HTTP/2有効）
• scriptタグの追加は「wp_enqueue_script」を使用

原因考察

jsファイルのHTMLの読み込み順　による、
DOMContentLoadedイベントハンドラとloadイベントハンドラの
登録と実行タイミング・順番の不整合。

詳細

読み込み順　　：script1.js → script2.js
ハンドラ登録順：load → DOMContentLoaded

同時リクエストのタイミングが異なるフェイズでリクエストが送られていた。
※HTTP/2での同時送信リクエスト数は「6つ」まで。
https://blog.redbox.ne.jp/http2-cdn.html

• フェイズ1でscript1.jsを取得　→ loadイベントハンドラ登録
• フェイズ2でscript2.jsを取得　→ DOMContentLoadedイベントハンドラ登録

フェイズ2でレスポンスを受け取る前に、loadイベントが発生する。

観測手順

Firefoxのネットワークタブ内の要求タイミングの差異

• script1.js　→ ブロック時間　小
• script2.js　→ ブロック時間　大

対応内容

方向性

<script src="script1.js"></script>
<!-- 色々なファイルの読み込み -->
<script src="script2.js"></script>

↓ こうなるようにする

<script src="script2.js"></script>
<!-- 色々なファイルの読み込み -->
<script src="script1.js"></script>

WordPressでの作業

• wp_enqueue_scriptの登録順の変更
• wp_enqueue_scriptの依存関係の見直し

その他検討内容

• DOMContentLoadedイベントおよび、loadイベントの登録ファイルの集約
  ※各ページに必要な初期化のためにscriptを分けているため、不採用濃厚。
• pageshowイベントの活用検討

ご質問・ご回答下さった方々ありがとうございました！