DOMContentLoadedとloadの違い



Difference Between Domcontentloaded



この記事は以下から複製されています: https://www.cnblogs.com/caizhenbo/p/6679478.html 共有してくれてありがとう

DOMContentLoadedとloadの違い
画像

(1)Chromeブラウザの開発プロセスでは、ネットワークリクエストのマーキングラインに対応するこれらの2つの値がネットワークパネルに表示されます。これらの2つの時間値は何を表していますか?



(2)cssが先頭に配置され、jsファイルが最後に配置されることを繰り返し強調しました。これは、ページのパフォーマンスを最適化するのに役立ちます。この方法でパフォーマンスを最適化できるのはなぜですか?

(3)jqueryを使用する場合、通常、readyメソッドで関数呼び出しを記述します。原則は何ですか?



初見

名前が示すように、DOMContentLoadedは、DOMコンテンツがロードされることです。では、ロードされたDOMコンテンツは何ですか? Webページを開くことから始めましょう。 URLを入力すると、最初はページ表示が空白になり、しばらくするとページにコンテンツが表示されますが、画像リソースなど、ページの一部のリソースが表示されません。このとき、ページは通常の操作になります。しばらくすると、画像が完成した後、ページに表示されます。 DOMContentLoadedイベントは、ページの空白からページコンテンツの表示まで発生します。そして今回は、HTMLドキュメントがロードされて解析されます。

この時点で、問題が再び発生します。ロードおよび解析されるHTMLドキュメントは何ですか。この問題を解決するには、ブラウザのレンダリング原理を理解する必要があります。



ブラウザのアドレスにURLを入力すると、ブラウザはサーバーにリクエストを送信します。サーバーは、要求されたHTMLドキュメントをブラウザに送り返します。ブラウザがドキュメントをダウンロードすると、上から下への解析が開始されます。解析が完了したら、DOMを生成します。ページにcssがある場合、CSSOMはcssのコンテンツに従って形成され、DOMとCSSOMはレンダリングツリーを生成します。最後に、ブラウザはレンダリングツリーのコンテンツに従ってページ内の各ノードの正確なサイズと位置を計算し、それを描画します。ブラウザ上。

https://images2015.cnblogs.com/blog/746387/201704/746387-20170407181220066-2064922697.png

以下は、ページの読み込みと解析中のブラウザのスナップショットです。

画像
上記では、htmlの解析プロセスで、javascriptがdomの解析をブロックするため、htmlの解析が中断されることがわかりました。解析中に発生しました

同時に、javascriptの実行は、ラベルの前にあるスタイルファイルの影響を受けます。ラベルの前にスタイルファイルがある場合、スクリプトはスタイルファイルがロードされて解析された後に実行されます。これは、javascriptがオブジェクトのスタイルを照会できるためです。

ここで注意すべきことの1つは、最近のブラウザーでは、推測プリロードを使用してレンダリングのブロックを遅くしていることです。解析がブロックされると、ブラウザーには軽量のHTML(またはCSS)スキャナーが搭載され、ドキュメントのスキャンを続行し、将来利用できる可能性のあるリソースファイルのURLを探し、レンダラーで使用します。前にダウンロードしてください。

ここでは、DOMContentLoadedによって計算される時間を指定できます。ドキュメントにスクリプトがない場合、スクリプトにスクリプトが含まれていると、ブラウザはドキュメントの解析後にDOMContentLoadedイベントをトリガーできます。スクリプトはドキュメントの解析をブロックし、スクリプトはスクリプトの前で待機する必要があります。 cssは、実行する前にロードされます。いずれの場合も、DOMContentLoadedのトリガーは、画像などの他のリソースがロードされるのを待つ必要はありません。

次に、ロードについて説明します。ロードイベントがトリガーされる前に、ページ上のすべてのリソース(画像、オーディオ、ビデオなど)がロードされます。簡単に言うと、ページのロードイベントは、DOMContentLoadedがトリガーされた後にトリガーされます。

