Neu in Chrome 124

Pete LePage

Hier sind die Highlights von Chrome 124:

Du möchtest den ganzen Überblick behalten? Weitere Informationen finden Sie in den Versionshinweisen für Chrome 124.

Deklaratives Schatten-DOM in JavaScript verwenden

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

setHTMLUnsafe() ähnelt innerHTML und ermöglicht es Ihnen, den inneren HTML-Code eines Elements auf den angegebenen String festzulegen. Dies ist hilfreich, wenn Sie HTML haben, das ein deklaratives Shadow DOM wie dieses enthält.

<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, parst der Browser sie nicht richtig und es gibt kein Shadow DOM. Mit setHTMLUnsafe() wird jedoch Ihr Schatten-DOM erstellt und das Element 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, was bedeutet, dass sie keine Eingabebereinigung durchführen. Deshalb solltest du darauf achten, dass alles, was du ihnen fütterst, sicher ist. In einer zukünftigen Version wird voraussichtlich eine Version bereitgestellt, die die Eingabe bereinigt.

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

WebSocket-Stream-API

WebSockets sind eine hervorragende Möglichkeit, um Daten zwischen dem Browser des Nutzers und dem Server zu senden, ohne Abfragen ausführen zu müssen. Dies eignet sich hervorragend für Chat-Anwendungen, in denen Sie sofort mit Informationen umgehen möchten.

Aber was ist, wenn die Daten schneller ankommen, als Sie verarbeiten können?

Das nennt man Rückdruck, der bei dir starke Kopfschmerzen verursachen kann. Leider bietet die WebSocket API keine gute Methode, um mit Rückdruck umzugehen.

Die WebSocket Stream API bietet Ihnen die Leistung von Streams und WebSockets, sodass Sie einen Gegendruck ohne zusätzliche Kosten ausüben können.

Erstellen Sie zuerst einen neuen WebSocketStream und übergeben Sie ihm 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 hergestellt wurde. Dies führt zu ReadableStream und WritableStream. Durch Aufrufen der Methode ReadableStream.getReader() erhalten Sie ein ReadableStreamDefaultReader-Objekt, mit dem Sie bis zum Abschluss des Streams read()-Daten abrufen können.

Rufen Sie zum Schreiben von Daten die Methode WritableStream.getWriter() auf, die ein WritableStreamDefaultWriter-Objekt generiert, an das Sie Daten dann write() senden können.

Verbesserungen bei den Übergängen ansehen

Ich freue mich auf die Funktionen für Ansichtsübergänge. In Chrome 124 gibt es zwei neue Funktionen, die den Wechsel von Ansichten erleichtern sollen.

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

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

Und durch das Blockieren des Renderings von Dokumenten können Sie das Rendern eines Dokuments blockieren, bis der kritische Inhalt geparst wurde. Dadurch wird in allen Browsern ein einheitliches First Paint sichergestellt.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • disallowReturnToOpener weist den Browser darauf hin, dass im Bild-im-Bild-Fenster keine Schaltfläche angezeigt werden sollte, über die der Nutzer zum geöffneten Tab zurückkehren kann.

  • Mit der Tastatur fokussierbare Scroll-Container verbessern die Barrierefreiheit, da Scroll-Container über die sequenzielle Fokusnavigation fokussiert werden können.

  • Mit der universellen Installation können Nutzer jede Seite installieren, auch solche, die die aktuellen Kriterien für PWAs nicht erfüllt.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 124.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

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