Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chrome 124

Pete LePage

Dit zijn de hoogtepunten in Chrome 124:

Er zijn twee nieuwe API's waarmee de declaratieve schaduw-DOM vanuit JavaScript kan worden gebruikt.
U kunt streams gebruiken in Web Sockets .
Bekijk overgangen worden een beetje beter.
En er is nog veel meer .

Wil je het volledige overzicht? Bekijk de releaseopmerkingen van Chrome 124 .

Gebruik declaratieve schaduw-DOM in JavaScript

Er zijn twee nieuwe API's waarmee de declaratieve schaduw-DOM vanuit JavaScript kan worden gebruikt.

setHTMLUnsafe() is vergelijkbaar met innerHTML en stelt u in staat de innerlijke HTML van een element in te stellen op de opgegeven tekenreeks. Dit helpt als je HTML hebt die een declaratieve schaduw-DOM bevat, zoals deze.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Als u alleen innerHTML gebruikt, zal de browser het niet correct parseren en is er geen schaduw-DOM. Maar met setHTMLUnsafe() wordt uw schaduw-DOM gemaakt en wordt het element geparseerd zoals u zou verwachten.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

De andere API is parseHTMLUnsafe() en werkt op dezelfde manier als DOMParser.parseFromString() .

Beide API's zijn onveilig , wat betekent dat ze geen invoeropschoning uitvoeren. Je wilt er dus zeker van zijn dat alles wat je ze voedt, veilig is. In een komende release verwachten we een versie die wel zorgt voor het opschonen van de invoer.

Ten slotte worden beide API's al ondersteund in de nieuwste versie van Firefox en Safari!

WebSocket Stream-API

WebSockets zijn een geweldige manier om gegevens heen en weer te sturen tussen de browser van de gebruiker en de server, zonder afhankelijk te zijn van polling. Dit is geweldig voor zaken als chat-apps, waarbij je informatie wilt afhandelen zodra deze binnenkomt.

Maar wat als de gegevens sneller arriveren dan u aankan?

Dat wordt tegendruk genoemd en kan ernstige hoofdpijn bij u veroorzaken. Helaas heeft de WebSocket API geen goede manier om met tegendruk om te gaan.

De WebSocket Stream API geeft u de kracht van streams en websockets, wat betekent dat tegendruk kan worden toegepast zonder extra kosten.

Begin met het samenstellen van een nieuwe WebSocketStream en geef deze de URL van de WebSocket-server door.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Vervolgens wacht je tot de verbinding wordt geopend, wat resulteert in een ReadableStream en een WritableStream . Door de methode ReadableStream.getReader() aan te roepen, krijgt u een ReadableStreamDefaultReader waaruit u vervolgens gegevens kunt read() totdat de stream is voltooid.

Om gegevens te schrijven, roept u de methode WritableStream.getWriter() aan, die u een WritableStreamDefaultWriter geeft, waarnaar u vervolgens gegevens kunt write() .

Bekijk overgangsverbeteringen

Ik ben enthousiast over de functies voor weergaveovergangen en er zijn twee nieuwe functies in Chrome 124 die zijn ontworpen om het bekijken van overgangen eenvoudiger te maken.

De gebeurtenis pageswap wordt geactiveerd op het vensterobject van een document wanneer een navigatie het document door een nieuw document vervangt.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

En documentweergaveblokkering waarmee u de weergave van een document kunt blokkeren totdat de kritieke inhoud is geparseerd, waardoor een consistente eerste weergave in alle browsers wordt gegarandeerd.

En meer!

Natuurlijk is er nog veel meer.

disallowReturnToOpener geeft de browser een hint dat deze geen knop in het beeld-in-beeld-venster mag weergeven waarmee de gebruiker terug kan gaan naar het opener-tabblad.
Scrollcontainers die op het toetsenbord kunnen worden gefocust, verbeteren de toegankelijkheid door scrollcontainers focusseerbaar te maken met behulp van sequentiële focusnavigatie.
En met universele installatie kunnen gebruikers elke pagina installeren, zelfs pagina's die niet aan de huidige PWA-criteria voldoen.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de volgende links voor aanvullende wijzigingen in Chrome 124.

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 125 uitkomt, zijn we hier om je te vertellen wat er nieuw is in Chrome!