CSS para mejorar rendimiento del navegador: CSS containment

Una serie de propiedades CSS diseñadas para controlar y mejorar el rendimiento del navegador al procesar las páginas webs. Entre otras la novísima containt recogida en el documento del W3c CSS containment

CSS para mejorar rendimiento del navegador: CSS containment

Por Kseso ✎ 8
CSS para mejorar rendimiento del navegador

Verdad de perogrullo: CSS tiene declaraciones para todos los gustos. Principalmente de dos grandes tipos: estructurales y de adorno.

Y hay propiedades que para funcionar necesitan de algún tipo de recurso, por lo general ajenos al propio CSS, como archivos externos de imágenes, svg, tipográficos... étc.

Y el uso de ambas (declaraciones y recursos) inciden en el proceso de conformar la página en el lado del cliente (máquina del usuario que visita la web). Lo que se conoce como carga de la web ('carga' en el sentido de cosas transportadas).

Al aumento de esta "carga" contribuyen no sólo los archivos CSS con todo lo que contienen (su llamada y descarga, acceso a los recursos, aplicación de ellos) y el resto de elementos contenidos en la página (objetos como imágenes, vídeos..., recursos como scripts, étc). Además de ésto otro factor determinante es la aplicación de los mismos en la composición de la web y sus alteraciones a medida que el navegador los va teniendo disponibles y procesando.

Básicamente dos efectos son más que notorios y molestos a medida que aumenta "la carga": demoras y bloqueos y repaints y reflows.

Desde siempre todos los actores que contribuyen a la formación y composición de las páginas web se han esforzado por hallar soluciones para disminuir su aportación a la carga. Tanto del lado del servidor como del lado del cliente.

CSS también. Para ello disponemos de una serie de propiedades cuya finalidad es facilitar al navegador la carga y composición de la página.

La propiedad CSS `will-change´

La propiedad CSS will-change aparece por primera vez en Abril de 2014 en el documento CSS Will Change Module Level 1 y alcanzó el estatus de CR a velocidad de crucero: en Diciembre de 2015. De ella dice:

La propiedad will-change de CSS le permite al autor informar al agente de usuario por adelantado de qué tipo de cambios se harán en un elemento. Esto permite al UA optimizar la forma en que manejará al elemento proveyendo la realización de esos cambios y preparándose por anticipado para ellos.

Los valores posible son:

  • auto: No especifica ningún cambio en particular. Deja en manos del navegador aplicar las optimizaciones
  • scroll-position: Indica que el autor espera animar o cambiar la posición del elemento (desplazamiento).
  • contents: Indica que el autor espera animar o cambiar algo en el contenido del elemento.
  • Nombre de propiedad: Indica que el autor espera animar o cambiar el valor de la propiedad especificada.

Para más información te sugiero el artículo en este blog "will-change: propiedad CSS para anticipar y preparar los cambios".

Grupo de propiedades `*-rendering´

A la hora de pintar en pantalla los elementos no supone el mismo trabajo o carga para el navegador hacerlo "a lo loco" de cualquier manera o siendo cuidadoso en su representación.

Dicho de forma menos coloquial: no es lo mismo primar la velocidad del dibujado en detrimento de su calidad y descuidando ser fiel al original que ser cuidadoso y preciso a costa de tardar algo más.

Para indicarle al navegador qué aspecto priorizar al "dibujar" un elemento CSS define un grupo de propiedades *-rendering, en las que el * cambia dependiendo del tipo de elemento que sea:

  • Text-rendering
  • Image-rendering
  • Shape-rendering
  • Color-rendering

Básicamente podemos elegir entre dibujar los elementos con mayor calidad y/o precisión o hacerlo a mayor velocidad a costa de lo anterior.

Tienes un post en el Blog sobre ellas. Qué es cada una y los distintos valores admitidos, que siendo básicamente los mismos no son exactamente iguales. Por ejemplo, en el cso de image-rendering podemos optar por pixelarlas o con los textos decantarnos por ser la legibilidad usando el valor optimizeLegibility

La propiedad CSS `contain´

ADVERTENCIA:
No confundir esta nueva propiedad CSS con el valor contain usado en otras propiedades CSS como object-fit o background-size

El nuevo documento CSS Containment [*] Module Level 3 de muy reciente creación (Febrero 2016) define la nueva propiedad CSS contain y establece sus valores.

[*] containment = Contención. Acción de mantener algo nocivo bajo control dentro de unos límites.

Esta nueva propiedad permite al usuario indicar al navegador que sustraiga elementos (entendidos como nodos del DOM) del resto de la página y manejarlos de forma independiente al resto.

¿Suena raro? Piensa en lo que ocurre en la actualidad con los iframe. El navegador los recibe, reserva un espacio para ellos y sigue dibujando la página con independencia de lo que ocurra dentro del iframe (con sus contenidos y recursos asociados).

De ella dice este documento:

La propiedad contain permite a un autor indicar que un elemento y su contenido son, tanto como sea posible, independientes del resto del árbol del documento. Esto permite a las aplicaciones de usuario optimizaciones mucho más efectivas cuando se renderiza una página usando `contain´ adecuadamente, y permite a los autores tener la confianza de que su página no se bloquea accidentalmente por recursos secundarios.

¿Un ejemplo? Imagina que en tu header muestras algo secundario (en cuanto no primordial para el contenido de la página) como un bloque de anuncios servido por un tercero y que se queda pillado. O con aquello que inicialmente cargas oculto (display: none) y que se demora en estar listo.

Pues con la propiedad CSS contain ahora le puedes decir al navegador algo como hey! déjalo a su bola y sigue con el resto.

