Nieuw in Chrome 103

Piet LePage

Dit is wat u moet weten:

  • Er is een nieuwe HTTP 103-statuscode waarmee de browser kan beslissen welke inhoud vooraf moet worden geladen voordat de pagina zelfs maar is aangekomen.
  • De Local Font Access API geeft webapplicaties de mogelijkheid om lettertypen op te sommen en te gebruiken die op de computer van de gebruiker zijn geïnstalleerd.
  • AbortSignal.timeout() is een eenvoudigere manier om time-outs op asynchrone API's te implementeren.
  • En er is nog veel meer .

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

HTTP 103 statuscode 103 - vroege tips

Eén manier waarop u de paginaprestaties kunt verbeteren, is door bronhints te gebruiken. Ze geven de browser "hints" over wat hij later misschien nodig heeft. 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 pas op deze hints reageren als de server ten minste een deel van de pagina verzendt.

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

Zodra de server de pagina heeft gegenereerd, kan deze deze vervolgens verzenden met het normale HTTP 200-antwoord. Terwijl de pagina binnenkomt, is de browser al begonnen met het laden van de vereiste bronnen.

Omdat dit een nieuwe HTTP-statuscode is, zijn voor het gebruik ervan updates van uw server vereist.

Aan de slag met HTTP 103 Eerste tips:

Lokale API voor toegang tot lettertypen

Lettertypen op internet zijn altijd een uitdaging geweest, en vooral voor apps waarmee gebruikers hun eigen afbeeldingen en ontwerpen kunnen maken. Tot nu toe konden webapps alleen echt weblettertypen gebruiken. Er was geen manier om een ​​lijst met lettertypen te krijgen die de gebruiker op zijn computer had geïnstalleerd. En er was geen manier om toegang te krijgen tot de volledige gegevens in de lettertypetabel, wat van cruciaal belang is als u uw eigen aangepaste tekststapel moet implementeren.

De nieuwe Local Font Access API geeft webapplicaties de mogelijkheid om de lokale lettertypen op het apparaat van de gebruiker te inventariseren en biedt toegang tot de lettertypetabelgegevens.

Om een ​​lijst met lettertypen te krijgen 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. Het retourneert een array van 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 een postscriptNames parameter toe te voegen.

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

Bekijk Tom's artikel Gebruik geavanceerde typografie met lokale lettertypen op web.dev voor volledige details.

Gemakkelijkere time-outs met AbortSignal.timeout()

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

Wanneer u bijvoorbeeld een fetch() -verzoek doet, kunt u een AbortSignal maken en dit doorgeven aan fetch() . Als u fetch() wilt annuleren voordat deze terugkeert, roept u abort() aan op de instantie van AbortSignal . Als je tot nu toe wilde dat het na een bepaalde tijd werd afgebroken, moest je het in een setTimeout() wikkelen.

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 eenvoudiger geworden met een nieuwe statische timeout() -methode op AbortSignal . Het retourneert een AbortSignal object dat automatisch wordt afgebroken na het opgegeven aantal milliseconden. Wat vroeger een handvol regels code was, is nu slechts één.

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

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

En meer!

Natuurlijk is er nog veel meer.

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

Verder lezen

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

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 104 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!