En primer lugar, la historia
- En 2003, Apple lanzó el navegador Safari, utilizando el núcleo WebKit
- En 2005, WebKit ser de código abierto.
- En 2008, Google WebKit basado, creado cromo, cromo y publicado en la base de
En segundo lugar, el motor de renderizado
El motor de renderizado es una parte clave de la prestación de páginas para mostrar, se rindió el proyecto, todavía tienen que depender de un montón de trabajo para completar el módulo. Por ejemplo, al principio cuando se representa la necesidad de cooperar y módulos de red, la carga y hacer transversal realizado. Motor de renderizado incluye cuatro partes: intérprete de HTML, CSS intérprete, de módulo de disposición, y el intérprete de JavaScript.
- HTML intérprete: interpretar el árbol DOM HTML.
- CSS intérprete: información de estilo de cada elemento de cálculo en el DOM, proporcionan la base para una operación de trazado.
- Diseño: Los diversos recursos de acuerdo con tipografía, para obtener el resultado final de la imagen.
- JS intérprete: las operaciones DOM.
Aquí con un simple diagrama para representar lo proceso de renderizado página:
网页内容一开始，可能需要网络模块进行获取，并使用存储模块进行缓存。因此，可能会使用网络模块，使用虚线表示，其他虚线用处相同。网页内容先通过 HTML解释器解析出DOM树，该DOM直到网页销毁前会一直存在。在解析过程中可能会遇到css代码，使用css解释器对其进行解析，将对应的元素进行计算和渲染。遇到异步的JS，会停止构建，直到加载并执行完JS代码后再继续构建。 在HTML、CSS、JS解释执行完毕后，会进入一个内部表示的状态，每个元素此时都是一个拥有样式的独立个体，然后通过调用布局、绘制，将页面进行组装，并且替换之前的占位内容，使用相应的加载器进行绘制。最终生成图像展现给用户。
En tercer lugar, estratificado
渲染出来的页面一般会放在一个渲染层上，但在有`<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>Los resultados son los siguientes:
