HTML をその人の視点から見ると、理解は大きく異なります_html/css_WEB-ITnose

TA は、HTML インタープリタです。

WebKit カーネルの HTML インタープリタの観点から HTML を見てみましょう。 HTML ドキュメントがバイト ストリームから DOM ツリーにどのように段階的に移行するかを理解します。このプロセスを理解することで、フロントエンド開発で中途半端に理解されている多くの問題がよく理解できるようになります。

解釈プロセスの概要

まず、HTML インタープリターはバイト ストリーム (Bytes) を受け取り、それが文字ストリーム (Characters) にデコードされ、次に単語 (Token) に切り出されます。字句アナライザー ) を介してノード (Node) に組み込まれ、最後にこれらのノードが DOM ツリー (ドキュメント オブジェクト モデル ツリー) に組み込まれます。

ほぼすべての言語には同様の「コンパイル」プロセスがあります。各プロセスの特定のコードの詳細を気にする必要はありませんが、各プロセスで何が起こるかを理解する必要があります。

バイトストリーム (Bytes) から文字ストリーム (Characters) へ

さまざまなエディターを使用して HTML 文書を作成する場合、UTF-8、GBK など、使用されるエンコード形式が異なります。これらのエディタの保存は、実際には、エンコード形式を使用して文字ストリームをバイト ストリーム ファイルに保存するプロセスです。これらのエンコード形式を HTML ドキュメント内で指定する必要がある理由は、ブラウザの HTML インタープリタがエンコード形式を正しくデコードできるようにするためです。

デコード ステップは、バイト ストリーム (Bytes) から文字ストリーム (Characters) へのプロセスで発生します。

インタプリタが HTML Web ページで設定されたエンコード形式を見つけると、WebKit は対応するデコーダを使用してバイト ストリームを特定の形式の文字列に変換します。そうでない場合は、デフォルト (UTF-8) がデコードに使用されます。

これで、Web ページの文字化けの問題を解決する方法がわかりました。Web クローラーでは、Web ページの文字化けの問題が頻繁に発生します。

文字ストリーム (Character) から単語 (Token) へ

このプロセスは一般に字句解析と呼ばれ、WebKit のステートマシンを使用して完了します。つまり、文字列を入力して出力します。それぞれの言葉。自然言語処理には、単語セグメンテーションと呼ばれる同様のプロセスがあります。

WebKit では、DOCTYPE、StartTag、EndTag、Comment、Character、EndOfFile の 6 つの単語カテゴリが定義されています。単語の分割後、WebKit はセキュリティ処理も行います。

単語 (トークン) からノード (ノード) へ

次に、Webkit は安全な単語に対して processXXX などのさまざまな関数を呼び出し、単語の 6 つのカテゴリがそれぞれノードに処理されます。

ノードから DOM ツリー (ドキュメント オブジェクト モデル ツリー) へ

他の言語と同様に、構文ツリーは字句解析の結果に基づいて構築され、HTML では DOM ツリーが構築されます。

HTML ドキュメントの Tag タグには、ブラケット マッチングと同様に開始タグと終了タグがあるため、データ構造スタックを使用して DOM ツリーを構築できることは想像に難くありません。興味があれば、1+3*(5-3)...

などの式を計算するプログラムを学ぶことができます。また、タグの終了タグを書き忘れた場合は、 DOM を構築するとき ツリープロセス中に、スタックの機能を使用して、DOM を自動的に埋めることができます。

これでバイトストリームからDOMツリーへのプロセスが完了しました^_^。

もちろん、これは HTML のみを前提としています。

参考書籍：『WebKit Technology Insider』