html ファイルは、html タグが書き込まれる前の txt テキストと同じ性質であり、スタイルはありません。プレーン テキストのプレビュー ファイルのみ。html タグが追加されると、コンテンツにセマンティクスがあることを意味します。ブラウザのレンダリング エンジンは、タグのセマンティクスに従って解析を開始します。
Webkit コア作業プロセス
ブラウザーのレンダリング エンジンは、コード (HTML、CSS、JS を含む) を上から下に実行し、HTML を解析して DOM ツリーを生成し、CSS コードを解析して CSS ルール ツリーを生成し、DOM ツリーと CSS ルール ツリーをマージしてレンダリングを生成します。 to request some other resources, so the render engine will do a lot of things at同時に, and can't wait to render the content. コードビハインドが以前のスタイルを変更すると、リフローと再描画が発生します.
レンダー ツリーが生成された後、レイヤー レイアウトが計算されます. このステップでは、すべての要素の相対的な位置とサイズの情報が計算され、ページ レイヤーがピクセルに変換されます. 最後に、すべてのレイヤーが統合されてページが取得されます.
レンダリング エンジンの基本的なワークフローを要約します。
- HTML を解析して DOM ツリーを構築する
- レンダリング ツリーの構築
- レンダリング ツリー レイアウト
- レンダリング ツリーを描画する
レンダリング エンジンは HTML ドキュメントを解析し、タグをコンテンツ ツリーの DOM ノードに変換します。外部ファイルからスタイル要素とスタイル データを解析します。HTML のスタイル データと表示コントロールを一緒に使用して、別のツリー (レンダリング ツリー) を作成します。レンダリング エンジンは、できるだけ早くコンテンツを表示しようとします。すべての HTML が解析されてレンダリング ツリーが作成およびレイアウトされるまで待機しません。後続のコンテンツを処理しながら、処理された部分的なコンテンツを最初に表示します。
分析する
ドキュメントの解析とは、コードで使用する意味のある構造にドキュメントを変換することを意味します。解析の結果は通常、ドキュメントを表すノードのツリーであり、解析ツリーまたは構文ツリーと呼ばれます。
通常、パーサーは作業を 2 つのコンポーネント (ワード ブレーカーとパーサー)に分割します。単語セグメンテーション プログラムは、入力を正当な記号シーケンスに分割する役割を担い、構文解析プログラムは、文書構造を分析し、構文規則に従って構文ツリーを構築する役割を果たします。
- lexer は、スペース、改行などの余分な文字をフィルタリングする方法を知っています。
- パーサーによって出力されるツリーは、DOM 要素と属性ノードで構成されます。DOM の正式名称は、Document Object Model です。これは、HTML ドキュメントのオブジェクト記述であり、HTML 要素と外部世界 (Javascript など) の間のインターフェースでもあります。
次のタグのように、DOM とタグの間にはほぼ 1 対 1 の関係があります。
次のような DOM ツリーに変換されます。
分析アルゴリズム
HTML は、通常のトップダウンまたはボトムアップの方法を使用して解析することはできません。主な理由は次のとおりです。
- 言語自体の「寛容」な特徴
- HTML 自体が壊れている可能性があり、一般的なものについては、ブラウザーはそれらをサポートするための従来のフォールト トレラント メカニズムを備えている必要があります。
- 解析プロセスを繰り返す必要があります。他の言語の場合、ソース コードは解析プロセス中に変更されませんが、HTML の場合、script 要素に含まれる document.write() メソッドなどの動的コードは、ソース コードにコンテンツを追加します。つまり、解析プロセスです。入力内容を実際に変更する
一般的な解析手法を使用できないため、ブラウザーは HTML の解析専用のパーサーを作成しました。解析アルゴリズムは、HTML5 標準仕様で詳細に説明されており、アルゴリズムには主にトークン化とツリー構築の2 つの段階があります。
トークン化は、入力を一連のトークンに解析します。HTML の記号は、開始タグ、終了タグ、属性名、および属性値です。トークナイザーはこれらのトークンを認識し、ツリー ビルダーにフィードします。ツリー ビルダーは、入力の最後まで次のトークンの分析と処理を続けます。
解析ブロッキング
HTML ドキュメントを解析する過程で、link タグの外側に css ファイルが見つかります.この時点で、css ファイルが要求されて解析されますが、HTML ファイルの解析の最初のステップはブロックされません.
ただし、HTML を解析するときに、リンク タグの外側の js ファイルまたはスクリプト内の js コードに遭遇すると、HTML ファイルの解析が停止します。
JS ファイルを解析するプロセス:
- ブラウザは js コードを要求して返しますが、この時点で HTML ファイルの解析は停止します。
- ただし、CSS ファイルの解析は停止しないため、CSSOM ツリーが構築され、
- CSSOM ツリーの構築時に、返された js ファイルは実行されず、CSSOM ツリーが構築された後にのみ JS ファイルが実行されます。
JS ファイルが実行された後、HTML は引き続き解析され、DOM ツリーが構築されます。
外部JSの種類
外部 JS は、共通型、組み込みの defer 属性、および組み込みの async 属性の 3 つのタイプに分けることができます。
1.普通タイプ
通常、外部 JS ファイルはスクリプト タグを介してインポートされます。デフォルトは同期読み込みです。つまり、js ファイルの実行後も、次の HTML コードが引き続き実行されます。ブラウザが <script> タグを解析すると、js エンジンによって実行され、script タグに含まれるコンテンツは解析されず、</script> タグが終了します。
<script src='abc'>console.log('1111')</script>
//不会输出1111ページには 2 つの配置があり、1 つ目は head タグ内にあり、2 つ目は body タグの下部、</body> の前にあります。
head タグ内: head タグ内のすべての js コードが最初にダウンロードされ、次に body タグ内の HTML コードが解析されます. js ファイルが多すぎると、ブラウジングが短時間で空白で表示され、ユーザーエクスペリエンスが良くない
body タグ内: これは html コードの解析には影響しませんが、js に依存する一部の Web ページでは遅くなります。
したがって、最善の方法は、解析とダウンロードを同時に行うことです
2. defer属性付き
defer属性：HTMLを解析しながらjsファイルをダウンロードし、ダウンロード後にシーケンスに入れ、DOMツリーが作成された後に実行する
外部のdefer jsファイルが複数ある場合は必ず書いた順番で実行され、DOMContentLoadイベントの前に実行しなければならないので注意順を導入
3. async属性付き
async 属性: HTML の解析中に js ファイルをダウンロードし、ダウンロードが完了したらすぐに実行し、実行中は HTML コードの解析をブロックします
複数の外部非同期jsファイルがある場合、どれが最初にダウンロードされ、最初に実行されるか、必ずしも書き込み順ではない