Przedstawiamy NoState Prefetch

Katie Hempenius
Katie Hempenius

Wprowadzenie

NoState Prefetch to nowy mechanizm w Chrome, który jest alternatywą dla wycofanego procesu renderowania wstępnego, który jest używany do obsługi funkcji takich jak <link rel="prerender">. Podobnie jak w przypadku renderowania wstępnego, pobiera zasoby z wyprzedzeniem, ale w przeciwieństwie do renderowania wstępnego nie wykonuje kodu JavaScript ani nie renderuje z wyprzedzeniem żadnej części strony. Funkcja pobierania z wyprzedzeniem NoState używa mniej pamięci niż w przypadku renderowania wstępnego, a jednocześnie pozwala skrócić czas wczytywania strony.

NoState Prefetch nie jest interfejs API, ale mechanizm używany przez Chrome do wdrażania różnych interfejsów API i funkcji. Interfejs Resource Hints API oraz wstępne pobieranie stron za pomocą paska adresu Chrome są zaimplementowane z użyciem NoState Prefetch. Jeśli używasz Chrome 63 lub nowszej wersji, Twoja przeglądarka korzysta już z funkcji NoState Prefetch na potrzeby takich funkcji jak <link rel="prerender">.

Ten artykuł wyjaśnia, jak działa NoStatePrefetch oraz dlaczego warto wprowadzić tę funkcję i jak za pomocą histogramów Chrome przeglądać statystyki jej wykorzystania.

Motywacja

Istnieją 2 główne powody wprowadzenia NoState Prefetch:

Zmniejszanie wykorzystania pamięci

Wstępne pobieranie NoState wykorzystuje tylko ok. 45 MiB pamięci. Utrzymanie skanera wstępnego wczytywania jest głównym wydatkiem pamięci dla NoState Prefetch. Ten koszt pozostaje stosunkowo stały w różnych przypadkach użycia. Zwiększenie rozmiaru lub liczby pobrań nie ma istotnego wpływu na ilość pamięci używanej przez NoState z wyprzedzeniem.

Z kolei renderowanie wstępne zwykle zużywa 100 MiB pamięci, a wykorzystanie pamięci jest ograniczone do 150 MiB. Przy tak dużym zużyciu pamięci urządzenie nie nadaje się na słabsze urządzenia (tj. z <= 512 MB pamięci RAM). W rezultacie Chrome nie renderuje wstępnie na słabszych urządzeniach, tylko połączy się z wyprzedzeniem.

Ułatw obsługę nowych funkcji platformy internetowej

Renderowanie wstępne nie powinno powodować żadnych działań dla użytkownika (np. odtwarzania muzyki lub filmów) ani działań stanowych (np. mutacji sesji lub pamięci lokalnej). Zapobieganie takim działaniom podczas renderowania strony może być jednak trudne i złożone. NoState Prefetch pobiera zasoby tylko z wyprzedzeniem – nie wykonuje kodu ani nie renderuje strony. Ułatwia to zapobieganie wykonywaniem działań stanowych i widocznych dla użytkowników.

Implementacja

