Neu in Chrome 124

Pete LePage

Hier sind die Highlights in Chrome 124:

Du möchtest dir den kompletten Ablauf ansehen? In der Versionshinweise für Chrome 124

Deklaratives Shadow DOM in JavaScript verwenden

Es gibt zwei neue APIs, die die Verwendung des deklarativen Shadow DOM von JavaScript

setHTMLUnsafe() ähnelt innerHTML und ermöglicht Ihnen, den inneren HTML-Code von ein -Element zum angegebenen String hinzu. Das ist hilfreich, wenn Sie HTML-Code, der wie dieses ein deklaratives Shadow DOM enthält.

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

Wenn Sie lediglich innerHTML verwenden, parst der Browser sie nicht richtig und es wird no Shadow DOM. Mit setHTMLUnsafe() wird jedoch Ihr Schatten-DOM erstellt und das erwartungsgemäß geparst wird.

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 Eingaben durch. Bereinigung. Sie sollten also darauf achten, dass alles, was Sie füttern, sicher ist. In einem zukünftigen Release erwarten wir eine Version, die eine Bereinigung ermöglicht der Eingabe.

Beide APIs werden bereits in der neuesten Version der Firefox und Safari

WebSocket Stream-API

WebSockets sind eine großartige Möglichkeit, Daten zwischen den vom Browser und vom Server, ohne Polling zu verwenden. Das ist ideal für z. B. Chat-Apps, bei denen man sich sofort mit Informationen befassen möchte, ins Spiel.

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

Das wird Rückdruck genannt und kann bei dir zu ernsthaften Kopfschmerzen führen. Leider bietet die WebSocket API keine schöne Möglichkeit, und Druck aus.

Mit der WebSocket Stream API erhalten Sie und Netzsteckdosen mit Strom versorgt. Dadurch kann der Gegendruck angewendet werden, ohne dass zusätzliche Kosten anfallen.

Erstellen Sie zuerst ein neues WebSocketStream-Objekt und übergeben Sie ihm die URL des WebSocket-Server.

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. in einem ReadableStream und einem WritableStream. Durch Aufrufen der Methode ReadableStream.getReader(), erhalten Sie eine ReadableStreamDefaultReader bis der Stream fertig ist, können Sie read().

Rufen Sie zum Schreiben von Daten die Methode WritableStream.getWriter() auf, die Ihnen ein WritableStreamDefaultWriter, für die Sie dann Daten write() hinzufügen können.

Verbesserungen beim Ansehen von Übergängen

Es gibt zwei neue Funktionen, in Chrome 124, um den Wechsel zwischen Ansichten zu erleichtern.

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

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

Außerdem können Sie das Rendern eines Dokuments blockieren, bis die kritischen Inhalte geparst wurden, sodass ein einheitlicher First Paint in allen Browsern angezeigt.

…und vieles mehr

Natürlich gibt es noch viele weitere.

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

  • Fokusierbare Scroll-Container verbessert die Barrierefreiheit, indem Scroll-Container mit sequenzieller Fokussierung fokussierbar gemacht werden. Fokusnavigation.

  • Und durch die universelle Installation können Nutzer jede Seite installieren, auch solche, die nicht die die aktuellen PWA-Kriterien erfüllen.

Weitere Informationen

Hier werden nur einige wichtige Punkte behandelt. Unter den folgenden Links finden Sie zusätzliche Änderungen in Chrome 124.

Abonnieren

Um immer auf dem Laufenden zu bleiben, abonniere die YouTube-Kanal für Chrome-Entwickler, Außerdem wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 125 veröffentlicht ist, erfährst du, was es Neues bei Chrome gibt.