WebKit introduction (a) page rendering

First, history

In 2003, Apple released Safari browser, using the WebKit core
In 2005, WebKit be open source.
In 2008, Google WebKit-based, created Chromium, Chrome and published it on the basis of

Second, the rendering engine

The rendering engine is a key part of rendering pages to show, it rendered the project, still need to rely on a lot of work to complete the module. For example, in the beginning when rendering the need to cooperate and network modules, load and render cross conducted. Rendering engine includes four parts: HTML interpreter, CSS interpreter, layout module, and JavaScript interpreter.

HTML interpreter: to interpret the HTML DOM tree.
CSS interpreter: style information of each computing element in the DOM, provide the basis for a layout operation.
Layout: The various resources according to typeset, to get the final image result.
JS interpreter: the DOM operations.

Here with a simple diagram to represent what page rendering process:

    网页内容一开始，可能需要网络模块进行获取，并使用存储模块进行缓存。因此，可能会使用网络模块，使用虚线表示，其他虚线用处相同。网页内容先通过 HTML解释器解析出DOM树，该DOM直到网页销毁前会一直存在。在解析过程中可能会遇到css代码，使用css解释器对其进行解析，将对应的元素进行计算和渲染。遇到异步的JS，会停止构建，直到加载并执行完JS代码后再继续构建。
    在HTML、CSS、JS解释执行完毕后，会进入一个内部表示的状态，每个元素此时都是一个拥有样式的独立个体，然后通过调用布局、绘制，将页面进行组装，并且替换之前的占位内容，使用相应的加载器进行绘制。最终生成图像展现给用户。

Third, stratified

  渲染出来的页面一般会放在一个渲染层上，但在有`<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>

Results are as follows:

WebKit introduction (a) page rendering

First, history

Second, the rendering engine

Third, stratified

Guess you like