Valores de la propiedad CSS `contain´: none | strict | layout | style | paint

  • none: La propiedad no aplica ningún tipo de contención.
  • strict: Este valor activa todas las formas de contención: layout, style y paint , de modo que sus contenidos no tengan ningún efecto sobre el resto de la página que esté fuera de los límites del elemento.
  • layout: Este valor activa la contención en el layout (diseño, disposición, colocación) del elemento. El resto de nodos no se verán afectados por los efectos derivados de la creación del layout generado por él y sus hijos.
  • style: Este valor activa la contención de los estilo en el elemento. Esto asegura que, para las propiedades que pueden tener efectos en algo más que un elemento y sus descendientes, los efectos "no escapan" del elemento contenedor.
  • paint: Este valor activa la contención del dibujado (paint) en el elemento. Esto asegura que los descendientes que contiene el elemento no se muestran fuera de sus límites, por lo que si un elemento se encuentra fuera de la pantalla (off-screen) o no visible, garantiza que sus descendientes tampoco sean visibles.

Estado de `contain´

Está tan reciente el documento y la propiedad contain que de momento ni Ver caniuse.com que la recoge como no oficial. Así que si quieres puedes acelerar su entrada en él votando por ella.

De los navegadores que he podido probar sólo Chrome le da soporte previa habilitación a través de chrome://flags/#enable-experimental-web-platform-features en las versiones anteriores a la 52. En su v52 ya viene de serie activado.

Y tengo la impresión subjetiva tras usarla en algunos apartados del blog que su efecto es notorio para bien. Sensación, que no datos objetivos.

Ejemplos de uso

contain: strict
Un caso que ya mencionaba para el valor `strict´ son los bloques de anuncios servidos por terceros o incluso los famosos widgets o complementos que aportando algún valor a la página no dejan de ser secundarios o complementarios.

contain: paint
Especialmente indicada esta declaración para todos aquellos elementos que de entrada se cargan ocultos, tales como menús de navegación, contenidos de tabs o pestañas, galerías o sliders...

Al activar la contención en ellos facilitamos que el contenido realmente relevante no se vea penalizado por aquello que no se necesita que esté disponible y accesible cuanto antes mejor.

CSS containment: más información

Para ampliar información y datos sobre esta nueva propiedad no he encontrado (en el momento de escribir este artículo, Julio 2016) otra cosa que el propio documento del W3c "CSS Containment* Module Level 3" y:

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 8

  1. Hola, excelente blog!
    Intenté votar (con el móvil) desde el link que pusiste, pero no veo ninguna opción para hacerlo. ¿Qué busco?
    Por otro lado, encontré la pagina de bugzilla para Firefox donde sí pude votar por esa opción (con el mío son 3 votos ppr ahora:)

    Saludos!

    ResponderEliminar
    Respuestas
    1. Gracias Fernando
      Creo que usando el botón Support data suggestion pero creo que has de estar logueado y ahora no recuerdo mis datos para hacerlo y así poder confirmártelo :palm:

      Pero creo que con esta propiedad (por su propia naturaleza y finalidad) va a pasar como con will-change: los propios navegadores son los más interesados en que se use ya que supondrá una mejora de su funcionamiento en el renderizado de la página.

      Un saludo

      Eliminar
    2. Ok, genial, lo busco.

      Hace poco que comencé a leer tu blog (que me encanta, me suscribí por RSS) porque estoy comenzando con la programación web (vengo de las apps de escritorio:) con un curso de MiriadaX sobre HTML5, Javascript y CSS 3, y veo que tratás te hacer todo con CSS siempre que sea posible, y por eso esta pregunta que tiene que ver con el tema de este artículo:

      ¿Es siempre más rápido y óptimo intentar hacer todo lo posible con CSS antes que con Javascript, o hay algún caso donde sea preferible usar Javascript (jQuery,etc) en vez de CSS, por ejemplo, por tener soporte multinavegador?

      Creo que sería interesante un artículo sobre esto :)

      Gracias!

      Eliminar
    3. Por partes, como le gusta al amigo Dexter ;-)

      veo que tratas te hacer todo con CSS siempre
      jeje Porque de CSS puedo hacer como que conozco algo y engañaros lo suficiente.
      Pero sobre javascript... ¡soy un ignorante total! y ya hay suficientes escribiendo sobre él xD

      ¿Es siempre más rápido y óptimo intentar hacer... ?
      Bueno, déjame que como eres reciente te descubra otro secreto: sólo soy "un enredique de CSS" así que no puedo valorar cuestiones "productivistas".
      Eso sí, cada lenguaje tiene su encomienda y lo más sensato es usar cada cual en su parcela.
      Y en caso de los campos solapados será cuestión de valorar cada caso.

      ¡Ah! Que me olvidaba tu mención de jQuery. Pues que siga ahí olvidado ;-)
      Tengo un amigo que dice que las librerías tipo jQuery son para los que no saben javascript y que en el 99% de los casos de uso son prescindibles.
      Pero este aspecto será mejor para ti que sigas los consejos de otros. Quizás Furoya pueda ayudarte más.

      Un saludo, Fernando.

      Eliminar
  2. ¡Muchas gracias!
    Un excelente artículo.
    Como casi todos tus 'posts', una lección muy interesante.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Gracias [dobles ;-)] Henry

      Un saludo

      Eliminar
  3. Muy buen artículo.
    Gracias por mantenermos siempre actualizados!
    Saludos!

    ResponderEliminar
  4. Muy buen artículo muchas gracias!! hay un tema relacionado y es que tipo de instrucciones y en que momento cargan objetos, por ejemplo ¿una imagen con display none se carga? ¿una imagen como background de un div que tiene display none se carga? podrias hacer un post sobre eso

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap