Nieuw in Chrome 124

Pete LePage

Dit zijn de hoogtepunten van Chrome 124:

Wil je de volledige uitleg? Bekijk dan de release-opmerkingen van Chrome 124 .

Gebruik declaratieve schaduw-DOM in JavaScript

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

setHTMLUnsafe() is vergelijkbaar met innerHTML en laat je de interne HTML van een element instellen op de opgegeven string. Dit is handig wanneer je HTML hebt met een declaratieve shadow DOM, zoals deze.

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

Als je alleen innerHTML gebruikt, parseert de browser het niet goed en is er geen schaduw-DOM. Maar met setHTMLUnsafe() wordt je schaduw-DOM aangemaakt en wordt het element geparseerd zoals je zou verwachten.

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

De andere API is parseHTMLUnsafe() en deze werkt op een vergelijkbare manier als DOMParser.parseFromString() .

Beide API's zijn onveilig , wat betekent dat ze geen invoer opschonen. Zorg er dus voor dat alles wat je ze geeft veilig is. In een toekomstige release verwachten we een versie die wel invoer opschoning biedt.

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 ideaal voor zaken als chat-apps, waar je informatie direct wilt verwerken zodra deze binnenkomt.

Maar wat als de gegevens sneller binnenkomen dan u kunt verwerken?

Dat heet tegendruk en kan je behoorlijk wat hoofdpijn bezorgen. Helaas heeft de WebSocket API geen handige manier om met tegendruk om te gaan.

Met de WebSocket Stream API beschikt u over de kracht van streams en websockets, wat betekent dat er tegendruk kan worden toegepast zonder extra kosten.

Begin met het maken van een nieuwe WebSocketStream en geef hieraan 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 geopend is, wat resulteert in een ReadableStream en een WritableStream . Door de ReadableStream.getReader() -methode aan te roepen, krijg je een ReadableStreamDefaultReader , waaruit je vervolgens gegevens kunt read() totdat de stream klaar is.

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

Verbeteringen in weergaveovergangen

Ik ben enthousiast over de View Transitions-functies. Chrome 124 bevat twee nieuwe functies die zijn ontworpen om weergaveovergangen eenvoudiger te maken.

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

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

En met document render-blocking kunt u het renderen van een document blokkeren totdat de kritieke inhoud is geparseerd. Zo bent u verzekerd van een consistente eerste weergave in alle browsers.

En nog veel meer!

Er is natuurlijk nog veel meer.

  • disallowReturnToOpener geeft de browser een melding dat er geen knop in het beeld-in-beeldvenster moet worden weergegeven waarmee de gebruiker kan teruggaan naar het tabblad van de opener.

  • Met het toetsenbord te bedienen scrollcontainers verbeteren de toegankelijkheid door scrollcontainers focusbaar te maken met behulp van sequentiële focusnavigatie.

  • En met universele installatie kunnen gebruikers elke pagina installeren, zelfs pagina's die niet voldoen aan de huidige PWA-criteria .

Verder lezen

Dit zijn slechts enkele belangrijke hoogtepunten. Bekijk de volgende links voor aanvullende wijzigingen in Chrome 124.

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