Renderizado de una página web II

Publicado en Optimización web( WPO ) hace 2 años y 9 meses. Leído 1943 veces.

Después de un pequeño parón por diversos motivos, aquí está la continuación de renderizado de una página web. En aquella entrada, vimos dos factores a tener en cuenta a la hora del renderizado de una página web: el orden y los hilos. Sin embargo, hay un tercer factor que se contrapone al del orden: la supervisión. Antes, veremos el tema de los eventos, que nos servirá para aclarar más adelante al visitante jmzc algunos aspectos.

Eventos

Los eventos son los avisos que da el navegador web al código web escrito por el programador, para informarle del estado ( o acciones que se dan ) en una página web. Es decir, recordemos nuestra pizzería, los eventos se asemejaría a cada una de las notificaciones SMS que manda la pizzería a su cliente para que este se organice o sepa la evolución de su pedido. Ejemplo: Estimado cliente, su pedido ha sido recibido; estimado cliente, su pedido ha empezado a realizarse; estimado cliente, su pedido va a salir, …

Para el objetivo de este post nos centraremos en dos: * Ready( o DOMContentLoaded ), el evento o aviso que lanza el navegador cuando la página ya se ha interpretado.. * Load, el evento o aviso que lanza el navegador cuando la web ha finalizado su renderizado..

Supervisión

Como comentaba anteriormente, este es el tercer factor en el renderizado de una página web y, como veremos, en algunos casos se contrapone al del orden. La supervisión es el nivel de atención que pondrá un navegador durante la descarga de un recurso externo como puede ser un archivo CSS,uno de JavaScript o uno de imagen. Los navegadores manejan tres tipos o niveles de supervisión:

Supervisión total o descarga sincrónica

Ocurre cuando el navegador mantiene total control o atención sobre el recurso que tiene entre manos Esto es, el navegador no seguirá con la interpretación de la página web hasta que está seguro que el recurso actual se ha descargado e interpretado correctamente. Esto es lo que vimos que hacía un navegador web con el CSS para evitar el efecto FOUC. También es lo que hace el navegador con los archivos JavaScript si no se le indica lo contrario.

Estenivel trae una consecuencia directa y es que si creamos un archivo JS o CSS unificado, o de gran peso, su descarga hará que la interpretación del resto de la página se pare durante demasiado tiempo. Ya que el navegador se quedará controlando que ese archivo CSS o JS se descarga e interpreta adecuadamente y por tanto, la página tardará en aparecer. También hay otros aspectos a tener en cuenta en este nivel:

  • Podemos poner el JavaScript en el pie. OJO, esto no le otorgará menos supervisión( ni más asincronismo ), como mucha gente cree. La ventaja de esta técnica es que cuando el procesado del navegador llegue al pie, habrá algunos hilos ocupados bajando otros recursos(ejemplo, imágenes) y por tanto, habrá cierta concurrencia en el tratamiento. Es decir, aplicado a la pizzería, es como si el establecimiento de pizzas dejara para último lugar el pedido más importante. Así, aunque el jefe tenga toda la supervisión puesta en el último repartidor y no despache más pedido hasta que este llegue, otros repartidores ya habrán salido y estarán haciendo su trabajo..
  • Podemos poner el CSS en el pie. Esto, aunque podría dar lugar a creer que es como el JavaScript y en parte es así, no es muy beneficioso. La apariencia es algo muy serio para los navegadores. Como vimos en evitar el efecto FOUC, el navegador no quiere efecto FOUC. Por tanto, en este caso interpretará todos los elementos de la página hasta la etiqueta en cuestión, OJO, interpretará pero no hará ninguna colocación de elementos hasta que tenga hasta el último CSS bajado y cargado. Sin embargo, si por el contrario ponemos la etiqueta LINK del archivo CSS en el HEAD tendremos algo diferente. En este caso, el navegador después de haber esperado y cargado el CSS bajo su total supervisión, irá colocando los siguientes elementos html en la web según los procesa y acorde a las reglas escritas CSS. Con esto se consigue que el renderizado( o presentación de la página ) sea mucho más rápido..

