Optimización de javascript (II). Entendiendo cómo se renderizan las páginas

Para saber cómo mejorar una página, antes de comenzar hay que saber cómo hacen las cosas los navegadores. Las páginas web se presentan en pantalla a través de un hilo (thread) de ejecución denominado ui-thread (hilo de ejecución de la interfaz de usuario) de modo que este proceso es el único responsable de la carga de la página y ejecución del código javascript de la página web encolándose las operaciones una detrás de otra de modo que no se pasa a la siguiente operación hasta que no se ha completado la anterior.

Lo que ésto significa es que este proceso es un camino cíitico y cualquier bloqueo en su ejecución da lugar a un bloqueo en la carga y ejecución de la página web.

Un típico ejemplo de ésto es la pulsación de un botón que realiza una tarea y luego cambia la apariencia de ese botón para indicar que se ha pulsado. El proceso que hace el ui-thread en este caso es:

Evento de pulsación --> ejecución del código --> Actualización de la pantalla

Y aquí es donde están los problemas ya que mientras se está ejecutando el código, NO se actualiza la interfaz y si se tarda un tiempo excesivamente largo en completar la ejecución, el usuario se va a quedar mirando a una pantalla en blanco en el mejor de los casos, esperando a que termine o viendo el típico mensaje de que "hay un script que está tardando demasiado, quiere matarlo?".


Este problema se agrava desde el momento en que se está cargando una página y hay código incrustado dentro de la propia página, ya que en el momento en que el navegador, a medida que va cargando la página, en el momento que llega al tag del script, va a paralizar la carga de la página procediendo al parse del javascript y posterior ejecución, no continuando con la carga hasta que ese código finalice!.


Afortunadamente, hay varias posibles soluciones para todo éstos problemas que veremos en entradas posteriores.