Pobieranie z wyprzedzeniem, renderowanie wstępne i wstępne buforowanie skryptu service worker

W ostatnich kilku modułach omówiliśmy takie pojęcia jak odroczenie ładowanie JavaScriptu i leniwe ładowanie obrazów oraz elementów <iframe>. Opóźnienie wczytywania zasobów zmniejsza wykorzystanie sieci i procesora w czasie początkowym wczytywaniu strony, pobierając zasoby w momencie, gdy są potrzebne zamiast ładować je od góry, gdzie mogą być nieużywane. Może to skrócić czas początkowego wczytywania strony, ale kolejne interakcje mogą powodować naliczenie dodatkowych interakcji opóźnienie, jeśli zasoby potrzebne do ich zasilania nie są jeszcze wczytane w danym momencie; ich wystąpienia.

Jeśli np. strona zawiera niestandardowy selektor daty, możesz odroczyć datę z zasobami selektora do momentu interakcji użytkownika z elementem. Wczytuję na żądanie użycia zasobów selektora daty może spowodować opóźnienie – może nieznaczne, w zależności od połączenia sieciowego użytkownika, możliwości urządzenia lub oba – dopóki zasoby nie zostaną pobrane, przeanalizowane i dostępne do wykonania.

Nie zawsze jest to łatwe – nie warto marnować przepustowości przez wczytywanie zasobów, które mogą być nieużywane, ale opóźniają interakcje i kolejne strony również może nie być idealnym rozwiązaniem. Na szczęście jest wiele narzędzi, aby znaleźć równowagę między tymi dwoma skrajnościami. W tym module o to, jak to osiągnąć, np. podczas pobierania zasobów z wyprzedzeniem, przez wstępne renderowanie całych stron i wstępne zapisywanie zasobów w pamięci podręcznej za pomocą skryptu service worker.

Pobieraj z wyprzedzeniem zasoby potrzebne w najbliższej przyszłości z niskim priorytetem

Możesz z wyprzedzeniem pobierać zasoby, takie jak obrazy, arkusze stylów, lub JavaScriptu, korzystając ze wskazówki dotyczącej zasobów <link rel="prefetch">. Wskazówka prefetch informuje przeglądarkę, że zasób prawdopodobnie będzie wymagany w najbliższej przyszłości.

Gdy określona jest wskazówka prefetch, przeglądarka może zainicjować żądanie. dla tego zasobu o najniższym priorytecie, aby uniknąć rywalizacji z zasobami wymagane w przypadku bieżącej strony.

Wstępne pobieranie zasobów może zwiększyć wygodę użytkowników, ponieważ będziemy musieli poczekać na pobranie zasobów potrzebnych w najbliższej przyszłości, mogą być natychmiast pobierane z pamięci podręcznej na dysku, gdy tylko zajdzie taka potrzeba.

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

Poprzedni fragment kodu HTML informuje przeglądarkę, że może ona pobrać z wyprzedzeniem date-picker.js i date-picker.css po jego bezczynności. To także możliwe pobiera z wyprzedzeniem zasoby, gdy użytkownik wchodzi w interakcję ze stroną JavaScriptu.

