Najważniejsze funkcje Chrome 124:
- Istnieją 2 nowe interfejsy API, które pozwalają na używanie deklaratywnego modelu DOM w języku JavaScript.
- Możesz używać strumieni w Web Sockets.
- Zobacz przejścia – ulepszyliśmy widok.
- A do tego wiele więcej.
Chcesz poznać wszystkie szczegóły? Sprawdź informacje o wersji Chrome 124.
Używanie deklaratywnego modelu DOM w JavaScript
Istnieją 2 nowe interfejsy API, które pozwalają na używanie deklaratywnego DOM DOM z JavaScriptu.
setHTMLUnsafe()
jest podobny do innerHTML
i umożliwia ustawienie wewnętrznego kodu HTML elementu na podany ciąg znaków. Jest to przydatne, gdy masz kod HTML zawierający deklaratywny model DOM.
<my-custom-element>
<template shadowrootmode="open">
<style>
:host {
display: block;
color: yellow;
}
</style>
Hello, <slot></slot>
</template>
</my-custom-element>
Jeśli użyjesz tylko obiektu innerHTML
, przeglądarka nie przeprowadzi jej poprawnie i nie będzie funkcji shadow DOM. Jednak w przypadku setHTMLUnsafe()
tworzony jest model shadow DOM, a element jest analizowany zgodnie z oczekiwaniami.
const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);
Drugi interfejs API to parseHTMLUnsafe()
, który działa podobnie do DOMParser.parseFromString()
.
Oba te interfejsy API są niebezpieczne, co oznacza, że nie czyszczą danych wejściowych. Dlatego warto zadbać o to, by karmić je bezpiecznie. W nadchodzącej wersji spodziewamy się wersji, która umożliwi oczyszczanie danych wejściowych.
Oba te interfejsy API są już obsługiwane w najnowszych wersjach przeglądarek Firefox i Safari.
Interfejs API WebSocket Stream
Protokół WebSocket to świetny sposób na przesyłanie danych między przeglądarką użytkownika a serwerem bez konieczności korzystania z odpytywania. Przydaje się to np. w aplikacjach do obsługi czatu, w których trzeba szybko załatwiać dane.
Ale co się stanie, jeśli dane przychodzą szybciej, niż jesteś w stanie je obsłużyć?
Nazywamy to ciśnieniem wstecznym i może powodować u Ciebie poważne bóle głowy. Niestety interfejs WebSocket API niezbyt dobrze radzi sobie z obciążeniem wstecznym.
Interfejs WebSocket Stream API zapewnia moc strumieni i gniazdek sieciowych, dzięki czemu można stosować ciśnienie wsteczne bez dodatkowych kosztów.
Zacznij od utworzenia nowego obiektu WebSocketStream
i przekazania do niego adresu URL serwera WebSocket.
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);
}
Następnie czekasz na otwarcie połączenia, co da wynik ReadableStream
i WritableStream
. Wywołując metodę ReadableStream.getReader()
, otrzymujesz ReadableStreamDefaultReader
, od którego możesz przesyłać dane (read()
), aż do zakończenia transmisji.
Aby zapisać dane, wywołaj metodę WritableStream.getWriter()
, która daje WritableStreamDefaultWriter
, do której możesz potem write()
użyć danych.
Wyświetl ulepszenia dotyczące przenoszenia
Cieszę się z funkcji przenoszenia widoku. W Chrome 124 pojawiły się 2 nowe funkcje ułatwiające przełączanie widoku.
Zdarzenie pageswap
jest uruchamiane w obiekcie okna dokumentu, gdy nawigacja zastąpi dokument nowym dokumentem.
document.addEventListener("pageswap", event => {
if (!event.viewTransition) {
return;
}
});
Dodatkowo funkcja blokowania renderowania dokumentów pozwala blokować renderowanie dokumentu do momentu przeanalizowania kluczowych treści. Zapewnia to spójne pierwsze wyrenderowanie treści we wszystkich przeglądarkach.
…i wiele innych.
Oczywiście, jest ich jeszcze więcej.
disallowReturnToOpener
informuje przeglądarkę, że w oknie obrazu w obrazie nie powinien wyświetlać się przycisk umożliwiający powrót na kartę otwierającego.Kontenery przewijania z możliwością zaznaczenia za pomocą klawiatury poprawiają dostępność, ponieważ umożliwiają zaznaczenie kontenerów przewijania za pomocą sekwencyjnej nawigacji fokusu.
Instalacja uniwersalna umożliwia użytkownikom zainstalowanie dowolnej strony, nawet jeśli nie spełnia aktualnych kryteriów PWA.
Więcej informacji
Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Poniżej znajdziesz informacje o dodatkowych zmianach w Chrome 124.
- Informacje o wersji Chrome 124
- Nowości w Narzędziach deweloperskich w Chrome (124)
- Aktualizacje ChromeStatus.com w Chrome 124
- Lista zmian repozytorium źródłowego Chromium
- Kalendarz wydań Chrome
Subskrybuj
Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.
Nazywam się Pete LePage i jak tylko pojawi się Chrome 125, będziemy informować Cię o nowościach w Chrome.