Bajo la aparente sencillez de un navegador se esconde una de las aplicaciones más complejas que podemos usar en el día a día. De hecho, debemos entender al navegador como una plataforma de ejecución de aplicaciones, que es capaz de procesar múltiples lenguajes y reunir cientos de tecnologías para hacer de tu web profesional todo lo que conocemos hoy en día.
Un navegador consiste en millones de líneas de código en C++. Al ser en su mayor parte software open source es posible estudiar detalladamente su funcionamiento, aunque pretender explicar en un único post cada detalle en profundidad es una tarea inalcanzable. Expliquemos pues los pasos más determinantes de cara al usuario, algo que te ayudará a construir páginas web más ligeras y con mejor rendimiento.
Motor de renderización
Dentro de la estructura de funcionamiento de un navegador, el motor de renderizado es solamente una de las muchas piezas que encontramos. Sin embargo, es de las que tienen más importancia para poder sacar partido de cara a mejorar nuestros sitios web.
El motor de rendering se encarga principalmente de pintar el contenido definido en el HTML, aplicando los estilos CSS que se hayan declarado o enlazado con el documento HTML. Existen diversos motores de renderizado, pero principalmente encontramos dos:
- Por una parte Firefox usa Gecko
- Safari usa WebKit, mientras que Chrome, Opera y Edge usan Blink, que en realidad es un fork de WebKit.
Durante el renderizado el navegador debe interpretar el código de la página y construir el árbol DOM. A partir de ahí crea otro árbol denominado Render tree, que consiste en una serie de cuadrados donde aparecerán los distintos bloques. Luego se ejecuta el proceso de layout, mediante el que se sitúan los elementos en las coordenadas exactas y por último se realiza el pintado del contenido.
Todo este proceso tiene una enorme complejidad y en el mismo se deben procesar distintos lenguajes como el HTML y el CSS, pero también otros como el SVG o JavaScript. Además pueden convivir distintas versiones de los lenguajes y, por si fuera poco, el navegador debe estar pendiente de las transmisiones de red, pues no todo el contenido llega al mismo tiempo.
Factores que pueden afectar al renderizado
A la hora de pintarse la página el navegador tiene que hacer un gran esfuerzo para interpretar el contenido. Uno de los puntos en los que gasta más tiempo es en el cómputo de las distintas maneras de interpretar los lenguajes, pues no siempre los documentos están completamente correctos.
Es decir, pueden existir etiquetas mal cerradas, mal escritas, mayúsculas donde se esperan minúsculas, bloques de display: block dentro de bloques inline, olvidos al incorporar etiquetas obligatorias como <body>, etc. A pesar de todo esto, los usuarios nunca reciben un error de «HTML incorrecto».
El navegador necesita arreglar cualquier incorrección en el documento HTML y ejecutar complicados algoritmos para llegar a situaciones viables ante documentos incorrectos. Por supuesto, si como desarrolladores conseguimos documentos válidos, haremos la vida más sencilla a los navegadores.
Cómo se interpreta el CSS
A la hora de mostrar un documento el navegador debe interpretar también el CSS para facilitar la construcción del Render tree y del layot, en distintas etapas. Para crear el Render tree es necesario tener en cuenta todos los estilos declarados y éstos pueden venir desde diversas fuentes, desde estilos inline hasta otros importados en documentos externos.
Durante este procesamiento el navegador tiene que buscar la menor solución a distintos problemas, como la cantidad enorme de reglas de estilo que debe procesar, lo que le obliga a realizar una laboriosa gestión de la memoria, o lidiar con la complejidad de los selectores utilizados. Por si fuera poco, necesita optimizar estilos compartidos entre varias etiquetas, los distintos estados que pueden tener elementos como los enlaces, la prioridad de las reglas CSS, atendiendo a la cascada y la especificidad, etc.
Si quieres el máximo detalle sobre cómo funcionan los navegadores, te recomendamos el artículo How browsers work, que te permitirá para profundizar en aspectos más técnicos y en otros que también te pueden resultar interesantes.