JavaScript遅延読み込みのdeferで?

お絵かき掲示板PHPスクリプトPOTI-boardの保守･開発作業で??となったDOMContentLoadedの動作の違い

JavaScript遅延読み込みdefar

タグに async / defer を付けた場合のタイミング - Qiita

サイトの高速化のためにいろいろと試してみた方法の一つに、deferによるJavaScriptの遅延読み込みがありました。
DOMContentLoadedの直前にJavaScriptを読み込んで実行するようです。

どちらもDOMContentLoadedなのに?

それなら、DOMContentLoadedのタイミングで関数を実行すればJavaScriptの読み込みは終わっているはず…と思ったのですがDOMContentLoadedの書き方による動作するしない問題に直面する事になりました。

<script src="loadcookie.js" defer></script>
<script>
	document.addEventListener('DOMContentLoaded',l,false); //LoadCookie
</script>

JavaScriptをdeferで遅延読み込みして、DOMContentLoadedのタイミングで関数を発火…→関数が未定義になって動作しません。
deferを外すと動きます。

<script src="loadcookie.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
		l();//LoadCookie
});
</script>

document.addEventListener('DOMContentLoaded', (e) => {
で関数を囲うと動作します。
どちらも｢DOMContentLoaded｣なのに上記2つのうちの上のコードは動きませんでした。

Document: DOMContentLoaded イベント - Web API | MDN

MDNのサンプルコードにも、1例目のコードは無し…。
たぶん…ですが。
どちらも｢DOMContentLoaded｣でも

document.addEventListener('DOMContentLoaded',l,false); //LoadCookie

のように書いた場合は、関数名が定義ずみでなければいけないんでしょうね。
書いていて思いましたが、いや、これはあたり前の事だったのかもしれません…。
DOMの読み込みが完了する前の時点でDOMの読み込みの完了はまだですか?とコードを読み込むのでその時点で関数が未定義なら未定義エラーになるのでしょう。
ちなみに、このサンプルに登場する｢loadcookie.js｣は20年前からPOTI-boardで使われているCookie読み込みのためのJavaScriptです。
20年にわたる長き間、このJavaScriptの関数をDOMの読み込みのタイミングをみる事なくHTMLの下のほうで呼び出していました。
しかし、HTMLの読み込みが完了しているかどうかを確認せずに呼び出すと動作不良につながるおそれがあるので、deferを使う使わないにかかわらず、｢DOMContentLoaded｣を使ったほうがいいのでしょうね。
PaintBBSの起動画面の下の描画時間を計る時計のJavaScriptの改修作業も…。
それはまた別の記事で。

お絵かき掲示板PHPスクリプトの開発と、お絵かき掲示板交流サイトの運営をしています。

POTI-board改公式サイト

お絵かき掲示板 Petit Note

イラスト投稿サイト Petit Note

お絵かき、イラストの投稿サイトを運営しています。
年中投稿募集中ですので、どうぞ、よろしくお願いします。