サーバから応答メッセージを受信して解析ページに行きます.

URLを入力してページにロードします.サーバから応答メッセージを受信して、解析ページに届きます.
HTML解析、DOM構築
HTMLからDOMを構築するまでのプロセスは以下の通りです.
Bytes(バイトストリーム)→characters(キャラクタストリーム)→tokens(次元)→nodes(ノードオブジェクト)→DOM(ドキュメントオブジェクトモデル)
全体の過程は大体次の通りです.

1.Conversion  :        HTML  (Bytes)                  (characters)
2.Tokenizing  :      HTML                 token.  token              
3.Lexing    :  token       ,                
4.DOM  :          ,    DOM 

CSS生成ルール
DOM構築のプロセスと類似している.
Bytes(バイトストリーム)→characters(文字ストリーム)→tokens(次元)→nodes(ノードオブジェクト)→CSSOM(パターンテーブルオブジェクトモデル)
レンダリングツリーとレンダリングの構築
DOMとCSSOMがあると、両方が対応して組み合わせられます.しかし、例えば、いくつかのdisplay: noneの要素がレンダリングツリーに生成されない.
レンダリングの大まかな流れは以下の通りです.

1.  CSS  
2.     
3.      ,  ,         
4.    

リフローとリフロー

LayoutはReflowとも呼ばれ、すなわち還流します.一般的には、要素の内容、構造、位置、サイズが変化し、パターンを再計算してレンダリングツリーを生成する必要があります.

Repaintは、再描画となります.元素の変化は元素の外観などに影響を与えるだけという意味です.この元素を新たに描き直すだけでいいです.

リフローのコストはリフローより高く、最適化方式ではリフローを一般的に避ける.

1.        ，          。
2.      dom，      documentFragment，   DOM         。
3.      Offset   ，         。
4.               ，       。

loadedとDOMContent Loaded

DOMContentLoadedイベントがトリガされたとき、DOMロードが完了したときだけ、スタイルテーブルを含んでいない、画像

.

ロードイベントがトリガされた時、ページ上のすべてのDOM、スタイルテーブル、シナリオ、画像は全部ロードされました.

.
締め括りをつける
上記に続くと、ブラウザがサーバの応答メッセージを受信すると、まずHTML解析を行い、バイトストリームを定義された符号化フォーマットを通じて文字ストリームに変換し、HTML仕様に従って文字分類を行い、各文字には自分の属性とルールがあり、最後に次元送り詞法を解析してノードオブジェクトを生成し、ノードオブジェクトをDOMツリーに構成する.このとき、JS外部チェーン要求に出会うと、DOMツリーの生成がブロックされ、CSSとピクチャの外部チェーンに出会うと、そのブロックに影響がありません.
DOMを解析したらDOMContentLoadedイベントが発生します.
CSSの解析手順はDOMと同じで、CSSスタイルを計算したら、両者は組み合わせてレンダリングツリーを生成し、レンダリングツリーは画像の描画を行います.この時、すべてのファイルがロード済みであれば、loadedイベントをトリガします.
以下はJS解釈エンジンのトリガを待ちます.
前篇