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 shadow DOM w JavaScript.
Możesz używać strumyczek w Web Sockets.
Przejścia między widokami są nieco lepsze.
I to nie wszystko .

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. Jednak w przypadku setHTMLUnsafe() tworzony jest model DOM cieni, 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ą żadnej sanityzacji danych wejściowych. Dlatego warto się upewnić, że to, 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 socketów, co oznacza, że możesz stosować odwrotny nacisk bez dodatkowych kosztów.

Zacznij od utworzenia nowego obiektu WebSocketStream i przekazania mu 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.

Wyświetlanie ulepszeń dotyczących przenoszenia

Cieszę się, że w Chrome 124 pojawiły się 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 wskazuje 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 przewijania 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

Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 124, kliknij te linki.

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

Nazywam się Pete LePage i jak tylko pojawi się nowa wersja Chrome 125, opowiemy Ci, co nowego w Chrome.