A continuación, se describe un resumen de los pasos del navegador:

  1. Procesa el lenguaje de marcado HTML y construye el árbol de DOM.
  2. Procesa el lenguaje de marcado CSS y construye el árbol de CSSOM.
  3. Combina el DOM y el CSSOM en un árbol de representación.
  4. Ejecuta diseño en el árbol de representación para calcular la geometría de cada nodo.
  5. Pinta cada nodo en la pantalla

 

DOM (Documento Object Model)

La creación del Modelo de Objetos del Documento (DOM) es una de las innovaciones que más ha influido en el desarrollo de las páginas web dinámicas y de las aplicaciones web más complejas.

El DOM es un Interfaz de Programación de Aplicaciones (API) para documentos HTML y XML. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido y visualización. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.

Para poder aprovechar las utilidades de DOM, es necesario “transformar” la página original. Una página HTML normal no es más que una sucesión de caracteres, por lo que es un formato muy difícil de manejar. Por ello, los navegadores web transforman automáticamente todas las páginas web en una estructura más eficiente de manipular.

El DOM transforma todos los documentos HTML en un conjunto de elementos llamados nodos, los cuales están interconectados y representan los contenidos de las páginas web y las relaciones entre ellos. Por su aspecto, la unión de todos los nodos se llama “árbol de nodos”.

La transformación de las etiquetas HTML habituales genera dos nodos: el primero es el nodo de tipo “Elemento” (correspondiente a la propia etiqueta HTML) y el segundo es un nodo de tipo “Texto” que contiene el texto encerrado por esa etiqueta HTML.

Cada vez que el navegador procesa el lenguaje de marcado HTML, realiza todos los siguientes pasos: convierte bytes en caracteres, identifica tokens (el navegador convierte las strings de caracteres en tokens diferentes, tal como lo especifica la norma W3C HTML5; por ejemplo, «<html>», «<body>», y otras strings entre paréntesis angulares), convierte tokens en nodos y compila el árbol del DOM.

El árbol de DOM captura las propiedades y relaciones del lenguaje de marcado del documento, pero no nos dice cómo se verá el elemento cuando se represente. Eso es responsabilidad del CSSOM (CSS Object Model).

CSSOM (CSS Object Model)

El Modelo de objetos CSS es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.

Como sucede con el lenguaje HTML, necesitamos convertir las normas de CSS en algo que el navegador pueda comprender y utilizar. Por lo tanto, repetimos el proceso del HTML, pero para CSS en lugar de HTML.

Los árboles de CSSOM y DOM se combinan en un árbol de representación que después se utiliza para calcular el diseño de cada elemento visible. Ambos son objetos independientes, que capturan diferentes aspectos del documento: uno describe el contenido y el otro describe las normas de estilo que deben aplicarse.

The Render Tree (El Árbol de Renderizado)

Los árboles de CSSOM y DOM se combinan en un Árbol de Renderizado, que se utiliza para calcular el diseño de cada elemento visible y sirve como información para el proceso de representación que procesa los píxeles en la pantalla.

Layaout and Paint (Diseño y Pintura)

La etapa de “diseño”, también llamada “reprocesamiento” tiene como resultado un “modelo de cuadro”, que precisamente captura la posición y el tamaño exactos de cada elemento en la ventana de visualización: todas las mediciones relativas se convierten a píxeles absolutos en la pantalla.

Por último, ahora que conocemos los nodos visibles, y su geografía y sus estilos, podemos pasar esta información a la etapa final, que convierte cada nodo del árbol de representación en píxeles reales en pantalla. Este paso se conoce normalmente como “pintura” o “rasterización”.

Fuentes:

  • https://es.wikipedia.org/wiki/Document_Object_Model
  • https://desarrolloweb.com/articulos/que-es-el-dom.html
  • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=es
  • https://developer.mozilla.org/es/docs/Acerca_del_Modelo_de_Objetos_del_Documento
  • https://support.google.com/partners/answer/7336282?hl=es-419
  • https://developer.mozilla.org/es/docs/Web/API/CSS_Object_Model
  • http://www.csslab.cl/2014/11/26/conoce-como-funciona-el-browser-y-optimiza-tu-codigo-front-end/
  • https://bitsofco.de/understanding-the-critical-rendering-path/

 

Gabriela Pérez Caviglia

Especialista en Medios Digitales, Diseño Gráfico y Tecnologías de la Información

Website