Bağlantı önceden getirme alt etki alanlarında çalışır mı?

Basit bir açılış sayfasından ağır tek sayfalık bir uygulamaya kadar performans artışı sağlamak için böyle bir şey kullanmaya çalışıyorum:

<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" />

Açılış sayfam bir alt alandayken belirgin bir performans artışı yok gibi görünüyor. Söyle,https://subdomain.example.com .

Ben ziyaret için bir bağlantıyı tıkladığınızda https://example.com, hala olarak Chrome ağ sekmesinde uzun bir gecikmeyle bakın app.jsve app.cssyüklü şunlardır:

Önceden getirme devre dışı bırakıldığında aynı kaynak şöyledir:

Toplamda yaklaşık aynı süreyi alır.

Ön getirmeli önbellek yüklü varlıklardan biri için üstbilgi isteyin:

Genel:

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-downgrade

Tepki:

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

İstek:

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.36

Benim sorum: Chrome önceden getirme önbelleğinin kullanıldığını belirtirse, neden önemli bir içerik indirme süresi vardır?

Görünüşe göre Chrome'un farklı önbellek türleri var: önbellek, disk önbelleği ve bellek önbelleği. Disk önbelleği ve bellek önbelleği çok hızlıdır (5 ms ve 0 ms yükleme süreleri). Ancak, önceden getirme önbelleği bazen 300ms indirme süreleri ile oldukça işe yaramaz. Bunun neden olduğuna dair teknik bir açıklama alabilir miyim? Chrome ile ilgili bir hata mı? Chrome 79.0.3945.117 kullanıyorum.

<link rel=prefetch>Bir web sayfasına eklemek , tarayıcıya kullanıcının gelecekte ihtiyaç duyabileceği tüm sayfaları veya bazı kaynakları (komut dosyaları veya CSS dosyaları gibi) indirmesini söyler. Bu, İlk İçerikli Boyama ve Etkileşime Geçiş Zamanı gibi metrikleri iyileştirebilir ve genellikle sonraki gezinmelerin anında yüklenmesini sağlayabilir.

Önceden getirme ipucu, hemen ihtiyaç duyulmayan kaynaklar için fazladan bayt tüketir, bu nedenle bu tekniğin dikkatli bir şekilde uygulanması gerekir; kaynakları yalnızca kullanıcıların bunlara ihtiyaç duyacağından eminseniz önceden getirin. Kullanıcılar yavaş bağlantıdayken önceden getirmeyi düşünmeyin. Bunu Network Information API ile tespit edebilirsiniz.

Hangi bağlantıların önceden getirileceğini belirlemenin farklı yolları vardır. En basit olanı, geçerli sayfadaki ilk bağlantıyı veya ilk birkaç bağlantıyı önceden getirmektir. Daha sonra bu sofistike yaklaşımları kullanan kütüphaneler de var, bu https://web.dev/link-prefetch/ .

Sadece tahmin edebilirim. Kendine güvenen cevap muhtemelen sadece sizin tarafınızdan deney yoluyla bulunabilir. Hesaplanacak çok fazla değişken var. Ancak burada bazı fikirler:

1. prefetchtarayıcı için bir ipucudur . Tarayıcı bazı keyfi nedenlerle bunu göz ardı edebilir. Bundan daha düşük önceliğe sahiptir.
2. Örneğin, lütfen tarayıcı ayarlarınızı kontrol edin:
   Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
   (veya bunun gibi bir şey).
3. Herhangi bir şans eseri mobil internet kullanıyorsanız da bir sorun olabilir.
   https://www.technipages.com/google-chrome-prefetch
4. Açılış sayfanızdan adresine ne kadar hızlı gidersiniz example.com?
5. Sunucu günlüklerini, prefetchistek alıp almadığını görmek için kontrol edin .

6. Sunucunuzun prefetchisteklere yanıt olarak bazı garip başlıklar ayarlayıp ayarlamadığını kontrol edin . Örn Cache-Control: no-cache. Evet, gördüğünüz gibi cache-control: max-age=31536000, bu yüzden sunucu aynı istek için farklı bir başlık gönderirse gerçekten garip olurdu (iyi ... neredeyse aynı , en azından öyle olduklarını söylemediniz ve en azından orada bunun bir prefetchistek olduğunu gösteren bazı başlıklar olabilir ), ancak garip şeyler olur.

7. Muhtemelen crossoriginözellik eklemeye çalışmalısınız . Örneğin

   <link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />

   Burada https://www.w3.org/TR/resource-hints/ bu örneği bulabilirsiniz

   <link rel="preconnect" href="//example.com">
   <link rel="preconnect" href="//cdn.example.com" crossorigin>

   davanız için oldukça alakalı, ama ne yazık ki hiçbir açıklama ile.

8. Sorunuzun orijinal sürümünde servis çalışanlarından bahsettiniz ... Bir şey indirdiyse, hatta kendiniz bir şey manuel olarak indirdiyse, sorun da olabilir. En düşük önceliği nedeniyleprefetch

   https://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

   Mozilla kullanarak bir şey indiriyorsanız, arka plan indirmeleri tamamlanıncaya kadar bağlantı önceden getirme ertelenir

   Aynı şey Chrome için de geçerli.

9. Açılış sayfanızı kök etki alanına taşımaya çalıştınız mı? Evetse ve prefetchbeklendiği gibi çalışıyorsa, sorunun nedeni evet - alt alan adıdır. Ve GUI mesajı Status Code: 200 (from prefetch cache)muhtemelen sadece bir aksaklıktır. Çünkü son zamanlarda prefetchChrome'daki davranışta bazı şeyler değişmeye başladı . Ve henüz bir şeylerin çözülüp çözülmediğini bilmiyorum. Temel olarak, evet, prefetchsadece aynı kaynaktan gelme olasılığı vardır .

   https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit

alt etki alanındaysanız ve etki alanından kaynak istiyorsanız aşağıdaki kodu eklemelisiniz

<link rel="preconnect" href="https://example.com">