面接問題CRP

Critical Rendering Path

まず一般的なCRPプロセスについてお話しします.

CRPについて話す前に、まず概念をつかんでください.

1.CRPの概念を理解する

1-1. DOM

DOM(DOCUMENT OBJECT MODEL)は、ドキュメントオブジェクトモデルツリーが完全に分離されたHTMLページであることを示す.
簡単です.開発者ツールでDOMを表示できます.このDOMは、ブラウザ内のHTMLレンダリングエンジンによって分割され、上から下への構文解析が行われます.これらの構文解析はすべて完了し、HTMLファイルはDOMです.DOM이 CSSOM과 다른점은 부분적으로 문서를 로드할 수 있다는 점.

1-2. CSSOM

CSS(CSS OBJECT MODEL)は、DOMに関連するスタイルのオブジェクトを表します.CSSは[レンダリングをブロック](Black Render)リソースとして扱われ、完全に解析されていない場合は[レンダリングツリー](Render Tree)を構築できません.즉 DOM과 달리 완전히 CSSOM이 만들어질때까지 렌더트리에 포함되지 않는다.一方向:lanscapeなどのアトリビュートを持つスタイルでは、このアトリビュートはこのアトリビュートにのみ適用されるため、レンダリング禁止とはみなされません.つまり、現在のデバイスに適用されている場合にのみ、レンダリング禁止とみなされます.
また、CSS는 스크립트차단 리소스가 될 수 있다.は、レンダリングエンジンがjavascriptを実行する構文に達すると、レンダリングエンジンがjavascript実行タイプエンジンとして機能するためである.왜냐하면 브라우저는 싱글쓰레드이기 때문에 JavaScriptファイルをダウンロードして実行するまでDOMおよびCSSOMは実行されません.따라서 자바스크립트소스는 가장 마지막에 참조되는 것이 좋다どうせJavaScriptがdomを操作したいならdomとcssomがなければ正常に動作しない...
ただし、dom操作を行わないスクリプトの場合、最上位レベルの場合がありますが、ご存知のように、スクリプトセクションの構文解析を行った場合、ダウンロードおよび実行前にレンダリングエンジンは何も実行しません.

1-3. javascript

JAvascriptは파서차단 리소스です.これは、JavaScriptがHTMLドキュメント自体の区分分析をブロックするためです.解析器がタグに到達したときに運転を停止します.ただし、asyncプロパティを適用すると、非同期ロードが可能になります.

<script async src="script.js">

2.CRPプロセス

図示のように、サーバからhtmlを受信すると、レンダリングエンジンからDOMが生成されるが、区別解析を開始すると、CSS、JSに関連する構文に遭遇すると、DOMレンダリングは各実行が終了するまで停止し、DOM構築が完了する.
次のコースはリンクから抜粋します.とてもよく整理されています
レンダーツリーはDOMとCSSOMの組み合わせです.最終的にページでレンダリングする内容を表すツリー.可視部分にのみ適用され、display:noneなどの非可視部分は含まれない.

2-1. DOMの作成

ブラウザはhtmlの元のバイトをファイルで指定された符号化に従って単一の文字に変換します.

ブラウザは、文字列をw 3 c html 5規格で指定された一意のタグに変換します.

これらのトークンはノードオブジェクトに変換される.

これらのノードオブジェクトはDOMツリーによって生成されます.

2-2. CSSOMの作成

CSSOMはDOMと同じプロセスで変換される.

2-3. レンダーツリー(Render Tree)

生成されたDOMはCSSOMと出会い、レンダリングツリーを生成します.つまり、レンダーツリーには、画面上のすべてのノードの内容とスタイル情報が含まれます.
これにより、レンダーツリーで完了したプロシージャは、コンストラクションセクションの後のステップと操作セクションに分割されます.

2-4. Layout(Reflow)

レンダーツリーでは、ノードとノードのスタイルのみが計算されます.Layoutは画面に表示されるノードの正確な位置とサイズを計算します.

2-5. Paint, Rasterize, Composite Layer (Repaint)

その後、以下の手順で画面出力を完了します.

3.視覚的要因の変更

ユーザの画面が変化すると、以下の3段階に分けられる.
3-1. レイアウト(width、height、left、topなどのlayout属性)に影響するスタイル属性が変化すると、
スクリーンはロールバック(最悪...)修行するこれは、レンダーツリーを作成した後に手順を繰り返すことを意味します.
js > style > layout > paint > composition
3-2. レイアウトに影響しない背景画像、テキスト色シャドウなどpaintプロパティのみを変更する場合
画面はlayoutをスキップして、以下のようにします.
js > style > paint > composition
3-3. レイアウトと塗りつぶしのプロパティを変更しない場合は、
layout、paintの手順をスキップし、次の操作を行います.
js > style > composition

4.ナビゲーションタイミング

Navigation Timing APIは、Webサイトのパフォーマンスをテストするために使用できるデータを提供します.

// 로딩시간 측정법
function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

// 어떤 페이지를 로딩하는데 필요한 전체 시간 계산하기
var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

// 요청 응답 시간 계산하기.
var connectTime = perfData.responseEnd - perfData.requestStart;

processing

domLoadingブラウザは、最初に受信したHTMLドキュメントバイトのグループ化を開始しようとしています.

domInteractiveブラウザはパーティション化を完了しました.つまり、DOMが準備完了しました.
解析器がJavaScriptをブロックしていない場合、DOMContLoadedイベントはDOInteractiveの後に発生します.

domContentLoadedDOMは準備が整い、スタイルシートがなくてJavaScriptの実行を阻止します.すなわち、DOMおよびCSSOMを有するレンダリングツリーを作成することができる.
多くのJavaScriptフレームワークは、自身の論理を実行する前にこのイベントを待っています.

domCompleteページとそのサブアイテムのすべてのリソースが準備されています.
名前に示すように、すべての処理が完了し、ページ上のすべてのリソース(画像など)のダウンロードが完了しました(たとえば、ロードスクリューが回転を停止します).

Load

loadEvent各ページのロードの最後のステップは、ブラウザが他のアプリケーションロジックをトリガーできる場合にonloadイベントを起動することです.

コメントリンク

adding-interactivity-with-javascript

重要なレンダーパスについて

CRP

CRP

Navigation Timing

かんりゅうを減らす