詳細はDOMContentLoaded

4398 ワード
先端 httml 5
詳細はDOMContentLoaded
まずDOMContentLoadedとは何かを直感的に感じてみましょう.Chrome DevToolsを開き、Networkパネルに切り込み、Webページを再ロードし、次のスクリーンショットを取得します.
タグ1が指す青い線とタグ2が指す青い字「DOMContentLoaded:1.29 s」は、いずれもDOMContentLoadedというイベントがトリガーされた時間を表し、表現形式が異なるにすぎない.
DOMContentLoadedを直感的に感じましたが、それはいったい何なのでしょうか.
DOMContentLoadedとは
興味深いのはW 3 CのHTML 5仕様がDOMContentLoadedをどのように記述しているかを見ることができますが、興味がなくても大丈夫です.私たちは下へ行きます.では、MDNのDOMContentLoadedの説明を見てみましょう.何ですか.興味がありませんか.大丈夫です.新しい概念に触れると、そんなに難解な文字を見るのが好きな人はいません.では、DOMContentLoadedとは何かを通俗的な言葉で話します.
まず、Webページのロード速度をどのように測定するかについて考えてみましょう.
Webページに完全な時間をロードして測定できるという人もいます.これは問題ないと思いますが、よくありません.どうしてですか.日常生活の中で、多くの时、ネットの原因で私达はホームページの上のすべての内容がすべてロードするのを待つ必要はありませんて、主要な内容をロードするだけでいいので、例えばあなたがこのブログを开く时、すべての画像がロードするのを待つ必要はありませんて、ブログの本文を见て正常に読むことができます.上の言葉を精錬すると,ユーザはすべてのコンテンツがロードされるのを待つ必要がなく,空白のページでコンテンツを見るだけでよい場合がある.それなら、さっきの問題に戻り、ページのロード速度を測る方法の一つは「このページの空白からコンテンツが現れるまでの時間を計算する」ことだと思います.では、どうやってこの時間を計算しますか?HTML 5の仕様は、HTMLドキュメントのロードと解析が完了すると、DOMContentLoadedイベントがトリガーされます.
この時また質問が来ました.「HTMLドキュメントがロードされ、解析が完了しました」とはどういう意味ですか.あるいは、HTMLドキュメントのロードと解析が完了する前に、ブラウザはどのようなことをしましたか?では、ブラウザレンダリングの原理からお話しします.
ブラウザはサーバにHTMLドキュメントを要求すると解析を開始し,生成物はDOM(ドキュメントオブジェクトモデル)であり,ここでHTMLドキュメントがロードされ解析が完了する.CSSがある場合はCSSに基づいてCSSOM(CSSオブジェクトモデル)が生成され、DOMとCSSOMのマージによってレンダリングツリーが生成されます.レンダリングツリーがあれば、すべてのノードのスタイルがわかります.次に、これらのノードとスタイルに基づいてブラウザ内の正確なサイズと位置を計算します.これがレイアウトフェーズです.これらの情報があれば、次にノードをブラウザに描画します.すべての手順を下図に示します.
HTMLドキュメントがロードされ解析される前にブラウザがどのような仕事をしたかを知ることができますが、まだ終わっていません.現在のフロントエンドの主役の一人JavaScriptを考えていないからです.
JavaScriptはDOMの生成をブロックすることができ、つまりブラウザがHTMLドキュメントを解析している間にに すると、HTMLドキュメントの を し、スクリプトを します.スクリプトがインラインの 、ブラウザはこのインラインのスクリプトを に し、 チェーンの はスクリプトをロードして します.スクリプトの が すると、ブラウザはHTMLドキュメントの を けます. の を てください. console.log(document.getElementById('ele')); // null console.log(document.getElementById('ele')); // <div id="ele"></div>
また、JavaScriptは任意のオブジェクトのスタイルを問い合わせることができるため、CSS解析が完了し、つまりCSSOM生成後にJavaScriptが実行されることを意味する.
ここまで、まとめてみましょう.ドキュメントにスクリプトがない場合、ブラウザがドキュメントを解析したらDOMContentLoadedイベントをトリガーできます.ドキュメントにスクリプトが含まれている場合、スクリプトはドキュメントの解析をブロックし、スクリプトはCSSOM構築が完了するまで待つ必要があります.いずれの場合も、DOMContentLoadedのトリガは、ピクチャなどの他のリソースのロードが完了するのを待つ必要はありません.
非同期スクリプト
ここでは、同期スクリプトがWebレンダリングに与える影響について説明しています.ページをできるだけ早く表示したい場合は、非同期スクリプトを使用することができます.HTML 5では、deferとasyncの2つの非同期スクリプトを定義する方法が定義されています.彼らの違いを見てみましょう.
同期スクリプト(ラベルにasyncまたはdeferは含まれていません):HTMLドキュメントが されると( )スクリプトに すると、 を し、スクリプトをロードして し、 が してからHTMLドキュメントの を します. は の です.
deferスクリプト:HTMLドキュメントが されるとdeferスクリプトに すると、バックグラウンドでスクリプトがロードされ、ドキュメントの プロセスが されず、ドキュメントの が するとdeferスクリプトが されます.また,deferスクリプトの は の に する. は の です.
asyncスクリプト:HTMLドキュメントが されたときにasyncスクリプトに すると、バックグラウンドでスクリプトがロードされ、ドキュメント プロセスは されません.スクリプトのロードが すると、ドキュメントは を し、スクリプトは され、 が するとドキュメントは を します. は の です.
( ソース:async vs defer attributes)
Googleの「asyncとdeferの い」を ると、 のような や がたくさんあるかもしれませんが、ここでは、asyncとdeferがDOMContentLoadedイベントにトリガーした を したいと います.
deferとDOMContentLoaded
scriptラベルにdeferが まれている 、このスクリプトはHTMLドキュメントの に を えるのではなく、HTML が するまで されません. 、DOMContentLoadedはdeferスクリプトの が した にのみトリガーされます.だからこれは を しますか?HTMLドキュメント は を けず、DOMビルド にdeferスクリプトが されますが、スクリプト にCSSOMビルド を つ があります.DOM、CSSOMの が し、deferスクリプトの が すると、DOMContentLoadedイベントがトリガーされます.
asyncとDOMContentLoaded
scriptタグにasyncが まれている 、HTMLドキュメントの は を けません. が すると、asyncスクリプトの 、スタイルシートのロードなどを つことなく、DOMContentLoadedがトリガーされます.
DOMContentLoadedとload
の を り ってみます.
タグ1の い と なもう1 の い があり、 い はloadイベントがトリガーされた を し、 して、 の には、 いタグの「Load:1.60 s」があり、loadイベントがトリガーされた な を しています.
この つの にはどんな いがありますか.このページをクリックすると、 のことがわかります.https://testdrive-archive.azu...
すると、HTMLドキュメントの が するとDOMContentLoadedがトリガーされるので、リソースのロードが するとloadイベントがトリガーされます.
また、jQueryでよく される$(document).ready(function() { // ... ... });は、 にはDOMContentLoadedイベントを し、$(document).load(function() { // ... ... });はloadイベントを しています.
[Bootstrap]7日間Bootstrap(3)CSSレイアウトに深く入り込む
HTML 5ナレッジポイントメモ