soy Kseso y esto EsCSS

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

xPor Kseso ✎ 11
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

CSS Containment Module Level 1 y la propiedad CSS `contain´: renderizado más eficaz

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

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

Cronología del módulo CSS Containment

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.

Actualización 21 Febrero 2017:
Hoy 21 de Febrero de 2017 ha sido publicado el documento oficial por el W3c: CSS Containment Module Level 1 (W3C First Public Working Draft, 21 February 2017).

Actualización 8 de Agosto 2017
El documento CSS Containment Module Level 1 alcanza el status de W3C Candidate Recommendation

Intro o razones para la existencia de `containt´

La motivación del W3c para esta nueva propiedad CSS `containt´ la expone en el punto 1 o introducción:

La representación eficaz de un sitio web depende de que el agente de usuario pueda detectar qué partes de la página se muestran, qué partes pueden afectar a la sección que se muestra actualmente y qué puede ser ignorado.
Hay varias heurísticas que se pueden utilizar para adivinar cuándo un subárbol dado es independiente del resto de la página de alguna manera, pero son frágiles, por lo que los cambios inofensivos en una página pueden inadvertidamente hacer fallar la heurística y caer en un modo lento. También hay muchas cosas que sería bueno aislar pero que son difíciles o imposibles de detectar de una manera heurística.
Para aliviar estos problemas y permitir el aislamiento seguro y predecible de un subárbol del resto de la página, esta especificación define la propiedad containt

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´: one | strict | content | [size || layout || style || paint]

Cuatro son los aspectos de la representación o renderizado de un elemento sobre los que se puede actuar con la propiedad CSS contain:

  1. size
  2. layout
  3. style
  4. paint

El nuevo documento los explica detalladamente en el apartado Types of Containment.

Estos aspectos o tipos de contención se pueden pasar como valores individuales (usando esos mismos términos en inglés) o agrupados con las palabras claves:

  1. none
  2. strict
  3. content
  • none: La propiedad no aplica ningún tipo de contención.
  • strict: Este valor activa todas las formas de contención. Equivale a declarar contain: size layout style 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.
  • content: Todas las formas de contención excepto size. Equivale a declarar: contain: layout style paint;
  • size: El valor activa la contención del tamaño del elemento. Esto asegura que el elemento contenedor pueda ser colocado sin necesidad de examinar sus descendientes.
  • layout: Este valor activa la contención de diseño del elemento. Esto asegura que el elemento contenedor es totalmente opaco para los propósitos de disposición; Nada de afuera puede afectar su diseño interno, y viceversa.
  • style: Este valor activa la contención del estilo del elemento. Esto asegura que, para propiedades que puedan tener efectos sobre algo más que un elemento y sus descendientes, dichos efectos no escapen al elemento que contiene.
    Nota: containt: style NO equivale a scoped*.
  • paint: Este valor activa la contención de "dibujado" (paint) para el elemento. Esto asegura que los descendientes del elemento contenedor no se muestren fuera de sus límites, por lo que si un elemento está fuera de pantalla o no es visible, también se garantiza que sus descendientes no son 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 1" y:

avatar del Editor del blog

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: 11

  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
    Respuestas
    1. Hola Daniel

      Los recursos incluidos en CSS (como imágenes, tipografías...) el navegador los va pidiendo a medida que se los encuentra (lee) en la hoja de estilos.

      Cualquier elemento que ocultes con CSS ya está en el DOM, por lo tanto se han pedido y han sido servidos por el servidor.

      Sobre estos temas, incluidos los recursos usados vía CSS, y el rendimiento hay ya mucha literatura.
      Con una búsqueda por background-image perfomance (por ejemplo) encontrarás información al respecto.

      Un saludo.

      Eliminar
  5. Hola Kseso
    Algún día cuando vengas a Rosario, Argentina, o (menos probable) yo viaje a España, nos tomaremos esas cervezas que te debo, por toda la ayuda, conocimientos y sobre todo por el impulso a investigar sobre CSS al que nos empujas con tus post.
    Un abrazo.
    Nada, solo eso, de vez en cuando viene bien un poco de agradecimiento.
    Saludos
    Cristian

    ResponderEliminar
    Respuestas
    1. Gracias, Cristian
      Pero por si acaso se alarga ¡no permitas que se estropee la cerveza!
      Por MonEsVol y sus profetas Los Piratas.

      Un saludo.

      Eliminar

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