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 .

Nazywam się 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życie 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.

Łatwiejsze ustawianie czasu oczekiwania dzięki funkcji AbortSignal.timeout()

W języku 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 funkcję abort() w instancji AbortSignal. Do tej pory, aby przerwać po upływie określonego czasu, trzeba było umieścić je w polu 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. Dawniej to tylko 1 wiersz kodu, a obecnie jest tylko jeden.

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

Znak AbortSignal.timeout() jest obsługiwany w Chrome 103 i jest już używany w Firefoksie i Safari.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Format pliku obrazu avif można teraz udostępniać za pomocą funkcji udostępniania 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.
  • Element.isVisible() informuje z kolei, czy dany element jest widoczny.

Więcej informacji

To tylko niektóre z najważniejszych informacji. 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.

Jestem Pete LePage i gdy tylko Chrome 104 się ukaże, od razu powiem, co nowego w tej przeglądarce.