まず、歴史
- 2003年に、AppleはWebKitのコアを使用して、Safariブラウザをリリース
- 2005年には、オープンソースのWebKitこと。
- 2008年には、Google、WebKitをベースクロム、Chromeを作成したとに基づいて、それを公表
第二に、レンダリングエンジン
レンダリングエンジンは、それがプロジェクトをレンダリングし、表示するページのレンダリングの重要な一部であり、まだモジュールを完了するために、多くの作業に依存する必要があります。例えば、初めに協力し、ネットワークモジュール、負荷およびクロス行ってレンダリングする必要性をレンダリングするとき。HTMLインタプリタ、CSSの通訳、レイアウトモジュール、およびJavaScriptインタプリタ：レンダリングエンジンには4つの部分を含んでいます。
- HTMLインタプリタ：HTML DOMツリーを解釈します。
- CSSの解釈：DOM内の各計算要素のスタイル情報は、レイアウト操作のための基礎を提供します。
- レイアウト：タイプセットに応じてさまざまなリソースは、最終的な画像の結果を取得します。
- DOM操作：通訳JS。
ここでは、簡単な図に何ページのレンダリング処理を表現します：
网页内容一开始，可能需要网络模块进行获取，并使用存储模块进行缓存。因此，可能会使用网络模块，使用虚线表示，其他虚线用处相同。网页内容先通过 HTML解释器解析出DOM树，该DOM直到网页销毁前会一直存在。在解析过程中可能会遇到css代码，使用css解释器对其进行解析，将对应的元素进行计算和渲染。遇到异步的JS，会停止构建，直到加载并执行完JS代码后再继续构建。 在HTML、CSS、JS解释执行完毕后，会进入一个内部表示的状态，每个元素此时都是一个拥有样式的独立个体，然后通过调用布局、绘制，将页面进行组装，并且替换之前的占位内容，使用相应的加载器进行绘制。最终生成图像展现给用户。
第三に、成層
渲染出来的页面一般会放在一个渲染层上，但在有`<video>、<audio>、<canvas>`等媒体标签会建立新的渲染层进行单独渲染。主要是浏览器对其进行数据交互更为方便，效率更高。当然，css进行动画操作时也会触发这种建立新渲染层的机制。 我们可以通过对Chrome中的 `More Tools > Rendering > Layer border`打钩，进行渲染图层的展示。测试代码如下：
<html>
<body>
<div style=“-webkit-transform: rotateY(30deg) rotateX(-30deg); width: 200px;”>
I am a strange root.
</div>
</body>
</html>結果は以下の通りであります：
