Nowości w Chrome 103

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Dostępny jest nowy kod stanu HTTP 103, który pomaga przeglądarce zdecydować, jakie treści wstępnie wczytać, jeszcze zanim strona zostanie wyświetlona.
  • Interfejs Local Font Access API umożliwia aplikacjom internetowym obliczanie i używanie czcionek zainstalowanych na komputerze użytkownika.
  • AbortSignal.timeout() jest łatwiejszym sposobem implementacji limitów czasu w asynchronicznych interfejsach API.
  • A do tego wiele więcej.

Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla programistów w Chrome 103.

Kod stanu HTTP 103 – kod stanu 103 – wczesne wskazówki

Jednym ze sposobów na poprawę wydajności strony jest korzystanie ze wskazówek dotyczących zasobów. Przekazują przeglądarce „wskazówki” na temat tego, co może być później potrzebne. Dotyczy to na przykład wstępnego wczytywania plików lub łączenia się 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 nie może jednak wykorzystać tych wskazówek, dopóki serwer nie wyśle przynajmniej części strony.

Wyobraź sobie, że przeglądarka wysyła żądanie strony, a serwer potrzebuje kilkuset milisekund, aby ją wygenerować. Do chwili, gdy przeglądarka zacznie odbierać stronę, czeka i czeka. Jeśli jednak serwer wie, że strona zawsze potrzebuje 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 wczesne wskazówki i poprosić przeglądarkę o wstępne wczytanie tych zasobów.

Następnie, gdy serwer wygeneruje stronę, może ją wysłać w zwykłej odpowiedzi HTTP 200. Po wyświetleniu strony przeglądarka zaczęła już ładować wymagane zasoby.

Jest to nowy kod stanu HTTP, dlatego jego użycie wymaga aktualizacji serwera.

Pierwsze kroki z HTTP 103 – wczesne wskazówki:

Interfejs Local Font Access API

Korzystanie z czcionek w internecie zawsze było wyzwaniem, zwłaszcza w przypadku aplikacji umożliwiających użytkownikom tworzenie własnych grafik i projektów. Do tej pory aplikacje internetowe mogły używać tylko czcionek internetowych. Nie można było pobrać listy czcionek, które użytkownik zainstalował na komputerze. Brakowało też dostępu do pełnych danych tabeli czcionek, co ma kluczowe znaczenie w przypadku wdrożenia własnego, niestandardowego stosu tekstu.

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

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

// 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 je filtrować, dodając parametr postscriptNames.

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

Więcej informacji znajdziesz w artykule Tomek (Use Advanced typografia z lokalnymi czcionkami) na stronie web.dev.

Łatwiejsze korzystanie z limitów czasu dzięki funkcji AbortSignal.timeout()

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

Na przykład tworząc żądanie fetch(), możesz utworzyć obiekt AbortSignal i przekazać go do fetch(). Jeśli chcesz anulować żądanie fetch(), zanim zostanie zwrócona, wywołaj abort() w wystąpieniu AbortSignal. Do tej pory, aby przerwać po określonym czasie, trzeba było umieścić go w pakiecie 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 jest to łatwiejsze dzięki nowej, statycznej metodzie timeout() w witrynie AbortSignal. Zwraca obiekt AbortSignal, który jest automatycznie przerywany po określonej liczbie milisekund. Kiedyś był to tylko kilka wierszy kodu, a teraz to tylko jeden.

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

Rozszerzenie AbortSignal.timeout() jest obsługiwane w Chrome 103, a także w Firefoksie i Safari.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Format pliku graficznego avif może być teraz udostępniany w ramach udostępniania w internecie
  • Przeglądarka Chromium dopasowuje teraz przeglądarkę Firefox, uruchamiając popstate natychmiast po zmianie adresu URL. Kolejność zdarzeń na obu platformach wynosi teraz: popstate, a potem hashchange.
  • Z kolei Element.isVisible() informuje, czy element jest widoczny, czy nie.

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 103.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Jestem Pete LePage i jak tylko pojawi się Chrome 104, będę informować Cię o nowościach w Chrome.