Próbowałem użyć czegoś takiego, aby uzyskać wzrost wydajności, gdy klikam od prostej strony docelowej do ciężkiej aplikacji na jednej stronie:
<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />Wygląda na to, że nie ma zauważalnego wzrostu wydajności, gdy moja strona docelowa znajduje się w subdomenie. Powiedzmy https://subdomain.example.com.
Po kliknięciu na link aby odwiedzić https://example.com, wciąż widzę duże opóźnienie w karcie sieciowej Chrome app.jsi app.csssą ładowane:
Oto ten sam zasób z wyłączonym pobieraniem wstępnym:
W sumie zajmuje to mniej więcej tyle samo czasu.
Żądaj nagłówków dla jednego z zasobów załadowanych z pamięcią podręczną pobierania wstępnego:
Generał:
Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200 (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgradeOdpowiedź:
accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfrontŻądanie:
DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36Moje pytanie brzmi: jeśli Chrome wskazuje, że używana jest pamięć podręczna pobierania wstępnego, dlaczego czas pobierania zawartości jest znaczny?
Wygląda na to, że Chrome ma różne rodzaje pamięci podręcznych: pamięć podręczną pobierania wstępnego, pamięć podręczną dysku i pamięć podręczną. Pamięć podręczna dysku i pamięć podręczna są bardzo szybkie (czasy ładowania 5 ms i 0 ms). Pamięć podręczna pobierania wstępnego jest jednak dość bezużyteczna, a czasem pobierania 300 ms. Czy mogę uzyskać techniczne wyjaśnienie, dlaczego tak się dzieje? Czy to błąd w Chrome? Korzystam z Chrome 79.0.3945.117.
źródło
Odpowiedzi:
Dodanie
<link rel=prefetch>do strony internetowej nakazuje przeglądarce pobranie całych stron lub niektórych zasobów (takich jak skrypty lub pliki CSS), których użytkownik może potrzebować w przyszłości. Może to poprawić wskaźniki, takie jak Pierwszy zadowolony lakier i Czas na interakcję, i często sprawia, że kolejne nawigacje wydają się ładować natychmiast.Wskazówka pobierania wstępnego pochłania dodatkowe bajty dla zasobów, które nie są natychmiast potrzebne, więc tę technikę należy zastosować z rozwagą; pobieraj zasoby tylko wtedy, gdy masz pewność, że użytkownicy będą ich potrzebować. Nie należy pobierać z wyprzedzeniem, gdy użytkownicy korzystają z wolnych połączeń. Możesz to wykryć za pomocą interfejsu API Network Information API.
Istnieją różne sposoby określania, które łącza mają zostać pobrane wstępnie. Najprostszym jest pobranie pierwszego linku lub kilku pierwszych linków na bieżącej stronie. Istnieją również biblioteki, które wykorzystują bardziej wyrafinowane podejścia, wyjaśnione w dalszej części tego posta - https://web.dev/link-prefetch/ .
źródło
Mogę tylko zgadywać. Pewna odpowiedź może być znaleziona tylko przez ciebie, poprzez eksperyment. Istnieje zbyt wiele zmiennych, aby można je było uwzględnić. Ale tutaj kilka pomysłów:
prefetchjest wskazówką dla przeglądarki. Przeglądarka może go zignorować z pewnych arbitralnych powodów. Co więcej, ma najniższy priorytet.Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching(lub coś w tym rodzaju).
https://www.technipages.com/google-chrome-prefetch
example.com?prefetchżądania.Sprawdź, czy Twój serwer ustawia jakieś dziwne nagłówki w odpowiedzi na
prefetchżądania. NpCache-Control: no-cache. Tak, widzę, żecache-control: max-age=31536000tak, to byłoby naprawdę dziwne, gdyby serwer wysłał inny nagłówek dla tego samego żądania (cóż ... prawie taki sam , przynajmniej nie powiedziałeś, że są, i przynajmniej może być nagłówkami wskazującymi, że jest toprefetchżądanie), ale zdarzają się dziwne rzeczy.Prawdopodobnie powinieneś spróbować dodać
crossoriginatrybut. Na przykład<link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />Tutaj https://www.w3.org/TR/resource-hints/ można znaleźć ten przykład
dość istotne dla twojej sprawy, ale niestety bez wyjaśnienia.
W oryginalnej wersji pytania wspomniałeś o pracownikach usług ... Jeśli coś pobierają, a nawet ty coś pobierasz ręcznie, może to być problem. Ze względu na najniższy priorytet
prefetchhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F
Myślę, że to samo dotyczy Chrome.
Czy próbowałeś przenieść swoją stronę docelową do domeny głównej? Jeśli tak i
prefetchdziała zgodnie z oczekiwaniami, wówczas tak - subdomena jest przyczyną problemu. A komunikat GUIStatus Code: 200 (from prefetch cache)to prawdopodobnie tylko usterka. Ponieważ niedawno niektóre rzeczy zaczęły się zmieniaćprefetchw Chrome. I nie wiem jeszcze, czy wszystko się ułożyło. Zasadniczo tak, istnieje pewne prawdopodobieństwo, że możeszprefetchpochodzić tylko z tego samego źródła.https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit
źródło
powinieneś dodać poniższy kod na wypadek, gdybyś był w swojej subdomenie i chciałbyś zasobów z domeny
źródło