Nouveautés de Chrome 122

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Intéressons-nous maintenant aux 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 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"

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

Tout d'abord, la chronologie en haut du panneau Performances vous permet à présent de définir des fils d'Ariane et de passer de l'un à l'autre. Pour définir un fil d'Ariane, sélectionnez une plage dans 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 fonctionnent les breadcrumbs.

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

  • Invalidation de style ou de 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 voir les flèches, recherchez un événement de ce type dans la trace et 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 une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Bonjour Adriana Jara. Dès la sortie de Chrome 123, je serai là pour vous présenter les nouveautés de Chrome.