Nowości w Chrome 103

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Jest nowy kod stanu HTTP 103, który pomaga przeglądarce zdecydować, jakie treści wstępnie wczytać, zanim strona zacznie się wczytywać.
  • Interfejs Local Font Access API umożliwia aplikacjom internetowym wyliczanie i używanie czcionek zainstalowanych na komputerze użytkownika.
  • AbortSignal.timeout() to prostszy sposób implementowania limitów czasu w przypadku asynchronicznych interfejsów API.
  • I to nie wszystko .

Mam na imię Pete LePage. Przyjrzyjmy się bliżej nowościom w Chrome 103 dla deweloperów.

Kod stanu HTTP 103

Jednym ze sposobów na poprawę wydajności strony jest używanie wskazówek dotyczących zasobów. Podają one przeglądarce „wskazówki” dotyczące tego, czego może potrzebować w przyszłości. Na przykład: wstępne wczytywanie plików lub połączenie z innym serwerem.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Przeglądarka może jednak działać zgodnie z tymi wskazówkami dopiero po tym, jak serwer wyśle co najmniej część strony.

Wyobraź sobie, że przeglądarka wysyła żądanie strony, ale serwer potrzebuje kilkuset milisekund na jej wygenerowanie. Dopóki przeglądarka nie zacznie odbierać strony, ta po prostu czeka. Jeśli jednak serwer wie, że strona zawsze będzie potrzebować określonego zestawu zasobów podrzędnych, np. pliku CSS, kodu JavaScript i kilku obrazów, może natychmiast odpowiedzieć nowym kodem stanu HTTP 103 Early Hints i poprosić przeglądarkę o wstępne załadowanie tych zasobów podrzędnych.

Następnie, gdy serwer wygeneruje stronę, może ją wysłać z normalną odpowiedzią HTTP 200. Gdy strona się wczytuje, przeglądarka już zaczęła wczytywać wymagane zasoby.

Jest to nowy kod stanu HTTP, więc jego użycie wymaga aktualizacji serwera.

Pierwsze kroki z HTTP 103 Wskazówki wstępne:

Interfejs Local Fonts Access API

Czcionki w internecie zawsze były wyzwaniem, zwłaszcza w przypadku aplikacji, które umożliwiają użytkownikom tworzenie własnych grafik i projektów. Do tej pory aplikacje internetowe mogły używać tylko czcionek internetowych. Nie było możliwości uzyskania listy czcionek zainstalowanych na komputerze użytkownika. Nie było też możliwości uzyskania dostępu do pełnych danych tabeli czcionek, co jest kluczowe, jeśli chcesz zaimplementować własny niestandardowy zestaw tekstów.

Nowy interfejs Local Font Access API umożliwia aplikacjom internetowym wyliczanie czcionek lokalnych na urządzeniu użytkownika oraz zapewnia dostęp do danych tabeli czcionek.

Aby uzyskać listę czcionek zainstalowanych na urządzeniu, musisz najpierw poprosić o pozwolenie.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Następnie zadzwoń pod numer window.queryLocalFonts(). Zwraca tablicę wszystkich czcionek zainstalowanych na urządzeniu użytkownika.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Jeśli interesuje Cię tylko podzbiór czcionek, możesz go odfiltrować, dodając parametr postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Aby uzyskać więcej informacji, przeczytaj artykuł Toma Używanie zaawansowanej typografii z czcionkami lokalnymi na stronie web.dev.

Łatwe ustawianie limitów czasu za pomocą funkcji AbortSignal.timeout()

W JavaScript funkcje AbortController i AbortSignal służą do anulowania wywołania asynchronicznego.

Na przykład podczas wysyłania żądania fetch() możesz utworzyć obiekt AbortSignal i przekazać go do obiektu fetch(). Jeśli chcesz anulować fetch() zanim wróci, wywołaj abort() w instancji AbortSignal. Do tej pory, jeśli chcesz, aby zadanie zostało przerwane po określonym czasie, musisz je umieścić w funkcji setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Na szczęście dzięki nowej metodzie statycznej timeout() w klasie AbortSignal jest to teraz łatwiejsze. Zwraca obiekt AbortSignal, który jest automatycznie anulowany po określonej liczbie milisekund. To, co kiedyś wymagało kilku linii kodu, teraz wymaga tylko jednej.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout()jest obsługiwana w Chrome 103 i jest już dostępna w Firefox i Safari.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Format pliku graficznego avif można teraz udostępniać za pomocą funkcji Udostępnianie w sieci
  • Chromium dopasowuje się teraz do Firefoksa, wywołując popstate natychmiast po zmianie adresu URL. Na obu platformach kolejność zdarzeń to: popstate, a potem hashchange.
  • Ikona Element.isVisible() wskazuje, czy element jest widoczny.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby poznać inne zmiany w Chrome 103, kliknij linki poniżej.

Subskrybuj

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 104, opowiem Ci, co nowego w Chrome.