En proceso de renderizado de Chrome en un (a) se introdujo la tubería de representación generación DOM , estilo de computación y diseño de tres etapas. Hoy en día, nos preocupa en el fondo del escenario canal de renderizado.
estratificado
Después de generar el diseño generado por el diseño del árbol, la ubicación específica de cada elemento de información se calcula, y luego la página siguiente no se ha iniciado la elaboración?
La respuesta sigue siendo no.
Debido a que hay muchos de página complejo, en efecto, tal como algunos complejos de transformación 3D, desplazamiento de página, o hacer uso del eje z z-indexación de clasificación. Para lograr estos efectos con mayor facilidad, motor de renderizado requerido para generar específica para una capa de nodo en particular, y generar un árbol de capa correspondiente (LayerThree) . capas mencionadas, lo primero que debe pensar en el software de PS. PS Las capas son muy comunes, tales como la imagen se vuelve fondo transparente, tiene que copiar una capa salió, limpiar las partes no deseadas de la capa con un enchufe, y luego se aplica a la imagen original, puede generar una imagen con un fondo transparente de.
Para entender lo que es la capa de forma intuitiva, a través de Chrome "Developer Tools" y seleccione la pestaña "Capas", se puede visualizar la página de estratificación, como se muestra a continuación:
Si no hay "Capas" etiqueta, ver el diagrama siguiente:
Como puede verse a partir de lo anterior, el primer gráfico, los puntos a las muchas capas página motor de renderizado, estas capas en un cierto orden pliegan juntas, para formar la última página.
Ahora que sabes la página del navegador está dividida en muchas capas, estas capas superpuestas síntesis después de la última página. A continuación, la relación entre estas capas y el diseño de los nodos del árbol es como? Por favor remítase al diagrama:
Típicamente, cada nodo en el árbol contiene la disposición no es una capa, si un nodo no se corresponde con la capa, a continuación, el subordinado capa al nodo del nodo padre . Por ejemplo, la figura de arriba la etiqueta span será sin capas exclusivos, entonces ellos están subordinados a su capa principal. En cualquier caso, una capa final de cada nodo dependiente directa o indirectamente.
El navegador va a crear una capa de nodos individuales que satisfagan las siguientes condiciones:
1. El elemento de atributo contexto ha un laminado promovido a una sola capa.
Página es un plano de dos dimensiones, pero el contexto permite que los elementos HTML laminado que tiene un concepto tridimensional, estos elementos HTML de acuerdo con el propio atributo de prioridad a la distribución de la z eje perpendicular al plano de dos dimensiones. 
Esta es una vista esquemática de un contexto laminado.
contexto laminado en general, tienen las siguientes propiedades:
- elemento raíz del documento (html).
- Postion es absoluta (posicionamiento absoluto - con respecto al elemento padre) o relativa (posicionamiento relativo) y z-índice no es auto elementos.
- valor de posición fija (fijamente posicionada - con respecto a todo el documento) o pegajosa (viscosa) de posicionamiento elementos.
- flex elemento (FlexBox) secundario del contenedor, y el valor z-índice no es automático.
- Child rejilla elemento de la embarcación, y el valor z-índice no es automático.
- valor de la propiedad opacidad de menos de 1 elemento.
- valor de atributo-mezcla-modo de mezcla no es un elemento normal.
- transformar / filtro / perspectiva / el clip-camino / máscara / máscara de imagen / máscara de las fronteras valor del atributo no es un elemento a ninguno.
- valor de atributo del aislado elemento de aislamiento.
- webkit-desbordamiento de desplazamiento valor de atributo de elemento de contacto.
- valor de cambio se establece en uno cualquiera de atributo del atributo es creado en el contexto del elemento laminado valor no inicial.
- Contener layout valor de atributo, pintar o un valor sintética de uno de ellos: el elemento (por ejemplo contener contenido / estricta) a.
2. La necesidad de lugar de corte (clip) será creado como una capa
Pero primero tiene que entender lo que es corte, combinada con el código HTML siguiente:
<style>
div {
width: 200;
height: 200;
overflow:auto;
background: gray;
}
</style>
<body>
<div>
<p>所以元素有了层叠上下文的属性或者需要被剪裁，那么就会被提升成为单独一层，你可以参看下图：</p>
<p>从上图我们可以看到，document层上有A和B层，而B层之上又有两个图层。这些图层组织在一起也是一颗树状结构。</p>
<p>图层树是基于布局树来创建的，为了找出哪些元素需要在哪些层中，渲染引擎会遍历布局树来创建层树（Update LayerTree）。</p>
</div>
</body>
Aquí definimos div tamaño de 200 x 200 píxeles, mientras que el div dentro del texto más contenido, el área de texto que se muestra sin duda superior a un área de 200 x 200, esta vez producido un corte de cinta, el motor de renderizado de texto cortará porción div para el área de visualización, los resultados finales, como se muestra a continuación:
por lo tanto, el elemento de laminado con los atributos de contexto necesita ser cortada o, en cualquier punto de cumplir, se promoverá una capa separada.
También podemos ver a través de la página de Capas escribimos el árbol de capas correspondientes, para minimizar la profundidad de la capa del árbol, para seguir optimizando nuestro código de la página web.
El dibujo capa
Después de la finalización de la construcción de la capa del árbol, el motor de renderizado árbol de capas se dibujará en cada capa, entonces es cómo lograr que dibuja?
Rendering motor de renderizado se dividirá cada capa en muchos instrucción de dibujo pequeña, y la composición de estas instrucciones en el orden de una lista que se puede extraer, como se muestra a continuación:
Como se puede ver en la figura, la lista de comandos de dibujo es muy simple, se permite realizar una operación de dibujo simple, tal como dibujo de un color rosa o negro líneas de matriz. elementos dibujados por lo general requieren una buena unas pocas instrucciones de dibujo, ya que cada elemento de fondo, el frente de fronteras y requiere un comando separado para dibujar. Por tanto la capa de dibujo etapa, el contenido de la salida que se pueden extraer es que estas listas.
Del mismo modo, podemos ver haciendo clic en la instrucción de dibujo capa correspondiente de las "capas" en.
rasterized
lista Dibujar excepto una lista de instrucciones de dibujo y la orden de dibujo de la grabación, y la operación está dibujado por el motor de renderizado para completar la síntesis de la rosca. 
La figura anterior muestra la relación entre la rosca representación principal e hilo sintético. Cuando esté listo para dibujar una lista de capas, el hilo principal elaborará la lista presentada al (cometer) para hilo sintético.
Hablamos del concepto bajo el área de visualización:
Por lo general, una página puede ser muy grande, pero el usuario sólo puede ver parte de ella, podemos ver la sección de usuario se llama la ventana gráfica.
Los usuarios sólo pueden ver a través de la parte de visualización de la página, en este caso, para extraer todo el contenido de la capa, que tendría muchos gastos, pero no es necesario.
Por esta razón, la capa de hilo sintético se dividirá en azulejos (azulejos) , el tamaño de estas baldosas son por lo general 256 * 256 o 512 * 512. 
Entonces sintetizado de acuerdo con el entorno de la rosca a la ventana gráfica del mapa de prioridad bloque de bits se genera, la operación se genera realmente por el mapa de bits de datos de trama realizar. Los llamados medios de rasterización convierte el mapa de bits en los azulejos . Rejilla de bloque es la unidad más pequeña de la ejecución. El proceso de renderización mantiene una rejilla de agrupación de hebras, todo rasterización azulejo se realiza en el grupo de subprocesos, modo de marcha, como se muestra a continuación:
En general, el proceso de rasterización utilizará la GPU para acelerar la formación, utilizando la GPU para generar mapa de bits el proceso de rasterización se llama rápida o GPU rasterización, el mapa de bits resultante se almacena en la memoria de la GPU.
operación GPU se ejecuta en el proceso de GPU, si el Rasterized uso de la GPU, a continuación, las operaciones finales de mapa de bits generados se hacen en la GPU, que implica una operaciones de proceso transversal.
Como puede verse en la figura, el proceso de renderización para generar una baldosa envío de instrucciones a la GPU, y luego realizar las baldosas de mapa de bits generados en la GPU, la GPU y almacenados en la memoria.
Síntesis y visualización
Una vez que todas las baldosas se rasterizar, hilos sintéticos generará un comando para dibujar una teja - "DrawQuad", y luego enviar el comando al proceso del navegador.
Hay un proceso llamado navegador componentes a saber, hilos sintéticos DrawQuad para recibir comandos enviados a través de, a continuación, según el mandato DrawQuad, dibujar su contenido de la página en la memoria, la memoria de visualización final en la pantalla.
En este caso, a través de una serie de etapas, escribir bien en HTML, CSS, JavaScript y otros documentos a través del navegador mostrará una página hermosa.
Rendering resumen de tuberías
Después de la introducción de dos artículos, tengo una impresión general de la barra del navegador proceso de renderizado. Permítanme resumir: DOM de HTML a calcular, estilo, diseño, árbol de capas, dibujo, rasterización, la síntesis y la pantalla. Como se muestra a continuación:
- El contenido HTML proceso de renderizado en el navegador puede leer el árbol DOM estructura.
- La hoja de estilo CSS motor de renderizado en un navegador puede comprender hojas de estilo , nodo DOM estilo calculado.
- Crear un árbol de diseño , y calcula diseño elementos de información.
- la distribución de árbol jerárquico, y genera un árbol jerárquico .
- Generados para cada capa de la lista de sorteo y enviarlo al hilo sintético.
- Síntesis de la capa de hilos en azulejos , y grupo de subprocesos rasterización en un mapa de bits en el bloque.
- Hilo sintético envía una instrucción de dibujo DrawQuad al proceso navegador.
- proceso del navegador de acuerdo a los mensajes DrawQuad páginas generadas , y aparecen en el monitor.