Przeglądarka prefetch jest obsługiwana we wszystkich nowoczesnych przeglądarkach oprócz Safari (w których dostępne za flagą. Jeśli zależy Ci na zapobiegawczym ładowaniu zasobów witryny w sposób, który działa we wszystkich przeglądarkach, skrypt service worker – a potem przeczytaj dalszą część tego modułu na temat wstępnego buforowania za pomocą skryptu service worker.

Pobieraj wstępnie strony, aby przyspieszyć nawigację w przyszłości

Możesz też pobrać z wyprzedzeniem stronę i wszystkie jej zasoby podrzędne, określając atrybut Atrybut as="document" wskazujący na dokument HTML:

<link rel="prefetch" href="/page" as="document">

Gdy przeglądarka jest bezczynna, może zainicjować żądanie o niskim priorytecie dla funkcji /page.

W przeglądarkach opartych na Chromium możesz wstępnie pobierać dokumenty za pomocą makra Interfejs API reguł spekulacyjnych – Reguły spekulacyjne są zdefiniowane jako obiekt JSON zawarte w kodzie HTML strony lub dodawane dynamicznie za pomocą kodu JavaScript:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

Obiekt JSON opisuje co najmniej jedno działanie – obecnie obsługuje tylko prefetch i prerender oraz listę adresów URL powiązanych z tym działaniem. W poprzedni fragment kodu HTML, przeglądarka otrzymuje instrukcje, by pobrać z wyprzedzeniem plik /page-a i /page-b. Podobnie jak <link rel="prefetch">, reguły spekulacyjne są wskazówkę, że przeglądarka w pewnych okolicznościach może ją zignorować.

Biblioteki, takie jak Quicklink, usprawniają nawigację na stronach dzięki pobierania lub renderowania linków do stron, gdy są one widoczne w w widocznym obszarze użytkownika. Zwiększa to prawdopodobieństwo, że użytkownik w końcu przechodzi na tę stronę – w porównaniu z pobieraniem z wyprzedzeniem wszystkich linków na stronie.

Wstępnie renderuj strony

Oprócz ładowania zasobów z wyprzedzeniem możesz też dodać wskazówkę do przeglądarki na wstępne wyrenderowanie strony, zanim użytkownik przejdzie na nią. Dzięki temu możemy zapewnić przy szybkim ładowaniu, ponieważ strona i jej zasoby są pobierane i przetwarzane w tle. Gdy użytkownik przejdzie do strony, jest ona umieszczana w sekcji na pierwszym planie.

Renderowanie wstępne jest obsługiwane przez interfejs Speculation Rules API:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>
.

Wersje demonstracyjne pobierania z wyprzedzeniem i renderowania z wyprzedzeniem

Wstępne buforowanie przez mechanizm Service Worker

Możliwe jest też spekulacyjne pobieranie zasobów za pomocą skryptu service worker. Wstępne buforowanie przez mechanizm Service Worker może pobierać i zapisywać zasoby za pomocą interfejsu API Cache, który umożliwia przeglądarce obsługę żądania za pomocą interfejsu API Cache bez konieczności przechodzenia w sieci. Wstępne buforowanie przez mechanizm Service Worker korzysta z bardzo wydajnego mechanizmu Service Worker czyli strategii opartej tylko na pamięci podręcznej. Ten wzorzec charakteryzuje się wysoką efektywne, ponieważ po umieszczeniu zasobów w pamięci podręcznej mechanizmu Service Worker są pobierane niemal natychmiast po otrzymaniu żądania.

Pokazuje przepływ buforowania przez skrypt service worker ze strony do skryptu service worker do pamięci podręcznej.
Strategia oparta tylko na pamięci podręcznej pobiera tylko odpowiednie zasoby z podczas instalacji skryptu service worker. Po zainstalowaniu pliki cookie zasoby są pobierane tylko z pamięci podręcznej skryptu service worker.
.
.

Aby wstępnie buforować zasoby przy użyciu skryptu service worker, możesz użyć Workbox. Jeśli lepiej jest jednak napisać własny kod, który zapisuje w pamięci podręcznej wcześniej określony zestaw . Niezależnie od tego, którą opcję wybierzesz, użyjesz skryptu service worker do wstępnego buforowania zasobów, musisz wiedzieć, że wstępne wczytywanie ma miejsce, gdy usługa jest instalowana wersja robocza. Po instalacji zasoby w pamięci podręcznej są dostępne do pobrania na każdej stronie w witrynie, którą kontroluje skrypt service worker.

Workbox używa pliku manifestu precache do określania, które zasoby powinny być w pamięci podręcznej. Plik manifestu precache to lista plików i informacji o wersji. które jest „źródłem prawdy”, na potrzeby wstępnego umieszczania zasobów w pamięci podręcznej.

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

Poprzedni kod to przykładowy plik manifestu, który zawiera 2 pliki: script.ffaa4455.js i /index.html. Jeśli zasób zawiera wersję informacji w samym pliku (nazywanych haszem pliku), z kolei revision można pozostawić null, ponieważ plik ma już wersję (na przykład ffaa4455 dla zasobu script.ffaa4455.js w poprzednim kodzie). Dla: zasobów bez wersji, można wygenerować dla nich wersję podczas kompilacji.

Po skonfigurowaniu skryptu service worker można używać do wstępnego buforowania stron statycznych lub ich zasobów podrzędnych, aby przyspieszyć kolejne przeglądanie stron.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

Na przykład na stronie z listą produktów e-commerce można użyć mechanizmu Service Worker do wstępnego buforowania kodu CSS i JavaScript wymaganego do renderowania strony ze szczegółami produktu, dzięki czemu poruszanie się po stronie ze szczegółami produktu będzie szybsze. W poprzedniego przykładu, product-page.ac29.css i product-page.39a1.js to w pamięci podręcznej. Metoda precacheAndRoute dostępna w workbox-precaching automatycznie rejestruje moduły obsługi niezbędne do zapewnienia, że zasoby wstępnie buforowane są pobierane z interfejsu API service worker, gdy jest to konieczne.

Skrypty service worker są powszechnie obsługiwane, więc można ich używać w dowolnej nowoczesnej przeglądarce, gdy jest to wymagane w danej sytuacji.

.

Sprawdź swoją wiedzę

Z jakim priorytetem jest wyświetlana wskazówka prefetch?

Wysoka.
Spróbuj ponownie.
Średni.
Spróbuj ponownie.
Niska.
Dobrze!

Jaka jest różnica między pobieraniem z wyprzedzeniem a renderować wstępnie stronę?

Podczas wczytywania z wyprzedzeniem i renderowania z wyprzedzeniem dla strony pobieranie z wyprzedzeniem pobiera jedynie stronę i wszystkie zasobów, a renderowanie wstępne idzie o krok dalej, renderując całą stronę w tle, dopóki użytkownik nie przejdzie w jedną stronę.
Dobrze!
Są w większości takie same, a tylko w przypadku wstępnego renderowania uwzględniany jest cały zasobów podrzędnych, a pobieranie z wyprzedzeniem nie.
Spróbuj ponownie.

Pamięć podręczna mechanizmu Service Worker i pamięć podręczna HTTP są takie same.

Prawda
Spróbuj jeszcze raz.
Fałsz
Dobrze!

Następny artykuł: omówienie Web Worker

Wiesz już, jak wstępne wczytywanie, renderowanie wstępne i wstępne buforowanie przez mechanizmy Service Worker może być korzystna dla przyspieszenia nawigacji jesteś w stanie podjąć świadome decyzje dotyczące tego, na korzyść Twojej witryny i jej użytkowników.

Następnie przedstawiamy narzędzia do pracy w internecie i opisujemy, jak mogą oni płacić poza wątkiem głównym i dać nigdzie dodatkowe pole do działania interakcji użytkowników. Zastanawiasz się, jak można zapewnić głównym więcej miejsca na oddech, warto poświęcić czas na 2 kolejne moduły.