Antes de que el navegador pueda renderizar la página, debe construir los árboles del DOM y el CSSOM. Por eso, debemos asegurarnos de enviar el código 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 de CSS se transforma en un CSS Object Model (CSSOM).
- DOM y CSSOM son estructuras de datos independientes.
- El panel Performance de las Herramientas para desarrolladores de Chrome nos permite capturar e inspeccionar los costos de construcción y procesamiento del DOM y 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>
Comencemos con el caso más simple posible: una página HTML simple con algo de texto y una sola imagen. ¿Cómo procesa el navegador esta página?
- Conversión: El navegador lee los bytes sin procesar de HTML del disco o la red y los traduce a caracteres individuales según la codificación especificada del archivo (por ejemplo, UTF-8).
- Asignación de tokens: El navegador convierte las cadenas de caracteres en tokens distintos, tal como lo especifica el estándar W3C HTML5, por ejemplo, "<html>", "<body>", y otras cadenas entre corchetes angulares. Cada token tiene un significado especial y su propio conjunto de reglas.
- Lexicalización: Los tokens emitidos se convierten en "objetos", que definen sus propiedades y reglas.
- Construcción del DOM: Por último, debido a que el lenguaje de marcado HTML define relaciones entre diferentes etiquetas (algunas etiquetas están contenidas dentro de otras etiquetas), los objetos creados se vinculan en una estructura de datos de árbol que también captura las relaciones superior-secundario definidas en el lenguaje de marcado original: el objeto HTML es un elemento superior del objeto body, el body es un elemento superior del objeto paragraph, y así sucesivamente.
El resultado final de todo este proceso es el Document Object Model (DOM) de nuestra página simple, que el navegador usa para todos los demás procesamientos de la página.
Cada vez que el navegador procesa lenguaje de marcado HTML, sigue todos los pasos anteriores: convertir bytes en caracteres, identificar tokens, convertir tokens en nodos y compilar el árbol del DOM. Todo este proceso puede tardar un poco, en especial si tenemos que procesar una gran cantidad de HTML.
Si abres las Herramientas para desarrolladores de Chrome y registras un cronograma mientras se carga la página, podrás ver el tiempo real necesario para realizar este paso. En el ejemplo anterior, convertir un fragmento de HTML en un árbol del DOM tardó unos 5 ms. En el caso de una página más grande, este proceso podría tardar mucho más. Cuando creas animaciones fluidas, puede convertirse fácilmente en un cuello de botella si el navegador tiene que 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. Eso es responsabilidad del CSSOM.
Modelo de objetos de CSS (CSSOM)
Mientras el navegador construía el DOM de nuestra página simple, encontró
una etiqueta de vínculo en la sección del encabezado del documento que hacía referencia a una hoja de estilo
CSS externa: style.css. Como prevé que necesitará este recurso para procesar la página, de inmediato envía 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 la independencia de nuestro CSS del HTML nos permite tratar el contenido y el diseño como inquietudes independientes: los diseñadores pueden trabajar en CSS, los desarrolladores pueden enfocarse en HTML, etc.
Al igual que con HTML, debemos convertir las reglas de CSS recibidas en algo que el navegador pueda comprender y con lo que pueda trabajar. Por lo tanto, repetimos el proceso de HTML, pero para CSS en lugar de HTML:
Los bytes de CSS se convierten en caracteres, en tokens, en 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 diseños 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 del cuerpo, se aplican todos los diseños de cuerpo) y, luego, refina los estilos calculados de forma recursiva aplicando reglas más específicas; es decir, las reglas se "descenden en cascada".
Para ser más concreto, considera el árbol del CSSOM anterior. Cualquier texto contenido en la etiqueta <span> que se coloca dentro del elemento del cuerpo tiene un tamaño de fuente de 16 píxeles y texto rojo; la directiva font-size se encuentra en cascada desde body hasta span. Sin embargo, si una etiqueta span es secundaria de una etiqueta de párrafo (p), no se muestra su contenido.
Además, ten en cuenta que el árbol anterior no es el árbol completo del CSSOM y solo muestra los diseños que decidimos anular en nuestra hoja de estilo. Cada navegador proporciona un conjunto predeterminado de estilos, también conocidos como "estilos de usuario-agente", que es lo que vemos cuando no proporcionamos los nuestros, y nuestros estilos simplemente anulan estos valores predeterminados.
Para saber cuánto tarda el procesamiento de CSS, puedes registrar un cronograma en Herramientas para desarrolladores y buscar el evento "Recalculate Style": a diferencia del análisis de DOM, el cronograma no muestra una entrada "Parse CSS" separada, sino que captura el análisis y la construcción del árbol del CSSOM, además del cálculo recursivo de estilos computados en este evento.
Nuestra hoja de estilo simple tarda alrededor de 0.6 ms en procesarse y afecta a ocho elementos de la página. No mucho, pero una vez más, no es gratis. Sin embargo, ¿de dónde vienen 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, hablaremos sobre el árbol de renderización que vincula el DOM y el CSSOM.