Neu in Chrome 124

Pete LePage

Die wichtigsten Neuerungen in Chrome 124:

Du möchtest mehr darüber erfahren? Versionshinweise für Chrome 124

Deklaratives Shadow-DOM in JavaScript verwenden

Es gibt zwei neue APIs, mit denen das deklarative Shadow-DOM in JavaScript verwendet werden kann.

setHTMLUnsafe() ähnelt innerHTML und ermöglicht es, den inneren HTML-Code eines Elements auf den angegebenen String festzulegen. Das ist hilfreich, wenn Sie HTML-Code mit deklarativem Shadow-DOM haben, z. B. diesen hier:

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

Wenn Sie nur innerHTML verwenden, wird es vom Browser nicht richtig geparst und es gibt kein Shadow-DOM. Mit setHTMLUnsafe() wird das Shadow-DOM jedoch erstellt und das Element wird wie erwartet geparst.

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

Die andere API ist parseHTMLUnsafe() und funktioniert ähnlich wie DOMParser.parseFromString().

Beide APIs sind unsicher, d. h., sie führen keine Eingabebereinigung durch. Achten Sie also darauf, dass alles, was Sie ihnen füttern, sicher ist. In einer kommenden Version wird die Eingabe voraussichtlich bereinigt.

Beide APIs werden bereits in der neuesten Version von Firefox und Safari unterstützt.

WebSocket Stream API

WebSockets sind eine gute Möglichkeit, Daten zwischen dem Browser des Nutzers und dem Server hin- und herzuleiten, ohne auf Polling angewiesen zu sein. Das ist ideal für Chat-Apps, in denen Sie Informationen so schnell wie möglich verarbeiten möchten.

Was aber, wenn die Daten schneller eintreffen, als Sie sie verarbeiten können?

Das nennt man Gegendruck und kann Ihnen viel Kopfzerbrechen bereiten. Leider bietet die WebSocket API keine gute Möglichkeit, mit Backpressure umzugehen.

Die WebSocket Stream API bietet die Vorteile von Streams und WebSockets. Das bedeutet, dass Backpressure ohne zusätzliche Kosten angewendet werden kann.

Erstelle zuerst eine neue WebSocketStream und übergebe ihr die URL des WebSocket-Servers.

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);
}

Als Nächstes warten Sie, bis die Verbindung geöffnet wurde. Dies führt zu einer ReadableStream und einer WritableStream. Wenn du die Methode ReadableStream.getReader() aufrufst, erhältst du eine ReadableStreamDefaultReader, aus der du dann Daten read() kannst, bis der Stream fertig ist.

Rufen Sie zum Schreiben von Daten die Methode WritableStream.getWriter() auf. Sie erhalten dann eine WritableStreamDefaultWriter, in die Sie Daten write() können.

Verbesserungen bei Übergängen ansehen

Ich freue mich auf die Funktionen für Ansichtsübergänge. In Chrome 124 gibt es zwei neue Funktionen, die die Ansichtsübergänge vereinfachen sollen.

Das pageswap-Ereignis wird für das Fensterobjekt eines Dokuments ausgelöst, wenn ein Dokument durch eine Navigation durch ein neues Dokument ersetzt wird.

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

Außerdem können Sie das Rendern eines Dokuments blockieren, bis die wichtigen Inhalte geparst wurden. So wird in allen Browsern eine einheitliche First Paint sichergestellt.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • disallowReturnToOpener informiert den Browser darüber, dass im Bild-im-Bild-Fenster keine Schaltfläche angezeigt werden soll, mit der Nutzer zum Tab zurückkehren können, über den sie das Video geöffnet haben.

  • Per Tastatur fokussierbare Scroll-Container verbessern die Barrierefreiheit, indem Scroll-Container mithilfe der sequenziellen Fokusnavigation fokussierbar gemacht werden.

  • Mit der universellen Installation können Nutzer jede Seite installieren, auch solche, die nicht die aktuellen PWA-Kriterien erfüllen.

Weitere Informationen

Dies sind nur einige wichtige Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 124.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 125 veröffentlicht wird, informieren wir Sie hier über die Neuigkeiten in Chrome.