Nouveautés de Chrome 122

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Voyons ce que Chrome 122 réserve aux 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 est tout ou rien.

L'idée de base de l'API Storage Buckets est de permettre aux sites de créer plusieurs buckets de stockage, où le navigateur peut choisir de supprimer chaque bucket indépendamment des autres. Vous pouvez donc spécifier une priorité d'éviction pour vous assurer que les données les plus intéressantes 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.

Pour en savoir plus et obtenir des exemples de code pour commencer à utiliser les buckets Storage, consultez Tous les stockages ne sont pas égaux: présentation des buckets Storage.

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 en haut du panneau Performances vous permet désormais de définir des repères et de passer de l'un à l'autre. Pour définir un fil d'Ariane, sélectionnez une plage sur la timeline, pointez dessus, puis cliquez sur le bouton N ms 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 au-dessus de la timeline. Regardez la vidéo suivante pour voir comment les éléments de navigation fonctionnent.

De plus, des initiateurs d'événements sont désormais disponibles dans le canal Principal. Par défaut, le canal Performances > Principal affiche des flèches reliant les initiateurs aux événements suivants qu'ils ont provoqués.

  • Invalidation du style ou de la mise en page -> Recalculer les styles ou Mise en page
  • Request Animation Frame -> Animation Frame Fired
  • Request Idle Callback (Demander un rappel à la prochaine période d'inactivité) -> Fire Idle Callback (Déclencher le rappel à la prochaine période d'inactivité)
  • Installer un minuteur -> Minuteur déclenché
  • Créer un WebSocket -> Envoyer et Recevoir le handshake WebSocket ou Détruire le WebSocket

Pour afficher les flèches, recherchez un tel événement dans la trace, puis cliquez dessus.

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

Pour en savoir plus sur les mises à jour de DevTools, consultez Nouveautés de DevTools 122.

Option unsanitized de l'API Async Clipboard

Lorsque vous copiez et collez du texte à l'aide de l'API Async Clipboard, l'option unsanitized de la méthode read() permet aux applications et aux sites Web d'obtenir du code HTML non nettoyé. Sauf si les sites incluent cette propriété, la lecture du code HTML à partir du presse-papiers sera nettoyée.

Par défaut, lors de la lecture des types MIME text/html à l'aide de l'API asynchrone, l'outil de nettoyage est appelé pour supprimer le contenu du balisage HTML pour des raisons de sécurité, et les styles sont intégrés dans le code HTML généré. Cela entraîne une charge utile HTML importante et une perte de fidélité du contenu HTML lorsqu'il est lu par des développeurs Web ou des 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>'

Sanitisé (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 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, il y a bien d'autres choses.

  • Dans CSS, les requêtes de conteneur avec des fonctionnalités non prises en charge ne correspondent jamais. Par exemple, la requête suivante ne correspondra jamais en raison de l'élément géographique inconnu:
@container (width > 0px) or (unknown) {}

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

  • Avec drawingBufferStorage de WebGL, vous pouvez éviter une copie supplémentaire lors de la conversion du rendu au format de pixel du tampon de dessin par défaut et dessiner du contenu avec plus de 8 bits de précision.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour découvrir d'autres modifications apportées à Chrome 122.

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Adriana Jara. Dès que Chrome 123 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.