Ta strona została przetłumaczona przez Cloud Translation API.

Nowości w Chrome 124

Pete LePage

Oto najważniejsze zmiany w Chrome 124:

Dostępne są 2 nowe interfejsy API, które umożliwiają używanie deklaratywnego modelu shadow DOM w JavaScript.
Możesz używać strumyczek w Web Sockets.
Przejścia między widokami są nieco lepsze.
A to nie koniec.

Chcesz zobaczyć pełne zestawienie? Zapoznaj się z Informacjami o wersji Chrome 124.

Używanie deklaratywnego shadow DOM w JavaScript

Istnieją 2 nowe interfejsy API, które umożliwiają używanie deklaratywnego shadow DOM w JavaScript.

Atrybut setHTMLUnsafe() jest podobny do atrybutu innerHTML i pozwala ustawić wewnętrzny kod HTML elementu na podany ciąg znaków. Jest to przydatne, gdy masz kod HTML zawierający deklaratywny shadow DOM, jak ten.

<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 innerHTML, przeglądarka nie będzie mogła poprawnie przeanalizować tagu, a model DOM cienia nie zostanie utworzony. W setHTMLUnsafe() tworzony jest jednak model 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 interfejsu DOMParser.parseFromString().

Oba te interfejsy API są niebezpieczne, co oznacza, że nie przeprowadzają oczyszczania danych wejściowych. Dlatego warto się upewnić, że wszystko, co im podajesz, jest bezpieczne. W nadchodzącej wersji oczekujemy wersji, która będzie zapewniać sterylizację danych wejściowych.

Oba te interfejsy API są już obsługiwane w najnowszej wersji przeglądarek Firefox i Safari.

Interfejs WebSocket Stream API

WebSockets to świetny sposób na przesyłanie danych między przeglądarką użytkownika a serwerem bez konieczności korzystania z pollingu. Jest to świetne rozwiązanie w przypadku aplikacji do obsługi czatu, w których chcesz pracować z informacjami od razu po ich otrzymaniu.

Co jednak, jeśli dane docierają szybciej, niż możesz je przetworzyć?

Nazywa się to „back pressure” i może spowodować poważne problemy. Niestety interfejs WebSocket API nie ma dobrego sposobu na radzenie sobie z ciśnieniem wstecznym.

Interfejs WebSocket Stream API zapewnia możliwości strumieni i web sockets, co oznacza, że możesz stosować odwrotny nacisk bez dodatkowych kosztów.

Zacznij od utworzenia nowej WebSocketStream i przekazania jej 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 oczekujesz na otwarcie połączenia, co powoduje pojawienie się ReadableStream i WritableStream. Po wywołaniu metody ReadableStream.getReader() otrzymasz obiekt ReadableStreamDefaultReader, z którego możesz read() dane, dopóki strumień nie zostanie zakończony.

Aby zapisać dane, wywołaj metodę WritableStream.getWriter(), która zwraca obiekt WritableStreamDefaultWriter, do którego możesz następnie write() dane.

Zobacz ulepszenia procesów przenoszenia

Cieszę się, że w Chrome 124 pojawiły się funkcje Przejścia widoku. Wprowadziliśmy też 2 nowe funkcje, które ułatwiają przechodzenie między widokami.

Zdarzenie pageswap jest wywoływane w obiekcie okna dokumentu, gdy nawigacja zastąpi dokument nowym dokumentem.

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

Blokowanie renderowania dokumentu, które pozwala zablokować renderowanie dokumentu do momentu zanalizowania kluczowych treści, zapewniając spójne pierwsze wyrenderowanie we wszystkich przeglądarkach.

I inne funkcje

Oczywiście jest ich znacznie więcej.

disallowReturnToOpener pokazuje przeglądarce, że nie powinna wyświetlać w oknie obrazu w oknie innego obrazu przycisku, który pozwala użytkownikowi wrócić do karty otwierającej.
Kontenery przewijania, które można zaznaczyć za pomocą klawiatury, zwiększają dostępność, ponieważ umożliwiają przechodzenie do kontenerów za pomocą sekwencyjnej nawigacji.
Instalacja uniwersalna pozwala użytkownikom instalować dowolne strony, nawet te, które nie spełniają obecnych kryteriów PWA.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Pod tymi linkami znajdziesz dodatkowe informacje o zmianach w Chrome 124.

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Mam na imię Pete LePage i gdy tylko Chrome 125 się ukaże, będziemy Cię od razu informować o nowościach w tej przeglądarce.