CSS para mejorar rendimiento del navegador: CSS containment 8.8.17

CSS para mejorar rendimiento del navegador: CSS containment

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:

• El artículo de Michael Scharnagl "CSS containment".
• CSS containment por Paul Lewis en Google Developers.
• Bug en Mozilla
• Bug en Chrome

Kseso

the obCSServer ᛯ 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 Kseso