Nouveautés de Chrome 60

  • L'API Paint Timing vous permet de mesurer le délai de première peinture et le temps de première peinture du contenu avec l'API Paint Timings.
  • Le font-display vous permet de contrôler l'affichage des polices avant leur téléchargement.
  • WebAssembly est désormais disponible
  • Et ce n'est pas tout : beaucoup plus !

Vous souhaitez consulter la liste complète des modifications ? Consultez la liste des modifications apportées au dépôt source Chromium.

Je m'appelle Pete LePage. C'est parti pour découvrir les nouveautés de Chrome 60 pour les développeurs !

API Paint Timings

Lorsqu'un utilisateur accède à une page Web, il est à l'affût d'un retour visuel pour le rassurer que tout fonctionne correctement. Avec la nouvelle API Paint Timings, nous pouvons désormais mesurer cela.

L'API expose deux métriques:

  • Time to first paint : indique le moment où le navigateur commence à afficher un élément, c'est-à-dire la première partie du contenu à l'écran.
  • Time to First Contentful Paint : indique le moment où le navigateur affiche la première partie du contenu du DOM, du texte, d'une image, etc.

Consultez la page Exploiter les métriques de performances qui affectent le plus l'expérience utilisateur pour savoir comment suivre ces métriques et les utiliser pour améliorer votre expérience.

Propriété CSS font-display

Les polices Web vous permettent d'intégrer une typographie riche. Toutefois, si l'utilisateur ne possède pas encore la police de caractères, elle doit être téléchargée, ce qui risque de ralentir l'affichage de votre site.

Heureusement, la plupart des navigateurs utilisent une création de remplacement si le téléchargement de la police est trop long. La nouvelle propriété font-display vous permet de contrôler le rendu d'une police téléchargeable avant son chargement complet.

  • auto utilise la stratégie d'affichage des polices utilisée par le user-agent.
  • block attribue au cadran une courte période de bloc et une période d'échange infinie.
  • swap attribue à la police une période de bloc de zéro seconde et une période d'échange infinie.
  • fallback attribue à la police une période de bloc extrêmement petite et une courte période d'échange.
  • optional attribue à la police une période de bloc extrêmement petite et une période d'échange de zéro seconde.

Elle est compatible avec Chrome 60 et Opera, et est en cours de développement sur Firefox. Pour en savoir plus, consultez Contrôler les performances des polices avec font-display.

WebAssembly

Web Assembly ou Wasm offre une nouvelle façon d'exécuter du code, écrit dans des langages tels que C et C++ sur le Web, à une vitesse quasi native.

Il offre la vitesse nécessaire pour créer un éditeur vidéo intégré au navigateur ou pour exécuter un jeu Unity à une fréquence d'images élevée à l'aide des API de plate-forme Web standards existantes.

Vous trouverez plus d'informations sur webassembly.org, y compris des démonstrations, la documentation et comment démarrer.

Et bien plus !

  • La nouvelle API Web Budget permet aux sites ayant l'autorisation de notification push d'envoyer un nombre limité de messages push qui déclenchent des tâches en arrière-plan telles que la synchronisation des données ou la fermeture de notifications, sans avoir à afficher de notification visible par l'utilisateur.
  • PushSubscription.expirationTime est désormais disponible. Les sites sont informés de la date d'expiration de l'abonnement, ainsi que de la date d'expiration.
  • Les propriétés Le reste et la répartition des objets sont désormais prises en charge, ce qui facilite la fusion et le clone superficiel des objets, ainsi que l'implémentation de divers modèles d'objet immuables.

Remarque:L'API Payment Request a été transmise à Chrome 61.

Ce ne sont là que quelques-unes des modifications apportées à Chrome 60 pour les développeurs.

Ensuite, abonnez-vous à notre chaîne YouTube. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera mise en ligne.

Je m'appelle Pete LePage et, dès la sortie de Chrome 61, je serai là pour vous dire : quelles sont les nouveautés de Chrome !