Nowości w Chrome 124

Pete LePage

Najważniejsze funkcje Chrome 124:

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.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Poniżej znajdziesz informacje o dodatkowych zmianach w Chrome 124.

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.