Para optimizar un sitio web a fondo, a priori, hay que entender realmente cómo funciona un navegador web (browser). Internamente, un browser se compone de varios componentes con distintos objetivos pero trabajan en conjunto, uno debería saber cómo es todo este proceso para entender dónde uno puede hincar el diente para aprovecharlo al máximo en su sitio web.
A muy alto nivel y sin entrar en detalle por ahora, podemos describir el proceso en forma abstracta desde el “enter” del usuario hasta la visualización completa de la página, de la siguiente forma:
- Networking: Todo lo relativo a la resolución de nombres, conectarse al servidor, generar el pedido HTTP y esperar la respuesta.
- Parser HTML: A esta altura, el browser detecta el charset y va parseando el html en ‘pedazos’ de 8KB, generando una estructura intermedia llamada DOM (Document Object Model), que es lo más fidedigna al código html.
- Parser CSS/JS: Parsea tanto el código CSS como el código JavaScript. En esta fase se genera el Render Tree, es la representación visual del documento, esta acción se llama Render Tree Construction.
- Style Computation: El Render Tree requiere las propiedades visuales de cada objeto, es en este punto donde se matchea los datos de la CSS con el DOM. Siempre el browser siempre tiene un CSS por defecto, lo cual, siempre hay algo para matchear. Este es un proceso complejo y pesado, ya que el matcheo es una tarea que consume mucha CPU, por ende, Firefox lo agrega dos tree para alivianar la tarea, los arboles son: Rule Tree y Style Context Tree.
- Layout: Cuando se haya terminado de realizar el render, todavía no se tiene las posiciones ni los tamaños de los objetos. El cálculo de estos valores es lo que se llama layout o reflow. También es un proceso caro, lo cual se trata de minimizarlo, como escribí algo en mi post anterior sobre reflow.
- Painting: Este es el último punto, donde el browser se para en la raíz del árbol y recursivamente con los datos exactos de la etapa anterior (posición y tamaño), invoca a su método “paint” para desplegarse en la pantalla.
Ahora que sabemos lo que realiza un browser, iremos explicando qué se puede optimizar en cada uno de las etapas.
Algo que no mencioné, y es algo importante a definir es, cuándo hablo de optimizazión… ¿qué optimizo? Aquí puede haber varias respuestas si vamos al detalle técnico, pero la idea que quiero dejar es: dar al usuario la sensación de que la página va “más rápida”.
Dicho esto, seguiremos más adelante con otro post con más info. para compartir. Cualquier crítica es bienvenida!
