JS/CSS/IMG 読み込み順序の関係 DOMContentLoadedevent_html/css_WEB-ITnose

DOMContentLoaded の概要

DOMContentLoaded イベントのトリガー条件は次のとおりです:

「すべての DOM がロードされ、JS のロードが実行された」後にトリガーされます。

ただし、「jsが動的にロードされる場合、DOMContentLoadedのトリガー時間には影響しません」

下図に示すように、青い線はDOMContentLoadedがトリガーを開始することを意味しますが、JSがロードされ実行されていることが前提となります。

(ページ全体がロードされたときにトリガーされる onload イベントではなく、DOM だけです。DOMContentLoaded は onload よりも先にトリガーされるため、区別してください。赤い線 ononload はページが完全にロードされたことを意味します)

DOMContentLoaded がトリガーされる前に IMG と CSS がトリガーされます。

DOMContentLoaded がトリガーされる前に JS が実行されていることは上で述べました。

では、IMG と CSS はどうでしょうか?以下の図を見てみましょう。 DOMContentLoaded イベントがトリガーされますが、一部の画像がブロックされています。

ブロックとは、画像リクエストが非常に早く送信されたにもかかわらず、ブラウザーの読み込みが遅れたことを意味します。

しかし、ブラウザは CSS が読み込まれていないと考えており、画像のスタイルが何であるかがわからないため、リソースの再描画が必要になります。

CSSが読み込まれた後、画像が読み込まれます。 (下の図にはスタイル名がないため、ブロックされた画像リクエストはありません。CSS が変更しないことを考慮すると、ブラウザはそれをブロックする必要はありません)

ここが重要なポイントです: CSS スタイルシートはありますが、画像の読み込みはブロックされますが、JS はブロックしません。

ページに CSS スタイルシートがない場合、最初にすべての画像が読み込まれ、画像を読み込む前に JS が読み込まれたかどうかは判断されません。

これはFirefox 29.01を使用しています

最終結論

1. CSSスタイルシートは画像の読み込み速度に影響しますが、画像を次のように読み込みたい場合はJSは影響しません。できるだけ早く、画像にスタイルを使用しないでください。たとえば、幅と高さにはラベル属性を使用します。

2. JS の読み込み実行速度は DOMContentLoaded イベントのトリガー時間に影響します。DOMContentLoaded イベントをできるだけ早くトリガーしたい場合は、動的読み込みを使用してセカンダリ JS を読み込みます。

参考:

jqueryのready関数はどのように動作しますか?ロード応答イベントの違いを紹介しました。

http://www.cnblogs.com/haogj/archive/2013/01/15/2861950.html

DOMContentLoaded イベントに対する JS、CSS、img の影響 (この記事では chrome を使用していますが、後で Firefox を使用しました)この記事の著者に感謝します)

http://www.alloyteam.com/2014/03/effect-js-css-and-img-event-of-domcontentloaded/

著者:

Margo_test 出典:
http://www.cnblogs.com/margo/

共有と転載を歓迎します。