Fecha de publicación: 31 de marzo de 2014
Para que el navegador pueda representar la página, debe construir los árboles del DOM y el CSSOM. En consecuencia, debemos asegurarnos de proporcionar lenguaje de marcado HTML y CSS al navegador lo más rápido posible.
Resumen
- Bytes → caracteres → tokens → nodos → modelo de objetos.
- El lenguaje de marcado HTML se transforma en un Document Object Model (DOM). El lenguaje de marcado CSS es transformarse en un modelo de objetos de CSS (CSSOM).
- DOM y CSSOM son estructuras de datos independientes.
- El panel de rendimiento de Herramientas para desarrolladores de Chrome nos permite capturar e inspeccionar la construcción. y los costos de procesamiento del DOM y el CSSOM.
Modelo de objetos del documento (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Comienza con el caso más sencillo: una página HTML estándar, con un poco de texto y una sola imagen. ¿Cómo el navegador procesa esta página?
- Conversión: El navegador lee los bytes sin procesar de HTML del disco. red de VPC y los traduce a caracteres individuales según los la codificación del archivo (por ejemplo, UTF-8).
- Asignación de token: El navegador convierte cadenas de caracteres en caracteres
tokens, tal como se especifica en el estándar W3C HTML5
por ejemplo,
<html>,<body>y otras cadenas comillas angulares. Cada token tiene un significado especial y un conjunto de reglas propio. - Lexicalización: Los tokens emitidos se convierten en “objetos” que definen sus propiedades y reglas.
- Construcción del DOM: Por último, como el lenguaje de marcado HTML define relaciones entre diferentes etiquetas (algunas etiquetas se contienen dentro de otras), los objetos creados se vinculan en una estructura de datos de árbol que también captura las relaciones de elemento superior y secundario definidas en el lenguaje de marcado original: el objeto HTML es superior del objeto body, el body es superior del objeto paragraph, y así sucesivamente, hasta que se compila toda la representación del documento.
El resultado final de todo este proceso es el Document Object Model (DOM). de nuestra sencilla página, que el navegador utiliza para todo el procesamiento posterior del .
Cada vez que el navegador procesa el lenguaje de marcado HTML, realiza todos los pasos que se definieron anteriormente: convertir bytes en caracteres, identificar tokens, convertir tokens en nodos y compilar el árbol del DOM. Todo este proceso puede tardar un poco, especialmente si tenemos que procesar una gran cantidad de HTML.
Si abres las Herramientas para desarrolladores de Chrome y grabas una línea de tiempo mientras se carga la página, haz lo siguiente: verás el tiempo real necesario para realizar este paso. En el ejemplo anterior, Nos tomó ~5 ms convertir un fragmento de HTML en un árbol del DOM. Para un una página más grande, este proceso podría tardar mucho más. Cuando creas animaciones fluidas, esto puede convertirse en un cuello de botella si el navegador debe procesar grandes cantidades de HTML.
El árbol del DOM captura las propiedades y relaciones del lenguaje de marcado del documento. pero no nos dice cómo se verá el elemento cuando se renderice. Esa es la responsabilidad del CSSOM.
CSS Object Model (CSSOM)
Mientras el navegador construía el DOM de nuestra página básica, encontró un elemento <link> en el <head> del documento que hacía referencia a una hoja de estilo CSS externa: style.css. Anticipando que necesitará este recurso para renderizar el
esta página envía de inmediato una solicitud para este recurso, que regresa
con el siguiente contenido:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Podríamos haber declarado nuestros estilos directamente en el lenguaje de marcado HTML (intercalado), pero mantener nuestro CSS independiente del HTML nos permite tratar el contenido y el diseño como diferentes preocupaciones: los diseñadores pueden trabajar en CSS, los desarrolladores pueden enfocarse en HTML, como así como otras inquietudes.
Al igual que con HTML, debemos convertir las reglas de CSS recibidas en algo que el navegador comprenda y con lo que pueda trabajar. Por lo tanto, repetimos el proceso de HTML, pero para CSS en lugar de HTML:
Los bytes del CSS se convierten en caracteres, luego en tokens y nodos y, por último, se vinculan en una estructura de árbol conocida como “CSS Object Model” (CSSOM):
¿Por qué el CSSOM tiene una estructura de árbol? Cuando se calcula el conjunto final de estilos para cualquier objeto de la página, el navegador comienza con la regla más general aplicable a ese nodo (por ejemplo, si es un elemento secundario de un elemento de cuerpo, se aplican todos los estilos de cuerpo) y, luego, refina de forma recursiva los estilos calculados aplicando reglas más específicas; es decir, las reglas “se aplican en cascada”.
Para ser más concretos, ten en cuenta el árbol del CSSOM que se describió anteriormente. El texto que se encuentra dentro de la etiqueta <span> que se coloca dentro del elemento body tiene un tamaño de fuente de 16 píxeles y es de color rojo; la directiva font-size se encuentra en una jerarquía de órdenes descendentes desde body hasta span. Sin embargo, si un span es un elemento secundario de una etiqueta de párrafo (p), no se mostrará su contenido.
Además, tenga en cuenta que el árbol descrito anteriormente no es el árbol del CSSOM completo y solo muestra los estilos que decidimos anular en nuestra hoja de estilo. Todos los navegadores proporciona un conjunto predeterminado de estilos, también conocidos como “estilos de usuario-agente”, eso es lo que que vemos cuando no proporcionamos los nuestros, y nuestros estilos anulan estos los valores predeterminados.
Para saber cuánto tarda el procesamiento de CSS, puedes registrar una línea de tiempo en Herramientas para desarrolladores y busca "Volver a calcular el estilo" evento: a diferencia del análisis del DOM, la el cronograma no muestra un "Análisis de CSS" separado de entrada y, en su lugar, captura análisis y construcción del árbol del CSSOM, además del cálculo recursivo de estilos calculados en este evento.
Nuestra hoja de estilo trivial tarda alrededor de 0.6 ms en procesarse y afecta a ocho elementos de la página; no es mucho, pero una vez más, no es gratis. Sin embargo, ¿dónde se de donde provienen los ocho elementos? El CSSOM y el DOM son estructuras de datos independientes. Resulta que el navegador está escondiendo un paso importante. A continuación, árbol de renderización tendrá abarca el DOM y el CSSOM.