Renderizado de una página web I

Publicado en Optimización web( WPO ) hace 3 años y 1 mes. Leído 2931 veces.

En el post sobre el efecto FOUC surgieron algunas dudas en cuanto a cómo un motor de renderizado realiza su función. Es por ello que esta semana hablaré de como se renderiza una página web. Tienes que tener en cuenta que de todos los agentes de usuario , me enfocaré sólo en los navegadores. También, por si alguien no lo había escuchado antes o no sabe como encajarlo bajo este contexto, usaré renderizar una web con el sentido de la cadena de acciones que realiza un navegador para presentar una página web, estas son, analizar, procesar y visualizar una web. La información expuesta aquí está basada en mi propia experiencia( muchos F5 durante años ), pruebas y por supuesto, aunque poco debido a la falta de información sobre el tema, a referencias externas.

Posición de etiquetas y recursos externos

La posición de las etiquetas y recursos externos es importantísima. Esto es así, porque el navegador empieza a analizar y procesar HTML de arriba a abajo. En Javascript esto lo podremos evitar mediante atributos en la etiqueta script y para CSS habrá que tener en cuenta su prioridad intrínseca del efecto cascada. Hay un mito generalizado de que el HEAD es lo que primero que interpreta un navegador pero no tiene porque ser así. Es lo primero que interpreta porque estamos habituados a ponerlo arriba del todo pero bien podríamos ponerlo después del BODY provocando que todo lo que contenga se procese al final. Lo mejor es verlo con dos ejemplos: Como dijimos el navegador procesa de arriba a abajo. Por tanto, cuando llegue a la primera etiqueta SCRIPT ejecutará su código( mostrando el aviso "En HEAD" ) y seguirá procesando las etiquetas posteriores hasta llegar a la segunda SCRIPT, ejecutando su código( mostrando el aviso "En Body" ). Ahora, si intercambiamos de lugar las etiquetas BODY y HEAD... ...vemos que efectivamente el navegador sigue procesando de arriba a abajo. La primera etiqueta será la del BODY( y mostrando, por tanto, el aviso "En BODY"). Posteriormente llegará a la del HEAD( mostrando, por tanto, el aviso "En HEAD").

Hilos ( Threads )

Hoy en día, todos los navegadores( bueno, de IE estoy en duda ) utilizan hilos para la descarga de recursos externos de una página. Esto es así, para evitar cuellos de botella por algún recurso pesado.

No te preocupes, si nunca has tratado con hilos te pondré un ejemplo de otro ámbito: la comida italiana. Imagínate que tienes una pizzería de venta a domicilio con un sólo repartidor. Por cada pedido, el repartidor tiene que ir a la casa del cliente soltar la pizza y volver por otra al establecimiento. Si un cliente vive lejos hará que todo lo demás se retrase, ya que tienen que esperar a que el repartidor regrese y uno a uno vaya llevando los pedidos.Ahora bien, podemos contratar a varios repartidores y así, si alguno se demora, no importará porque otro irá en su lugar. Es decir, así conseguimos el mandar varias pizzas a la vez.

En un principio, los navegadores tenían un solo hilo( o "repartidor" ). Por cada recurso que necesitaba la página, él iba al servidor remoto tomaba el recurso y lo traía de vuelta. Pero, si había un recurso pesado, su tiempo de vuelta se demoraba. Así que los navegadores decidieron añadir más hilos. Así, mientras que un hilo se baja una imagen, otro se puede bajar otra imagen o un archivo CSS o JS. Ojo, esto no quita que un archivo CSS o un Javascript se quede pendiente porque las imágenes de la web han ocupado todos los hilos. Es decir, que eso no quita que una pizza se retrase si todos los repartidores están fuera. Pero, tener varios hilos reduce que nos encontremos en ese caso. Esto, sino se tiene en cuenta, puede crear problemas.

Por ejemplo, como decíamos puede ser que por culpa de que hay numerosas imágenes, o si son pesadas, algunos archivos CSS y JS todavía no hayan bajado ni procesado( están esperando a un repartidor para su pizza ). Si en ese momento, tienes código conectado al evento ready, tendrás un error javascript con todo lo que eso puede conllevar.

Tienes que saber, que cuando a una imagen no le asignas width y height, el navegador no le asigna tamaño hasta que la baja y lo calcula. Esto, puede ocasionarte problemas de maquetación. Por ejemplo, puede pasar que uses un slider en tu página web pero si las imágenes de este se han quedado a la espera de otros recursos. Seguramente se muestre el slider desmaquetado creando una mala sensación al visitante. Otra cosa que puede pasar es que los estilos de nuestra página se queden a la mitad porque una imagen de recurso de un archivo CSS está bloqueando la aplicación de reglas CSS ( ya lo veremos en la segunda parte ).

El atasco por imágenes se puede evitar con la técnica llamada lazy load(o carga perezosa ). Esta técnica, aunque hay muchas maneras de implementarla, consiste en usar imágenes transparentes y ligeras que una vez cargada la página son substituidas por las reales.

Mucho ojo, esta técnica sólo se debe usar cuando haya muchas imágenes, sino será perjudicial. Volvamos al ejemplo de las pizzas. Podríamos implantar en nuestra pizzería la técnica "repartidor perezoso" consistente en que cada repartidor, en vez de volver al establecimiento por una nueva pizza al entregar un pedido, lleve cinco o seis a la vez. De tal manera que cuando termina un pedido, ya tiene la pizza del pedido siguiente. ¿ Pero qué pasa si hay pocos pedidos ?, pues que los clientes tendrán que esperar a que el repartidor con su pizza reparta las anteriores a la suya. Esto es una perdida de tiempo en la entrega cuando podemos tener otros repartidores quietos que podrían llevarla.

Eso es todo, la próxima semana hablaré de la parte del renderizado debido a los archivos CSS y JS.

Referencias

Todos los ejemplos de la entrada se pueden encontrar en mi repositorio sobre renderizado de una página web

Notas

Este post tiene continuación en renderizado de una página web II

4 comentarios

Gracias

No me queda claro

1) si los recursos CSS se descargan e interpretan de forma asíncrona 2) ¿ cuando se ejecuta el evento onready ? Siempre he pensado que cuando CSS y JS ya habian sido descargados e interpretados, pero por lo que cuentas puede no ser así 3) el evento onload creo que se ejecuta cuando la página está cargada totalmente ( imagenes incluidas )

Saludos

Escrito por jmzc el 19-01-2015 a las 11:50

Hoa, jmzc,

Me hubiera gustado escribir toda la entrada pero no he podido por falta de tiempo. Tuve que hacerlo rápido y sólo la mitad. La otra mitad relativa a CSS y JS tenía pensado hacerlo para esta semana ( si es que puedo ) ahí explicaría más este asunto que te lía. Sin embargo, me estoy pensando en hacer más larga la serie, porque veo que hay mucha gente interesada en el tema. En ese caso, iré poco a poco mostrando el proceso de renderizado y quizás se retrase un poco más lo de CSS/JS.

Saludos

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.