JavaScript DOMContentLoaded イベントのケーススタディ

DOMContentLoaded イベント

文字通り、DOM がロードされた後に実行されます。

window.onload イベントと非常に似ていますが、いくつか違いがあります。

1. ドキュメントが完全に読み込まれ解析された後に、DOMContentLoaded イベントがトリガーされます。
2. window.onload イベントは、ドキュメントの読み込みと解析を完了するだけでなく、画像や CSS ファイルなどの関連リソースの読み込みも完了します。

次の疑問は、DOM がいつロードされるかということです。これはブラウザのレンダリングから始まります。ブラウザが Web ページを表示するプロセスは、次のように説明できます。

1. HTML ドキュメントを要求し、次にそのドキュメントに基づいてさらに img、css、およびその他のリソース ファイルを要求します。

2. ドキュメントを解析して、DOM ツリーと CSS ツリーの 2 つを取得します。

3. 上記の 2 つのツリーに基づいてレンダリング ツリーを生成します。

4. レンダリング ツリーに従ってレイアウトを実行し、関連する要素を描画します。

Webkit を例にとると、レンダリング プロセスは次のようになります。

DOMContentLoaded イベントは次の場合にトリガーされます:

DOM の後、RENDERtree の前。

JavaScript の読み込みと実行により、DOMContentLoaded イベントのトリガーが遅延されます。

ブラウザは JavaScript に DOM 要素情報が必要かどうかを判断できないため、JavaScript は CSS レンダリングが完了するまで待ってから読み込んで実行する必要があります。

JavaScript に最新の情報が確実に含まれるように、最初に CSS が読み込まれてレンダリングされます。

参考資料:

http://www.softwhy.com/article-9783-1.html

https://www.cnblogs.com/CandyManPing/p/6635008.html

https://www.cnblogs.com/caizhenbo/p/6679478.html

JavaScript DOMContentLoaded イベントの詳細なケースに関するこの記事はこれで終わりです。JavaScript DOMContentLoaded イベントの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。