最初の4人の拷問の魂：何が起こったかのページへのURLを入力して提示についての話？ - アルゴリズムの記事を解析

レスポンスヘッダの場合、ネットワーク要求及び応答の完全な、Content-Type値はtext/html、次のステップは、ブラウザである解析と渲染作業。

まず、のは、以下のステップに分け解決部を、ご紹介しましょう：

構築DOMツリー
样式計算
生成布局树(Layout Tree)

DOMツリーを構築します

ブラウザが理解することができないのでHTML字符串、したがって、このシリーズは、データ構造であり、意味の操作が容易にバイトストリームデータ構造に変換されますDOM树。DOM树それは本質的にあるdocumentマルチツリーのルート。

それはどのような方法でそれを解決するのですか？

自然HTML文法

HTMLの文法ではありません：まず、我々は明確な把握1時を持っている必要があります上下文无关文法。

ここでは、何であるかを議論する必要があります上下文无关文法。

コンピュータサイエンスでは、コンパイラ理論の専門分野、非常に明確な定義があります：

プロダクションルールの形式文法G =（N、Σ、P、S）は以下の形取る場合、W V->を、文脈自由文法と呼ばれます。どのV∈N、w∈（N∪Σ）*。

前記各パラメータにおけるG =（N、Σ、P、S）の意味を説明します。

Nは非終端セット（名前が示すように、あること、それが最後のシンボルではない以下の共感を避けます）。
Σは、ターミネータコレクション。
PはN、即ち、非終端記号に属している必要があり、開始シンボル、です。
Sは異なる作品のコレクションです。S - > ASBのように。

端的に言えば、上下文无关的文法文法のプロダクションすべての残っていること非終端です。

少し無知なラップがある場合は、ここを参照してください、私はあなたが理解することの例を与えます。

例えば：

A -> B
复制代码

この文法は、各生産は非終端残っているだろう、これは上下文无关的文法。この場合、xByそれは可能な法令アウトでなければなりませんxAyの。

ここでは、反例を見るために見てみましょう：

aA -> B
Aa -> B
复制代码

これはそうではありません上下文无关的文法、に直面したときBの時間、私たちは、法令のアウトすることはできません最終的に知っていないA左側または右側があるかどうかに応じて、a存在し、それは文脈依存です。

それがある理由について非上下文无关文法、最初にすべての私たちは、標準のHTML構文に注意を払うに必要な、それはと一致している上下文无关文法、そしてそれが反映することができるよう非上下文无关である標準の構文ではありません。ここで私は証明するためにただ一つ反例を取ります。

例えば、パーサがスキャンするform際にラベルを文脈自由文法のアプローチが直接対応した形状のDOMオブジェクトを作成することですが、実際のシーンHTML5はそうではありません、パーサは見ていきますformと、コンテキストform親タグラベルはform、その後スキップ現在のformラベルを、または単にDOMオブジェクトを作成します。

従来のプログラミング言語は文脈自由ますが、HTMLの反対は、それが正確である非文脈自由、特性を決定しHTML Parser、完全に従来のプログラミング言語パーサを使用しないように、異なるアプローチが必要です。

解析アルゴリズム

HTML5の仕様では、アルゴリズムを解析し、詳細に説明します。このアルゴリズムは2つの段階に分かれています。

トークン化。
実績。

二つの対応するプロセスです字句解析と構文解析。

トークン化アルゴリズム

アルゴリズムの入力HTML文本、出力はHTML标记、となっているマーカ生成。ここでの使用有限状態マシンが自動的に達成します。すなわちときに、現在の状態は、一個の以上の文字を受け、次の状態に更新されます。

<html>
  <body>
    Hello sanyuan
  </body> </html> 复制代码

単純な例をあなたに示すため标记化のプロセスを。

出会い<、状態フラグがONになっています。

受信[a-z]文字を入力しますタグ名のステータスを。

この状態は、遭遇するまで維持され>、記録の名前を示すマークが完了し、このときにデータ状態を。

次の出会いのbodyラベルは、同じプロセスを実行します。

この時間htmlとbodyマークは良いが記録されています。

今<身体>の>、入力したデータの状態を受信した文字を保持しているので、その背後にある状態ハローサンユアン。

でその後</ BODY>を受け取る<バックフラグがオンになって、次の受信する/時作成後、end tagトークンを。

そして、入力したタグ名の状態を、会っ>バックにデータ状態。

同じ処理スタイル</ body>の続きます。

実績アルゴリズム

前に述べたように、DOMはと木であるdocumentマルチ・ツリーのルート。そのため、パーサは、最初に作成されdocumentたオブジェクトを。タグ生成器タグは、それぞれに情報を送信する寄与ユニット。寄与装置は、それぞれタグを受信すると、あろう対応するDOMオブジェクトを作成します。この作成DOM对象ポストは、2つのことを行います。

されるDOM对象DOMツリーに追加。
対応するタグを格納する開口部（とに押圧される闭合标签対応する平均）スタック内の要素。

以下の例を取る、と彼は言いました：

<html>
  <body>
    Hello sanyuan
  </body> </html> 复制代码

まず、状態がされた状態を初期化します。

送信されたタグ生成の受信htmlタグを、今度は状態となり、HTMLの状態の前に。作成しながら、HTMLHtmlElementDOM要素を、それに添加されるdocumentルート・オブジェクト、およびプッシュ操作。