jQueryでよく使用する$(document).ready(function(){// ... code ...})は、実際にはDOMContentLoadedイベントであり、$(document).load(function(){//。。 .code ...})リスナーはloadイベントです。 jqueryを使用する場合、通常、関数呼び出しはreadyメソッドで記述します。ページが解析された後、ページ全体のすべてのdom要素にアクセスできます。これにより、ページのインタラクティブ時間を短縮し、ページ全体のエクスペリエンスを向上させることができます。

これら2つの関数を実装する方法を見てみましょう。

1、onloadイベント

onloadイベントはすべてのブラウザでサポートされているため、呼び出すだけで互換性は必要ありません。

window.onload = function(){ }

2、DOMContentLoadedイベント

DOMContentLoadedのブラウザーが異なれば、サポートも異なるため、実装する際には、ブラウザーとの互換性が必要です。

1)DOMContentLoadedイベントがサポートされている場合、DOMContentLoadedイベントが使用されます

2)IE6およびIE7はDOMContentLoadedをサポートしていませんが、onreadystatechangeイベントをサポートしています。このイベントの目的は、ドキュメントまたは要素の読み込みステータスに関する情報を提供することです。

  1. 下位IEには、intervalによって呼び出される一意のメソッドdoScrollもあります。document.documentElement.doScroll( 'left')

DOMがロードされているかどうかを検出できます。ページがロードされていない場合、doScrollがエラーを報告しなくなるまで、メソッドはエラーを報告します。これは、DOMがロードされたことを意味します。このメソッドは、DOMContentLoadedの実装に近いものです。

function ready(fn){ if(document.addEventListener) { document.addEventListener('DOMContentLoaded', function() { document.removeEventListener('DOMContentLoaded',arguments.callee, false) fn() }, false) } // If IE else if(document.attachEvent) { // Make sure that the event is still safely triggered when the page is loaded in an iframe document.attachEvent('onreadystatechange', function() { if(document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee) fn() } }) // If it is IE and the page is not in the iframe, polling calls the doScroll method to check if the DOM is loaded. if(document.documentElement.doScroll && typeof window.frameElement === 'undefined') { try{ document.documentElement.doScroll('left') } catch(error){ return setTimeout(arguments.callee, 20) } fn() } } }

最後に、この質問に答えましょう。なぜ繰り返しcssを頭に置き、jsファイルを最後に置くのですか?

インタビューの過程で、回答ページの最適化でjsがbodyタグの下部に配置されるとよく​​言われます。その理由は、ブラウザがDomツリーを生成するときに、HTMLコードが1行ずつ読み取られ、スクリプトタグが最後に配置されるためです。前のページのレンダリングには影響しません。次に問題が発生します。 Domツリーが完全に生成された後にページをレンダリングできるため、ブラウザーは完全なHTMLを読み取って完全なDomツリーを生成する必要があります。 domツリーを生成する必要があるため、スクリプトタグは本文の下部に配置されません。ドキュメント全体が解析されます。

画像

ページレンダリングプロセス中のクロムを見てみましょう。緑のマーカーラインはファーストペイントの時間です。ナニ、なぜfirstpaintが表示されるのですか、レンダリングツリーが生成された後ではないのですか?実際、ユーザーエクスペリエンスを向上させるための最新のブラウザーでは、レンダリングエンジンは、できるだけ早くコンテンツを画面に表示しようとします。すべてのHTML解析がレンダリングツリーの構築とレイアウトを開始するまで待機しません。コンテンツの一部が解析されて表示されます。言い換えれば、ブラウザは不完全なdomツリーとcssomをレンダリングして、白い画面の時間をできるだけ早く短縮することができます。ヘッダーにjsを配置すると、jsはdomの解析をブロックし、domの内容がFirst Paintに影響を与え、FirstPaintが延期されます。したがって、最初のペイントの時間を短縮するためにjsを置きますが、DOMContentLoadedがトリガーされる時間を短縮することはありません。