DOMContentLoadedは必ず必要ですか？

Question

はじめまして。初心者です。
2点質問があります。

---

1）
document.addEventListener('DOMContentLoaded',abc);
または、
$(document).ready(function(){
abc();
});
は、絶対に必要なものでしょうか？
javascriptを</body>直前に書く場合でも、
これらを用いて書いた方が良いですか？

abc();
と書くだけでも実行されるので、
DOMContentLoadedや$(document).readyを
用いる必要があるのかどうか、
ある場合は、なぜ必要なのかを知りたく思っております。

---

2）
document.addEventListener('DOMContentLoaded',abc);
または、
$(document).ready(function(){
abc();
});
の違いは、

$(document).readyの方が読み込みが速い
$(document).readyはIEの古いバージョンにも対応している

の2点で、jQueryを使わずにピュアJavaScriptでスクリプトを書いた場合にも
既にjQueryが読み込まれているページであれば、
読み込みの部分だけ、$(document).readyを使った方が良いという認識ですが
合っていますでしょうか？

---

どうぞよろしくお願いいたします。

Answer 1

1. について。

一般的にブラウザが HTML を表示するまでには、字句解析 -> 構文解析 -> DOM 構築 -> 画像ファイル・サブフレームの読込み、というような処理が続くわけですが、DOMContentLoaded は DOM の構築が終了した時点で呼ばれることが規定されています。ので、DOMContentLoaded のイベントハンドラの中では確実に DOM をいじれることが保証されています。
他方、<script> タグ内で直接実行するようにされたスクリプトは、スクリプトタグが閉じたときに解釈が終了し、その時点で実行されるようですが、必ずどのブラウザでもそうなのかは、私は知りません。仮にそうだったとしても、その時点で </body> 以前の HTML の解釈は終了しているものの、DOM が構築されている保証がある、という話も聞いたことがありません（あるのかもしれませんが）。もし、HTML の解釈と DOM の構築が別のスレッドで行われていたりするかもしれません（そんな実装があるのかどうかもわかりません）。という感じで、</body> 直前に書いてあるときに DOM の構築が確実に済んでいると言えるかどうかは、いろいろがブラウザ依存、実装依存になってしまう、か、あるいは事細かに調査したら大丈夫なのかもしれない、というような話かと思います。でまた、それが将来も保証されるのか、という話もあります。
たまたま特定のブラウザにおいて特定のコード例でできた、という話と、常に間違いなく実行できる、という話にはかなりの差があります。

そういうところに悩むよりは、おとなしく DOMContentLoaded 使っておけば、というのが普通かと思います。

Comments

[退会済みユーザー]

unau様

よく理解できました。
どうもありがとうございました！

Answer 2

該当要素ノードが読み込み完了した事を確定させる目的であれば DOMContentLoaded は必須ではありません。
(※外部コンテンツの読み込み完了を捕捉する場合は window.onload を使いますが、script[defer] 等の非同期読み込みされた要素は window.onload では捕捉出来ません。)

$(document).ready は jQuery v1.x系において DOMContentLoaded をサポートしない IE8- 向けの実装がありましたが、それ以外の違いはありません。
IE8- は Microsoft がサポート対象外としている為、特殊な事情がなければ IE8- をサポートする義務はないと思われます。

Re: fffff さん

Comments

[退会済みユーザー]

think49様

どうもありがとうございます！
1点、ご質問させてください。

---------------

>該当要素ノードが読み込み完了した事を確定させる目的であれば DOMContentLoaded は必須ではありません。

私の知識が浅くて大変恐縮なのですが、
「該当要素ノードが読み込み完了した事を確定させる目的」以外に、
DOMContentLoadedを使う用途は何がありますでしょうか。
ご教示いただけますと幸いです。

---------------

jQuery v2.x系にはIE8を考慮した実装が無いことを認識できていませんでした。
どうもありがとうございます！

[think49]

> 「該当要素ノードが読み込み完了した事を確定させる目的」以外に、
> DOMContentLoadedを使う用途は何がありますでしょうか。
私の知る限りではありませんが、未知の用途があるかもしれません。
「DOMContentLoaded が絶対に必要なものではない」と断定する根拠が私にはありませんでしたので、私の知る範囲で正確な説明をしたら先述のようになりました。

[退会済みユーザー]

think49様

どうもありがとうございます。
重箱の隅をつつくようなことを質問しましてすみません。
javascriptはいろいろと不思議に思うことが多く。
またよろしくお願いいたします！