Novedades de Chrome 122

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Analicemos las novedades para desarrolladores en Chrome 122.

API de Storage Buckets.

La API de Storage Buckets proporciona más nivel de detalle para administrar mejor el almacenamiento persistente.

Tradicionalmente, a medida que el usuario se queda sin espacio de almacenamiento en su dispositivo, los datos almacenados con APIs como IndexedDB o localStorage se pierden sin que el usuario pueda intervenir. Una forma de hacer que el almacenamiento sea persistente es usar el método persist() de la interfaz de StorageManager. Sin embargo, este método de solicitud de almacenamiento persistente es todo o nada.

La idea principal de la API de Storage Buckets es otorgarles a los sitios la capacidad de crear varios buckets de almacenamiento, en los que el navegador puede elegir borrar cada bucket independientemente de los demás. Por lo tanto, puedes especificar la priorización de expulsión para asegurarte de que no se borren los datos más valiosos.Cada bucket de almacenamiento puede contener datos asociados con APIs de almacenamiento establecidas, como IndexedDB y CacheStorage.

Consulta No todo el almacenamiento es igual: presentamos los buckets de almacenamiento para obtener más detalles y ejemplos de código para comenzar a usar los buckets de almacenamiento.

Mejoras de Herramientas para desarrolladores en el panel de rendimiento

En Chrome 122, DevTools incluye las siguientes mejoras en el panel Rendimiento.

En primer lugar, la línea de tiempo que se encuentra en la parte superior del panel Rendimiento ahora te permite establecer migas de pan y saltar entre ellas. Para establecer un pan de miga, selecciona un rango en el Cronograma, coloca el cursor sobre él y haz clic en el botón correspondiente a N ms. Puedes crear varias rutas de navegación anidadas en sucesión. Para saltar entre niveles de zoom, haz clic en la ruta de navegación correspondiente de la cadena que se encuentra en la parte superior de Rutas. Mira el siguiente video para ver el uso de los indicadores de ruta en acción.

Además, ahora hay iniciadores de eventos en la pista Principal. De forma predeterminada, la pista Rendimiento > Principal muestra flechas que conectan los activadores y los siguientes eventos que causaron.

  • Invalidación de estilo o diseño -> Volver a calcular estilos o Diseño
  • Request Animation Frame -> Animation Frame Fired
  • Solicitar devolución de llamada inactiva -> Activar la devolución de llamada inactiva
  • Install Timer -> Timer Fired
  • Crear WebSocket -> Enviar… y Recibir el protocolo de enlace de WebSocket o Destruir WebSocket

Para ver las flechas, busca un evento de este tipo en el seguimiento y haz clic en él.

Una flecha desde la solicitud y la activación de una devolución de llamada inactiva

Encuentra más actualizaciones de Herramientas para desarrolladores en Novedades de Herramientas para desarrolladores 122.

Opción unsanitized de la API de Async Clipboard

Cuando se copia y pega con la API de Async Clipboard, la opción unsanitized del método read() permite que las apps y los sitios web obtengan HTML no desinfectado. A menos que los sitios incluyan esta propiedad, se depurará la lectura de HTML desde el portapapeles.

De forma predeterminada, cuando se leen tipos de MIME text/html con la API asíncrona, se invoca al limpiador para quitar el contenido del lenguaje de marcado HTML debido a problemas de seguridad, y los estilos se intercalan en el HTML resultante. Esto conduce a una gran carga útil de HTML y a la pérdida de fidelidad del contenido HTML cuando lo leen los desarrolladores web o las apps para dispositivos móviles.

Puedes ver la diferencia en el resultado en el siguiente ejemplo.

Entrada:

<style>p { color: blue; }</style><p>Hello, World!</p>'

Limpiada (opción predeterminada):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

Con la opción unsanitized:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Consulta Cómo desbloquear el acceso al portapapeles para conocer los conceptos básicos de la API de Clipboard.

Y mucho más.

Por supuesto, hay mucho más.

  • En CSS, las consultas de contenedores con funciones no compatibles nunca coinciden. Por ejemplo, la siguiente consulta nunca coincidirá debido al atributo desconocido:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() no afecta a los objetos File, solo borra los objetos de tipo de texto.

  • Con el elemento drawingBufferStorage de WebGL, puedes evitar una copia adicional cuando conviertes la renderización al formato de píxeles del búfer de dibujo predeterminado y dibujar contenido con más de 8 bits de precisión.

Lecturas adicionales

Esto abarca solo algunos aspectos destacados. Consulta los siguientes vínculos para ver cambios adicionales en Chrome 122.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube para desarrolladores de Chrome y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Adriana Jara y, en cuanto se lance Chrome 123, estaré aquí para contarte las novedades.