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:
- Objaśnienie dla wczesnych wskazówek
- Konfiguracja wczesnych wskazówek Apache 2
- Korzystanie z wczesnych wskazówek Cloudflare
- Fastly Beyond Server Push: kod stanu wczesnych wskazówek 103
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 potemhashchange
. - 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.
- Nowości w Narzędziach deweloperskich w Chrome (103)
- Wycofanie i usunięcie Chrome 103
- Aktualizacje ChromeStatus.com w Chrome 103
- Lista zmian repozytorium źródłowego Chromium
- Kalendarz wydań Chrome
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.