Saya telah mencoba menggunakan sesuatu seperti ini untuk mendapatkan peningkatan kinerja saat mengklik dari halaman arahan sederhana ke aplikasi satu halaman kelas berat:
<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" />
Tampaknya tidak ada peningkatan kinerja yang terlihat saat halaman arahan saya berada di subdomain. Katakan https://subdomain.example.com,.
Ketika saya mengklik tautan untuk mengunjungi https://example.com, saya masih melihat penundaan yang lama di tab jaringan Chrome sebagai app.jsdan app.cssdimuat:
Berikut sumber yang sama dengan prefetching dinonaktifkan:
Total waktu yang dibutuhkan kira-kira sama.
Minta tajuk untuk salah satu aset yang dimuat dengan cache prefetch:
Umum:
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
Tanggapan:
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
Permintaan:
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
Pertanyaan saya adalah: Jika Chrome menunjukkan bahwa cache prefetch digunakan, mengapa ada waktu pengunduhan konten yang signifikan?
Tampaknya Chrome memiliki berbagai jenis cache: cache prefetch, cache disk, dan cache memori. Cache disk dan cache memori sangat cepat (5ms dan 0ms memuat kali). Namun cache prefetch sangat tidak berguna dengan 300ms kali pengunduhan. Bisakah saya mendapatkan penjelasan teknis mengapa ini terjadi? Apakah ini bug dengan Chrome? Saya di Chrome 79.0.3945.117.
sumber
Jawaban:
Menambahkan
<link rel=prefetch>ke halaman web memberitahu browser untuk mengunduh seluruh halaman atau beberapa sumber daya (seperti skrip atau file CSS), yang mungkin dibutuhkan pengguna di masa depan. Ini dapat meningkatkan metrik seperti Cat Konten Pertama dan Waktu ke Interaktif dan sering dapat membuat navigasi berikutnya muncul untuk dimuat secara instan.Petunjuk pengambilan awal menggunakan byte tambahan untuk sumber daya yang tidak segera diperlukan, sehingga teknik ini perlu diterapkan secara bijaksana; hanya mengambil sumber daya saat Anda yakin bahwa pengguna akan membutuhkannya. Pertimbangkan untuk tidak mengambil saat pengguna berada di koneksi yang lambat. Anda dapat mendeteksi itu dengan API Informasi Jaringan.
Ada berbagai cara untuk menentukan tautan mana yang akan diambil. Yang paling sederhana adalah dengan mengambil tautan pertama atau beberapa tautan pertama di halaman saat ini. Ada juga perpustakaan yang menggunakan pendekatan yang lebih canggih, yang dijelaskan kemudian dalam posting ini- https://web.dev/link-prefetch/ .
sumber
Saya hanya bisa menebak. Jawaban yang meyakinkan mungkin hanya dapat ditemukan oleh Anda, melalui eksperimen. Ada terlalu banyak variabel untuk diperhitungkan. Tapi di sini ada beberapa ide:
prefetchadalah petunjuk untuk browser. Browser dapat mengabaikannya karena beberapa alasan sewenang-wenang. Lebih dari itu memiliki prioritas terendah.Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching(atau sesuatu seperti itu).
https://www.technipages.com/google-chrome-prefetch
example.com?prefetchpermintaan.Periksa apakah server Anda menetapkan beberapa header aneh sebagai respons terhadap
prefetchpermintaan. MisalnyaCache-Control: no-cache. Ya, saya melihat bahwa Anda punyacache-control: max-age=31536000, jadi itu akan sangat aneh, jika server akan mengirim tajuk yang berbeda untuk permintaan yang sama (baik ... hampir sama , setidaknya Anda tidak mengatakan bahwa mereka, dan setidaknya ada bisa ada beberapa tajuk yang menunjukkan bahwa itu adalahprefetchpermintaan), tetapi hal-hal aneh terjadi.Anda mungkin harus mencoba menambahkan
crossoriginatribut. Misalnya<link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />Di sini https://www.w3.org/TR/resource-hints/ Anda dapat menemukan contoh ini
cukup relevan untuk kasus Anda, tetapi sayangnya tanpa penjelasan.
Dalam versi asli pertanyaan Anda, Anda menyebutkan pekerja layanan ... Jika mereka mengunduh sesuatu, atau bahkan diri Anda sendiri mengunduh sesuatu, itu juga bisa menjadi masalah. Karena prioritas terendah
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
Saya pikir hal yang sama berlaku untuk Chrome.
Sudahkah Anda mencoba untuk memindahkan halaman arahan Anda ke domain root? Jika, ya, dan
prefetchberfungsi seperti yang diharapkan, maka ya - subdomain adalah penyebab masalah. Dan pesan GUIStatus Code: 200 (from prefetch cache)mungkin hanya kesalahan. Karena baru-baru ini beberapa hal mulai berubah dalamprefetchperilaku di Chrome. Dan saya belum tahu apakah semuanya beres. Pada dasarnya, ya, ada kemungkinan tertentu bahwa Andaprefetchhanya dapat dari asal yang sama.https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit
sumber
Anda harus menambahkan kode di bawah jika Anda subdomain yang aktif dan Anda ingin sumber daya dari domain
sumber