Minimizar el proceso de redistribución de los navegadores

Autor: Lindsey Simon, desarrolladora de experiencia de usuario

Qué debes saber: HTML básico, JavaScript básico, conocimiento práctico de CSS

Se entiende por "redistribución" el proceso mediante el cual los navegadores vuelven a calcular las posiciones y formas de los elementos presentes en documentos con el objetivo de volver a renderizar dichos documentos de forma total o parcial. Dado que la redistribución es una operación de los navegadores que bloquea a los usuarios, a los programadores les interesa saber cómo reducir el tiempo de procesamiento y cómo afectan a dicho tiempo las distintas propiedades de los documentos (por ejemplo, la profundidad del DOM, la eficiencia de las reglas de CSS o los distintos tipos de cambios en el estilo, entre otras). A veces, es posible que para redistribuir un solo elemento haya que redistribuir también el flujo de sus elementos principales y de cualquier elemento relacionado.

Hay multitud de acciones que pueden hacer los usuarios y de posibles cambios en el código HTML dinámico que pueden causar redistribuciones. Por ejemplo: cambiar el tamaño de la ventana del navegador, usar métodos de JavaScript con estilos computados, añadir elementos al DOM o quitarlos, y cambiar las clases de un elemento. Ten en cuenta que algunas operaciones pueden causar un tiempo de redistribución mayor al esperado. Echa un vistazo al siguiente diagrama, extraído de la charla de Steve Souders "Even Faster Web Sites":

De los datos de la tabla anterior pueden extraerse estas conclusiones: no todos los cambios en el estilo de JavaScript causan una redistribución en todos los navegadores, y el tiempo varía según el caso. También puede verse que los navegadores modernos cada vez tardan menos en hacer la redistribución.

En Google, probamos la velocidad de nuestras páginas web y aplicaciones de varias formas, y la redistribución es uno de los factores clave que tenemos en cuenta al añadir funciones a nuestras interfaces de usuario. Hacemos todo lo posible para ofrecer experiencias de usuario dinámicas, interactivas y agradables.

Directrices

A continuación, te ofrecemos algunas directrices sencillas que puedes seguir para reducir la redistribución en tus páginas web:

  1. Reduce la profundidad del DOM que no sea necesaria. Los cambios en un nivel del árbol DOM pueden causar cambios en todos los niveles del árbol, tanto en la raíz como en los niveles secundarios del nodo modificado, lo que provoca que se tarde más en hacer la redistribución.
  2. Minimiza las reglas de CSS y quita las que no uses.
  3. Si introduces cambios complejos en el renderizado, como animaciones, sitúalos fuera del flujo usando posiciones absolutas o fijas.
  4. No uses selectores de CSS complejos innecesarios (en especial, selectores descendentes) que requieran más potencia de CPU para hacerlos concordar.

En este vídeo, Lindsey explica algunas formas sencillas de reducir al mínimo la redistribución en tus páginas:

Recursos adicionales