Hier sind die Highlights in Chrome 124:
- Es gibt zwei neue APIs, mit denen das deklarative Shadow DOM ausgeführt werden kann. aus JavaScript verwendet werden.
- Sie können Streams in WebSockets verwenden.
- Übergänge ansehen wird etwas besser.
- Und es gibt noch viele weitere Funktionen.
Du willst 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 und dem Server übertragen werden, ohne Polling-Funktionen nutzen zu müssen. 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 Strom und Netzsteckdosen, wodurch ein 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
Die Funktion "Übergänge anzeigen" bietet zwei neue Funktionen, in Chrome 124, um den Wechsel zwischen Ansichten zu vereinfachen.
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, damit 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. über das der Nutzer zum Öffnenden-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.
- Versionshinweise für Chrome 124
- Neu bei den Chrome-Entwicklertools (124)
- ChromeStatus.com-Updates für Chrome 124
- Änderungsliste für das Chromium-Quell-Repository
- Release-Kalender für Chrome
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.