Poniżej opisujemy działanie wstępnego pobierania NoState.

  1. Uruchomiono funkcję NoStatePrefetch.

    Podpowiedź dotycząca zasobów renderowania wstępnego (np. <link rel="prerender">) i niektóre funkcje Chrome uruchamiają wstępne pobieranie NoState, o ile są spełnione te 2 warunki: a) użytkownik nie korzysta z urządzenia słabszego, b) użytkownik nie korzysta z sieci komórkowej.

  2. Na potrzeby pobierania z wyprzedzeniem NoState tworzony jest nowy, dedykowany mechanizm renderowania.

    W Chrome „mechanizm renderowania” to proces odpowiedzialny za pobranie dokumentu HTML, jego analizę, utworzenie drzewa renderowania i wyświetlenie wyniku na ekranie. Każda karta w Chrome, podobnie jak każdy proces pobierania z wyprzedzeniem NoState, ma własny mechanizm renderowania, który zapewnia izolację. Pomaga to zminimalizować skutki nieprawidłowego działania (np. awarii karty) oraz uchronić złośliwy kod przed dostępem do innych kart lub innych części systemu.

  3. Zasób ładowany za pomocą metody NoState Prefetch. HTMLPreloadScanner następnie skanuje ten zasób w poszukiwaniu zasobów podrzędnych, które należy pobrać. Jeśli zasób główny lub dowolny z jego zasobów podrzędnych ma zarejestrowany skrypt service worker, żądania te przechodzą przez odpowiedni skrypt service worker.

    NoState Prefetch obsługuje tylko metodę GET – nie pobiera żadnych zasobów podrzędnych, które wymagają użycia innych metod HTTP. Nie będzie też pobierać żadnych zasobów, które wymagają działań użytkownika (np. wyskakujących okienek uwierzytelniania, certyfikatu klienta SSL lub ręcznych zastąpień).

  4. Pobierane zasoby podrzędne są pobierane z priorytetem netto „IDLE”.

    „IDLE” Net Priority (Nieaktywny) to najniższy możliwy priorytet sieci w Chrome.

  5. Wszystkie zasoby pobierane przez NoState Prefetch są przechowywane w pamięci podręcznej zgodnie z nagłówkami pamięci podręcznej.

    Tag NoState z wyprzedzeniem będzie zapisywać w pamięci podręcznej wszystkie zasoby oprócz tych z nagłówkiem Cache-Control no-store. Zasób zostanie ponownie zweryfikowany przed użyciem, jeśli zawiera nagłówek odpowiedzi Vary lub no-cache Cache-Control albo jeśli zasób ma ponad 5 minut.

  6. Mechanizm renderowania kończy się po wczytaniu wszystkich zasobów podrzędnych.

    W przypadku przekroczenia limitu czasu zasobów podrzędnych mechanizm renderowania zostanie wyłączony po 30 sekundach.

  7. Przeglądarka nie wprowadza żadnych zmian w stanie poza aktualizacją magazynu plików cookie i lokalnej pamięci podręcznej DNS. Zwróć uwagę na to, ponieważ w obiekcie „NoState Prefetch” jest to wartość „NoState”.

    W tym momencie w „normalnym” procesie wczytywania strony przeglądarka prawdopodobnie wykonywałaby czynności, które modyfikują jej stan, np. uruchamia kod JavaScript, mutują sessionStorage lub localStorage, odtwarza muzykę lub filmy, używa interfejsu History API czy wyświetla użytkownikowi prośbę o zgodę. Jedyną zmianą stanu w trybie pobierania z wyprzedzeniem NoState jest aktualizacja pamięci podręcznej DNS po nadejściu odpowiedzi oraz aktualizacja magazynu plików cookie, jeśli odpowiedź zawiera nagłówek Set-Cookie.

  8. Gdy zasób jest potrzebny, jest wczytywany w oknie przeglądarki.

    Jednak w przeciwieństwie do wstępnie renderowanych stron nie będzie ona widoczna od razu – nadal musi zostać wyrenderowana przez przeglądarkę. Przeglądarka nie użyje ponownie mechanizmu renderowania, z którego korzystała przy pobieraniu z wyprzedzeniem NoState, i zamiast tego użyje nowego mechanizmu renderowania. Niewyrenderowanie strony z wyprzedzeniem zmniejsza wykorzystanie pamięci przez NoStatePrefetch, ale zmniejsza też potencjalny wpływ, jaki może mieć to na czas wczytywania strony.

    Jeśli strona zawiera skrypt service worker, wczytanie strony będzie ponownie przez niego przechodzić.

    Jeśli pobieranie zasobów podrzędnych NoState nie zakończy się do momentu, gdy pojawi się strona, przeglądarka kontynuuje proces wczytywania strony od miejsca, w którym wstrzymano wczytywanie strony z wyprzedzeniem NoState. Przeglądarka będzie nadal musiała pobrać zasoby, ale liczba tych zasobów będzie mniejsza, jeśli nie zainicjowano pobierania NoState Prefetch.

Wpływ na statystyki internetowe

Strony wczytywane z użyciem NoState Prefetch są rejestrowane przez narzędzia do analityki internetowej w nieco różnych momentach w zależności od tego, czy narzędzie gromadzi dane po stronie klienta czy po stronie serwera.

Skrypty analizy po stronie klienta rejestrują odsłonę, gdy strona jest wyświetlana użytkownikowi. Skrypty te opierają się na wykonaniu kodu JavaScript, a NoState Prefetch nie wykonuje żadnego kodu JavaScript.

Narzędzia analityczne po stronie serwera rejestrują wskaźniki podczas obsługi żądania. W przypadku zasobów wczytywanych przez NoState z wyprzedzeniem może upłynąć sporo czasu między przetworzeniem żądania a rzeczywistym użyciem odpowiedzi przez klienta (o ile w ogóle zostanie ona użyta). Od wersji Chrome 69 NoState Prefetch dodaje do wszystkich żądań nagłówek Purpose: Prefetch, aby można je było odróżnić od zwykłego przeglądania.

Sprawdź

W grudniu 2017 r. w Chrome 63 została udostępniona funkcja NoStatePrefetch. Używa się go do:

  • Wdróż wskazówkę dotyczącą zasobów prerender
  • Pobieranie pierwszego wyniku w wynikach wyszukiwania Google
  • Pobierz strony, które według prognozy na pasku adresu Chrome zostaną prawdopodobnie odwiedzić w następnej kolejności

Aby sprawdzić, jak korzystasz z NoStatePrefetch, możesz skorzystać z wewnętrznych zasobów Chrome.

Aby wyświetlić listę witryn, które zostały wczytane za pomocą NoState Prefetch, otwórz stronę chrome://net-internals/#prerender.

Aby wyświetlić statystyki użycia aplikacji NoState z wyprzedzeniem, wejdź na chrome://histograms i wyszukaj „NoStatePrefetch”. Istnieją 3 różne histogramy wstępnego pobierania NoState – po jednym dla każdego przypadku użycia:

  • „NoStatePrefetch” (statystyki użycia przy wstępnym renderowaniu wskazówek dotyczących zasobów)
  • “gws_NoStatePrefetch” (statystyki użytkowania na stronie wyników wyszukiwania Google)
  • „omnibox_NoStatePrefetch” (statystyki użytkowania wyświetlane przy pasku adresu Chrome)