Resumiendo, para la supervisión total el orden de procesado se mantiene según el orden de aparición de las etiquetas. Además, si el navegador tiene que descargar algún archivo CSS o JS, se quedará a la espera a que este bajey lo procese para poder continuar con la siguiente etiqueta.

Supervisión intermedia o descarga en diferido.

Este es el nivel predeterminado de supervisión en las imágenes. En este nivel, el navegador delegará en un hilo la descarga del archivo pero siempre con un ojo puesto en él. De tal manera, que a medida se bajen seprocesará y colocará( en el caso de una imagen ). A tener en cuenta:

  • Retardo en la descarga de imágenes: Como ya comenté de pasada en la primera parte, si las imágenes tardan mucho en bajarse, también tardarán en colocarse y, por tanto, puede que la página se muestre desmaquetada mientras tanto..
  • Rapidez en la descarga de JavaScript: Si el JavaScript se descarga demasiado rápido, el navegador lo ejecutará nada más que lo tenga. Esto significa que puede que la página no esté totalmente interpretada y el árbol DOM sin terminar. Cualquier código JavaScript que haga entonces uso del DOM de la página fallará..
  • Retardo en la descarga de JavaScript: Si el JavaScript se descarga con retardo( bien por su peso o porque los hilos han bajado antes otros recursos ). Puede que el navegador ya haya procesado la página antes y que, por tanto, el evento Ready se lance cuando aún no esté bajado todos los archivos JavaScripts( recordemos que esto es porque ya al navegador le ha dado tiempo procesar toda la página ). Como consecuencia, el ready en ese script no se ejecutará o lo hará posiblemente con fallos más tarde. Este es un bug conocido que se da en algunas versiones de los más populares navegadores, por ejemplo, firefox o IE9( o inferior ) o en versiones antiguas de los navegadores android(2.2/2.3 ). ( Nota: Según que casos, también puede pasar que los navegadores no tomen en cuenta el atributo defer y, por tanto, se tomen como de supervisión total )..

Aclarar que el navegador seguirá procesando las etiquetas en el mismo orden, pero ahora de encontrar un elemento en diferido lo pondrá a bajar y seguirá con su tarea. Luego, irá procesando los defers en el mismo orden que se mandaron a bajar, que concuerda con el orden de aparición de las etiquetas en la página. NOTA:: Un JavaScript se le puede especificar su descarga en diferido usando el atributo defer.

Supervisión nula o descarga asincrónica.

Es la supervisión que se dará en los archivos JavaScripts con el atributo async. En este caso, cuando un navegador llega a una etiqueta asincrónica, le dirá a un hilo que baje el archivo asociado y se olvidará de él. Cuando termine de procesar toda la página, y todos los elementos en diferido, se pondrá a procesar todos los archivos asincrónico por el orden que los mandó a bajar. Finalmente se lanzará el evento Load de la página.

Hay que tener en cuenta que un archivo asincrónico puede tardar en bajar mucho y antes de que esté bajado y procesado se lance el evento Ready. Si esto ocurre y lo que teníamos como async era una librería de la que hacíamos uso( como jQuery, Google Analytics, etc ), nuestro código producirá un error. Puede ocurrir también que en estos archivos tuvieramos un listener del evento Ready y, por lo mismo que hemos dicho, nunca llegue a llamarse. Al contrario que en la descarga en diferido, esto no se considera ningún bug y es posible que ocurra en todos los navegadores. Por tanto, es algo que tendremos que tener en cuenta para siempre.

Referencias

0 comentarios

Deja un comentario

Puedes usar Markdown para formatear tu comentario.

Este sitio utiliza cookies propias y de terceros para mejorar tu experiencia con el sitio web. Al continuar con la navegación consideramos que acepta su uso.