Fecha de publicación: 31 de marzo de 2014
Antes de que el navegador pueda renderizar 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), mientras que el lenguaje de marcado CSS se transforma en un CSS Object Model (CSSOM).
- DOM y CSSOM son estructuras de datos independientes.
- El panel Rendimiento de Chrome DevTools 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>
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 del HTML del disco o de la red y los traduce en caracteres individuales según la codificación especificada del archivo (por ejemplo, UTF-8).
- Tokenización: El navegador convierte cadenas de caracteres en tokens distintos, como se especifica en el estándar HTML5 del W3C, por ejemplo,
<html>,<body>, y otras cadenas entre paréntesis angulares. Cada token tiene un significado especial y un conjunto de reglas propio. - Lexing: Los tokens emitidos se convierten en "objetos", que definen sus propiedades y reglas.
- Construcción del DOM: Por último, como el 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 superior-secundario definidas en el 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 página simple, que el navegador usa para todos los demás procesamientos de la página.
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 llevar algún tiempo, en especial si tenemos una gran cantidad de HTML para procesar.
Si abres las Herramientas para desarrolladores de Chrome y registras un cronograma mientras se carga la página, puedes ver el tiempo real necesario para realizar este paso. En el ejemplo anterior, la conversión de un fragmento de HTML en un árbol del DOM tardó ~5 ms. En el caso de una página más grande, este proceso puede durar mucho más. Cuando creas animaciones fluidas, esto puede convertirse 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 muestra indicios sobre el aspecto que debe tener el elemento al representarse. Esa es la responsabilidad del CSSOM.
Modelo de objetos de CSS (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. Dado que prevé que necesitará este recurso para procesar la página, envía de inmediato una solicitud para ese 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 (integrado), pero mantener la independencia de nuestro lenguaje de marcado CSS respecto del HTML nos permite abordar el contenido y el diseño como dos temas independientes: los diseñadores pueden trabajar en CSS, los programadores en HTML, así como otras inquietudes.
Al igual que con HTML, debemos convertir las reglas de CSS recibidas en algo que el navegador pueda comprender y utilizar. 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, considera el árbol del CSSOM que se describió anteriormente. Cualquier texto contenido dentro de la etiqueta <span> que se coloque dentro del elemento del cuerpo, tiene un tamaño de fuente de 16 píxeles y es de color rojo (la directiva font-size cae en cascada 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.
Ten en cuenta también que el árbol descrito anteriormente no es el árbol completo del CSSOM y solo muestra los estilos que decidimos anular en nuestra hoja de estilos. Cada navegador proporciona un conjunto predeterminado de estilos, también conocido como "estilos de usuario-agente", lo que vemos cuando no proporcionamos los nuestros, y nuestros diseños 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 "Volver a calcular el estilo". A diferencia del análisis del DOM, el cronograma no muestra una entrada "Parse CSS" separada, sino el análisis y la construcción del árbol del CSSOM, además del cálculo recursivo de los 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, ¿de dónde 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, analizaremos el árbol de renderización, que vincula el DOM y el CSSOM.