Módulo 2: Aumentar la velocidad de los sitios web móviles

2.2.1 Elaboración del modelo de objetos del documento

Antes de que el navegador renderice la página, es necesario elaborar árboles de DOM y CSSOM. Por esta razón, tenemos que asegurarnos de que enviamos lo más rápido posible el código HTML y CSS al navegador.

Empecemos con el caso más sencillo: una página HTML sin formato, solo con un poco de texto y una sola imagen. ¿Cómo procesa el navegador esta página?

 

  1. Conversión: el navegador lee los bytes sin procesar del HTML en el disco o en la red y los convierte en caracteres en función de la codificación especificada en el archivo (por ejemplo, UTF-8).
  2. Creación de tokens: el navegador convierte las cadenas de caracteres en diferentes tokens (en función de lo que especifique el estándar HTML5 de W3C; por ejemplo, "<html>", "<body>") y otras cadenas dentro de comillas angulares. Cada token tiene un significado especial y cuenta con su propio conjunto de reglas.
  3. Análisis léxico: los tokens emitidos se convierten en "objetos" que definen sus propiedades y reglas.
  4. Creación del DOM: por último, dado que el marcado HTML define las relaciones entre etiquetas diferentes (algunas etiquetas están incluidas en otras etiquetas), los objetos creados se vinculan a una estructura de datos de árbol que también incluye las relaciones de elementos principales y secundarios definidas en el marcado original: el objeto HTML es el elemento principal del objeto "body", "body" es el elemento principal del objeto "paragraph", etc.

El resultado final de este proceso es el modelo de objetos del documento (DOM) de nuestra página, que el navegador utiliza para el resto de procesos de la página.

Cada vez que el navegador procesa el marcado HTML, realiza todos los pasos anteriores: convierte bytes en caracteres, identifica tokens, convierte tokens en nodos y crea el árbol de DOM. Todo este proceso puede tardar cierto tiempo, sobre todo si tiene que procesar una gran cantidad de HTML.

Nota: Suponemos que cuentas con conocimientos básicos de DevTools de Chrome, es decir, que sabes capturar una cascada de red o registrar una cronología. Para refrescarte la memoria, echa un vistazo a la documentación de DevTools de Chrome. Si no tienes experiencia en DevTools, te recomendamos que realices el curso Discover DevTools (Descubre DevTools) de Codeschool.

Si abres DevTools de Chrome y registras una cronología mientras se carga la página, podrás ver el tiempo real que se necesita para completar este paso. En el ejemplo anterior, se tardó aproximadamente 5 ms en convertir un fragmento de HTML en un árbol de DOM. Este proceso puede llevar mucho más tiempo para una página de mayor tamaño. La creación de animaciones fluidas puede ser un obstáculo si el navegador tiene que procesar una gran cantidad de HTML.

El árbol de DOM incluye las propiedades y relaciones del marcado del documento, pero no nos indica la apariencia del elemento cuando se renderice. Esto es responsabilidad del CSSOM.

Modelo de objetos de CSS (CSSOM)

Mientras el navegador elaboraba el DOM de nuestra página, detectó una etiqueta de enlace en la sección del encabezado del documento que hacía referencia a una hoja de estilo CSS externa: style.css. Tras prever que necesitaba este recurso para renderizar la página, envió inmediatamente una solicitud y se obtuvo el siguiente contenido:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

Podríamos haber indicado nuestro estilo en el marcado HTML (integrado), pero al mantener la independencia de nuestro CSS con respecto al HTML, podemos utilizar el contenido y el diseño como elementos independientes: los diseñadores pueden trabajar en el CSS, los desarrolladores pueden centrarse en el HTML, etc.

Al igual que con el HTML, tenemos que convertir las reglas de CSS recibidas en algo que el navegador pueda comprender y con lo que pueda trabajar. Por tanto, repetiremos el proceso del HTML, pero para CSS:

Los bytes de CSS se convierten en caracteres, a continuación en tokens, luego en nodos y, por último, se vinculan a una estructura de árbol conocida como "modelo de objetos de CSS" (CSSOM):

¿Por qué el CSSOM tiene una estructura de árbol? Al calcular el conjunto final de estilos para cualquier objeto de una página, el navegador comienza con la regla más general aplicable a ese nodo (por ejemplo, si se trata de un elemento secundario de "body", se aplicarán todos los estilos de "body"). Después, se vuelven a definir de forma recursiva los estilos calculados mediante la aplicación de reglas más específicas, es decir, las reglas se aplican en cascada.

Para ser más concretos, observa el árbol de CSSOM que aparece arriba. El texto incluido en la etiqueta "span" dentro del elemento "body" tiene un tamaño de fuente de 16 píxeles y el color del texto es rojo; la directiva del tamaño de fuente se aplica en cascada desde "body" hasta "span". Sin embargo, si la etiqueta "span" es el elemento secundario de la etiqueta "paragraph" (p), su contenido no se visualiza.

Además, ten en cuenta que el árbol anterior no es un árbol de CSSOM completo y solo muestra los estilos que hemos decidido anular en nuestra hoja de estilo. Cada navegador proporciona un conjunto predeterminado de estilos conocidos como "estilos de agente de usuario" (se trata de lo que vemos cuando no proporcionamos ninguno). Nuestros estilos anularán los predeterminados (por ejemplo, estilos de IE predeterminados).

Para descubrir cuánto tarda el procesamiento de CSS, puedes registrar una cronología en DevTools y buscar el evento "Recalculate Style" (Recalcular estilo). A diferencia del análisis de DOM, la cronología no muestra la entrada independiente "Parse CSS" (Analizar CSS), sino que incluye el análisis y la elaboración del árbol de CSSOM, además del cálculo recurrente de estilos calculados en este evento.

La hoja de estilo sencilla tarda aproximadamente 0,6 ms en procesarse y afecta a ocho elementos de la página; no es mucho, pero ya es algo. ¿De dónde proceden los ocho elementos? El CSSOM y DOM son estructuras de datos independientes. Resulta que el navegador nos oculta un paso importante. A continuación, hablaremos sobre el árbol de renderizado que vincula al DOM y al CSSOM.

¿Te ha sido útil este artículo?
¿Cómo podemos mejorar esta página?