Nieuw in Chrome 103

Pete LePage

Dit is wat u moet weten:

  • Er is een nieuwe HTTP 103-statuscode die de browser helpt bepalen welke content vooraf geladen moet worden, nog voordat de pagina überhaupt wordt weergegeven.
  • Met de Local Font Access API kunnen webapplicaties lettertypen op de computer van de gebruiker inventariseren en gebruiken.
  • AbortSignal.timeout() is een eenvoudigere manier om time-outs te implementeren op asynchrone API's.
  • En er is nog veel meer .

Ik ben Pete LePage . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 103.

HTTP 103-statuscode 103 - vroege hints

Een manier om de paginaprestaties te verbeteren, is door resource hints te gebruiken. Deze geven de browser hints over wat hij later nodig kan hebben. Bijvoorbeeld het vooraf laden van bestanden of het verbinden met een andere server.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Maar de browser kan niets met die aanwijzingen doen totdat de server ten minste een deel van de pagina heeft verzonden.

Stel je voor dat de browser een pagina opvraagt, maar de server heeft een paar honderd milliseconden nodig om deze te genereren. Totdat de browser de pagina begint te ontvangen, wacht hij gewoon. Maar als de server weet dat de pagina altijd een bepaalde set subresources nodig heeft, bijvoorbeeld een CSS-bestand, wat JavaScript en een paar afbeeldingen, kan hij direct reageren met de nieuwe HTTP 103 Early Hints-statuscode en de browser vragen om die subresources vooraf te laden.

Zodra de server de pagina heeft gegenereerd, kan deze worden verzonden met de normale HTTP 200-respons. Zodra de pagina binnenkomt, is de browser al begonnen met het laden van de benodigde bronnen.

Omdat dit een nieuwe HTTP-statuscode is, zijn er updates op uw server nodig om deze te kunnen gebruiken.

Aan de slag met HTTP 103 Eerste tips:

API voor lokale lettertypetoegang

Lettertypen op het web zijn altijd al een uitdaging geweest, en dat geldt vooral voor apps waarmee gebruikers hun eigen afbeeldingen en ontwerpen konden maken. Tot nu toe konden webapps alleen webfonts gebruiken. Er was geen manier om een ​​lijst te krijgen van de lettertypen die de gebruiker op zijn computer had geïnstalleerd. En er was geen manier om toegang te krijgen tot de volledige lettertypetabelgegevens, cruciaal als je je eigen aangepaste tekststapel wilt implementeren.

Met de nieuwe Local Font Access API kunnen webapplicaties de lokale lettertypen op het apparaat van de gebruiker opsommen en krijgen ze toegang tot de lettertypetabelgegevens.

Om een ​​lijst te krijgen met de lettertypen die op het apparaat zijn geïnstalleerd, moet u eerst toestemming vragen.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Roep vervolgens window.queryLocalFonts() aan. Deze retourneert een array met alle lettertypen die op het apparaat van de gebruiker zijn geïnstalleerd.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Als u alleen geïnteresseerd bent in een subset van lettertypen, kunt u deze filteren door de parameter postscriptNames toe te voegen.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Bekijk Tom's artikel Geavanceerde typografie gebruiken met lokale lettertypen op web.dev voor meer informatie.

Eenvoudigere time-outs met AbortSignal.timeout()

In JavaScript worden AbortController en AbortSignal gebruikt om een ​​asynchrone aanroep te annuleren.

Wanneer u bijvoorbeeld een fetch() -verzoek indient, kunt u een AbortSignal aanmaken en deze doorgeven aan fetch() . Als u fetch() wilt annuleren voordat deze wordt geretourneerd, roept u abort() aan op de instantie van AbortSignal . Tot nu toe moest u een setTimeout() gebruiken om de procedure na een bepaalde tijd te laten afbreken.

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Gelukkig is dat nu een stuk eenvoudiger geworden met een nieuwe statische methode timeout() in AbortSignal . Deze retourneert een AbortSignal object dat automatisch wordt afgebroken na het opgegeven aantal milliseconden. Wat voorheen een handvol regels code was, is er nu nog maar één.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() wordt ondersteund in Chrome 103 en is al beschikbaar in Firefox en Safari.

En nog veel meer!

Er is natuurlijk nog veel meer.

  • Het avif afbeeldingsbestandsformaat kan nu worden gedeeld via Web Share
  • Chromium komt nu overeen met Firefox door popstate direct na URL-wijzigingen te activeren. De volgorde van de gebeurtenissen is nu: popstate gevolgd door hashchange op beide platforms.
  • En Element.isVisible() vertelt u of een element zichtbaar is of niet.

Verder lezen

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 103.

Abonneren

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal voor Chrome-ontwikkelaars . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 104 uitkomt, vertel ik u graag wat er nieuw is in Chrome!