Nouveautés de Chrome 122

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés de Chrome 122 pour les développeurs.

API Storage Buckets.

L'API Storage Buckets offre plus de précision pour mieux gérer le stockage persistant.

Traditionnellement, lorsque l'utilisateur manque d'espace de stockage sur son appareil, les données stockées avec des API telles que IndexedDB ou localStorage sont perdues sans que l'utilisateur puisse intervenir. Pour rendre le stockage persistant, vous pouvez utiliser la méthode persist() de l'interface StorageManager. Toutefois, cette méthode de demande de stockage persistant

L'objectif principal de l'API Storage Buckets est d'offrir aux sites la possibilité de créer plusieurs buckets de stockage que le navigateur peut choisir de supprimer indépendamment des autres. Vous pouvez donc spécifier un niveau de priorité d'éviction pour vous assurer que les données les plus importantes ne sont pas supprimées.Chaque bucket de stockage peut contenir des données associées à des API de stockage établies telles que IndexedDB et CacheStorage.

Consultez la page sur la création d'espaces de stockage différentes: découvrez les buckets de stockage pour obtenir plus de détails et des exemples de code pour commencer à utiliser les buckets de stockage.

Améliorations apportées aux outils de développement dans le panneau "Performances"

Dans Chrome 122, les outils de développement incluent les améliorations suivantes dans le panneau Performances.

Tout d'abord, la chronologie située en haut du panneau Performances vous permet désormais de définir un fil d'Ariane et de passer de l'un à l'autre. Pour définir un fil d'Ariane, sélectionnez une plage sur la timeline, passez la souris dessus, puis cliquez sur le bouton N ms zoom_in correspondant. Vous pouvez créer plusieurs fils d'Ariane imbriqués à la suite. Pour passer d'un niveau de zoom à un autre, cliquez sur le fil d'Ariane correspondant dans la chaîne située au-dessus de la chronologie. Regardez la vidéo suivante pour voir le fil d'Ariane à l'œuvre.

De plus, il existe désormais des lanceurs d'événements dans le canal Main (Principal). Par défaut, le canal Performances > Principal affiche des flèches qui relient les demandeurs et les événements suivants qu'ils ont causés.

  • Invalidation du style ou de la mise en page -> Recalculer les styles ou Mise en page
  • Demander un frame d'animation -> Frame d'animation déclenché
  • Demander un rappel à la prochaine période d'inactivité -> Fire Idle Callback (Demander un rappel à la prochaine période d'inactivité)
  • Minuteur d'installation -> Minuteur déclenché
  • Create WebSocket -> Send... and Receive WebSocket Handshake (Créer le handshake WebSocket ou Destroy WebSocket).

Pour voir les flèches, recherchez un événement de ce type dans la trace et cliquez dessus.

Flèche issue de la requête et du déclenchement d'un rappel inactif.

Pour en savoir plus sur les nouveautés concernant les outils de développement, consultez Nouveautés de la version 122 des outils de développement.

Option unsanitized de l'API Async Clipboard

Lors du copier-coller à l'aide de l'API Async Clipboard, l'option unsanitized pour la méthode read() permet aux applications et aux sites Web d'obtenir du code HTML non rectifié. Si les sites n'incluent pas cette propriété, la lecture du code HTML à partir du presse-papiers sera nettoyée.

Par défaut, lors de la lecture de types MIME text/html à l'aide de l'API asynchrone, l'outil de nettoyage est appelé pour supprimer le contenu du balisage HTML en raison de problèmes de sécurité, et les styles sont intégrés dans le code HTML obtenu. Cela entraîne une charge utile HTML volumineuse et une perte de fidélité du contenu HTML lorsqu'il est lu par les développeurs Web ou les applications mobiles.

Vous pouvez voir la différence dans le résultat de l'exemple suivant.

Entrée :

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

Nettoyage (par défaut):

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

Avec l'option unsanitized:

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

Consultez la page Débloquer l'accès au presse-papiers pour découvrir les principes de base de l'API Clipboard.

Et bien plus !

Bien sûr, ce n’est pas tout.

  • En CSS, les requêtes de conteneur comportant des fonctionnalités non compatibles ne correspondent jamais. Par exemple, la requête suivante ne correspondra jamais en raison d'une fonctionnalité inconnue:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() n'affecte pas les objets File, mais ne supprime que les objets de type texte.

  • La méthode drawingBufferStorage de WebGL vous permet d'éviter une copie supplémentaire lors de la conversion du rendu au format de pixels du tampon de dessin par défaut et de dessiner des contenus d'une précision supérieure à 8 bits.

Documentation complémentaire

Nous n'aborderons ici que certains points clés. Consultez les liens suivants pour obtenir des modifications supplémentaires dans Chrome 122.

S’abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Adriana Jara, soja, et dès la sortie de Chrome 123, je serai là pour vous faire part des nouveautés de Chrome.