インフラストラクチャからもブラウザの主なゲームで見ることができるレンダリングエンジンに実際にある、多くのページの互換性の問題のルートは、ここから来ることができると言うことができます。 360ブラウザHTML5のスコアは再び、UIとインタラクションとはどのように異なる、カーネルはまだ同じです。さて、そのレンダリングエンジンに深くそれを詳しく見てみましょう。
レンダリングエンジンの簡単な説明
レンダリングエンジンの役割は、文字通り、サーバーから返されたHTML、XML、またはIMAGESをレンダリングし、エンドユーザーに表示することです。この章では、レンダリング エンジンの主な機能である、CSS スタイルの HTML とイメージの結果をレンダリング エンジンで表示することに焦点を当てます。
Webkitはオープンソースのレンダリングエンジンで、最初はlinuxプラットフォームでしか使えませんでしたが、後にアップル社がソースコードを拡張してmacやwindowsプラットフォームでも動くようにしました。webkitはmacとwindowsのプラットフォームで動作し、chromeはそれを拡張し、普及させ、標準的なレンダリングエンジンとしてますます普及しています。
基本的なレンダリングプロセス
レンダリング処理は、ユーザーが要求したリソースがブラウザのネットワーク レイヤーを通じてレンダリング エンジンに到達した時点で開始されます。ドキュメントは通常、一度に8K以下のブロックでレンダリングされ、基本的なレンダリングプロセスは次の図のようになります。
レンダリング エンジンは、まず HTML ドキュメントを解析して DOM ツリーに変換します。次に、CSS スタイルがインライン、アウトライン、埋め込みにかかわらず解析され、DOM ツリーをレンダリングするために使用される別のツリー、つまりレンダー ツリーがレンダリングされます。レンダー ツリーには、色、サイズなどの表示属性を持つ長方形が、表示と同じ順序で含まれます。次に、レンダー ツリーの各ノードをレイアウトして、画面上のどこに表示するかを決定します。*** これは、レンダー ツリーをトラバースして、前の章で説明したUIバックエンド レイヤーを使用して各ノードを描画することによって行われます。
上記のステップは段階的なプロセスであり、ユーザー体験を向上させるために、レンダリングエンジンは結果をできるだけ早くエンドユーザーに表示しようとします。レンダー ツリーを作成してレイアウトする前に、すべての HTML が解析されるまで待つことはありません。レンダリングエンジンは、ウェブレイヤーからドキュメントコンテンツをフェッチしている間に、すでに受け取った部分的なコンテンツを最初に表示します。
レンダリングエンジンごとに異なる具体的なレンダリングプロセス
上記は、レンダリングエンジンの一般的な処理の流れを紹介したもので、レンダリングエンジンによっては固有の手順が異なる場合がありますが、一般的な webkit と gecko を例に挙げて説明します。
まず、webkit の詳細なレンダリング処理です。
Firefox やその他のブラウザの gecko レンダリングプロセス。
上記の2つの写真から、2つは異なる「用語」を使用していますが、写真から見ることができるように、2つのレンダリングプロセスは類似していると言うことができます、それはここで具体的なプロセスを分離することができ、次の4つの章では、より詳細な説明のための4つの主要なレンダリングプロセスに基づいています。