そして、これは自動的にヘッドの前に、この時点では、マーカ発生器からそこに来てbody、表されていないhead、この時間貢献がされて自動的に作成HTMLHeadElementとに加えますDOM树。

今すぐに行く頭の中で、状態、その後に進んで後頭。

今トークナイザ来てbody作成し、数字をHTMLBodyElementがさに挿入され、DOMマーク・スタックを押して、開いている間、木。

次の状態が変更されたボディに、次に続く一連の文字を受信：こんにちはサンユアンが。あなたが作成する最初の文字の受信テキストノードと前記文字が挿入され、テキストの DOMツリーにノードをbody元素以下に。添付されます文字バック受信してテキストノード上を。

さて、トークナイザのオーバーパスbodyに終了タグ、後の身体の状態。

トークナイザオーバー最後のパスhtmlに終了タグ、本体の後の後の状態、分析処理終了を示します。

フォールトトレランス

言及したHTML5仕様は、それが強いだろうトレランス政策を我々ものの混合、耐障害性が非常に強いです、が、私は先輩のフロントエンドエンジニアとして、それを知ることが必要であると考えHTML Parser、フォールトトレランスで物事を行われていたもの。

次は、フォールトトレラントの古典的な例のいくつかではWebKitのある、我々は他の追加することも歓迎があることがわかりました。

使用して、代わりに</br> <BR>

if (t->isCloseTag(brTag) && m_document->inCompatMode()) {
  reportError(MalformedBRError);
  t->beginTag = true;
}
复制代码

すべてが<BR>フォームを置き換えます。

離散フォーム

<table>
  <table>
    <tr><td>inner table</td></tr> </table> <tr><td>outer table</td></tr> </table> 复制代码

WebKitそれは自動的に変換されます。

<table>
    <tr><td>outer table</td></tr> </table> <table> <tr><td>inner table</td></tr> </table> 复制代码

ネストされたフォーム要素

この時間は、単に内部に無視しますform。

スタイルコンピューティング

CSSスタイルについて、そのソースは、一般的に、3つのタイプであります：

リンクラベルの参照
スタイルタグのスタイル
要素のインラインスタイル属性

書式スタイルシート

まず、ブラウザがされた後、直接そのためのレンダリングエンジンは、CSSテキストまず最初は、オブジェクト指向の構造、すなわちのstyleSheetsに変換することで受信、テキストのCSSスタイルを識別しません。

書式設定プロセスがあまりにも複雑になっているが、異なるブラウザが異なる最適化戦略を持っているため、そこに行われていません。

可能なブラウザコンソールでdocument.styleSheets、最終的な構造を見ること。もちろん、このような構造は、CSSこれら3つの情報源が含まれている以下のオペレーティング・スタイルの基盤を提供します。

標準のスタイルプロパティ

いくつかのCSSスタイル値を容易にレンダリングエンジンによって理解されていないが、それは彼らの標準パターンの計算の前に必要である、などem- > px、red- > #ff0000、bold- > 700などが挙げられます。

各ノードの特定のスタイルを計算します

スタイルとなっている格式化と标准化、あなたは、各ノードの固有のスタイル情報を計算することができ、。

実際には、計算方法は、主に二つのルール複雑ではありません：継承をして積み重ねられました。

それぞれの子は、親ノードが見つからない場合は、とも呼ばれる、ブラウザのデフォルトのスタイルを使用する、デフォルトのスタイル属性の親ノードを継承しますUserAgent样式。これは非常に簡単に理解するために、継承ルールです。

そして、ルールが積層され、CSS最大の特徴は、究極の効果でその層状の性質は、各属性の相互作用の様式、奇妙な階層化現象のさえ多くに依存している、読んで「世界でCSSを、」学生は、この深いを持っている必要があります経験、特定のCSSカスケーディング規則は、詳細な言語のカテゴリに属し、あまりそこに導入されていません。

しかし、それはスタイルを計算した後、すべてのスタイル値がへに掛けされることは注目に値するwindow.getComputedStyleのスタイルは非常に便利な、JSを計算することによって得ることができた後、ある彼ら、。

レイアウトツリーを作成します。

今、それが生成されているDOM树とDOM样式、次にする事は、ブラウザのレイアウトシステム経由で确定元素的位置生成することで、布局树（レイアウトツリー）。

次のようにレイアウトツリーが実質的に生成：

ノードによって生成されたDOMツリーをトラバースし、それらを追加します布局树中。
レイアウトツリーノードの座標位置を算出します。

特に、レイアウトツリーツリー値がため目に見える要素含めるheadラベルセットとdisplay: none要素がそれに入れされることはありません。

いくつかの発言は、第一世代ますRender Tree木をレンダリングする、である、実際には、これは16年前のことですが、現在はChromeチームは、改造の多くを行っており、生成されていないRender Treeのプロセスを。情報ツリーのレイアウトはとの完全な、非常に完璧されているRender Tree機能。

それはあまりにも複雑になるので細部のレイアウトは、話さない理由は、1件の記事があまりにも肥大化したと思われる導入が、ほとんどの場合、我々は唯一の行われる作業があることを知っている必要があるものです、あなたが知っている、綿密な原理を、したいことができる場合それは、実行する方法を、私は非常には、すべての記事FEDチーム読んで行くお勧めしますどのようにブラウザのレイアウトのレイアウトを確認するためにクロムのソースコードからを。

概要

このセクションの主なコンテキストを櫛：