Apakah file javascript di-cache?

Saya telah melihat kinerja beberapa laporan kami di Server Laporan PowerBI lokal kami dan memperhatikan bahwa beberapa file javascript diunduh pada setiap permintaan halaman. File-file tersebut berasal dari apa yang saya lihat statis dan tidak berubah seiring waktu

File-file ini dimuat dari iframe tersembunyi dengan sumber VisualResourceLoader. htm dan bahkan ditambahkan dua kali ke DOM. Jadi klien harus mengunduh semua file ini dua kali

Di header respons saya dapat melihat bahwa file belum dimodifikasi sejak 25 Mei 2021 dan mereka memiliki header tanpa cache dengan ETag yang berarti bahwa klien dapat menggunakan file lokalnya jika cocok

Kami saat ini menggunakan PowerBI Report Server 2021 Mei dalam produksi tetapi saya juga telah mengujinya pada rilis September 2021 dengan hasil yang sama

Dalam artikel ini, kami akan menjelaskan bagaimana browser menggunakan cache-nya untuk memuat halaman lebih cepat, faktor apa saja yang menentukan durasi cache, dan bagaimana kami dapat mem-bypass cache bila diperlukan

Semua browser berusaha menyimpan salinan lokal aset statis dalam upaya mengurangi waktu muat halaman dan meminimalkan lalu lintas jaringan

Mengambil sumber daya melalui jaringan akan selalu lebih lambat daripada mengambilnya dari cache lokal. Ini benar apakah server berada di jaringan yang sama atau terletak di belahan dunia yang jauh

Kasus 1. Pengguna belum pernah mengunjungi situs tersebut sebelumnya

Browser tidak akan memiliki file yang di-cache untuk situs sehingga akan mengambil semuanya dari server

Di bawah ini adalah snapshot sumber daya yang diunduh saat mengunjungi beranda Wikipedia untuk pertama kalinya. Bilah status di bagian bawah menunjukkan bahwa 265KB data telah ditransfer ke browser

Kasus 2. Pengguna telah mengunjungi situs tersebut sebelumnya

Browser akan mengambil halaman HTML dari server web tetapi berkonsultasi dengan cache untuk aset statis (JavaScript, CSS, gambar)

Kita bisa melihat perbedaan yang dibuat oleh cache saat kita me-refresh halaman Wikipedia

Data yang ditransfer turun menjadi 928 byte — yaitu 0. 3% ukuran pemuatan halaman awal. Kolom Ukuran menunjukkan kepada kita bahwa sebagian besar konten diambil dari cache

Chrome akan menarik file dari cache memori atau cache disk. Karena kami tidak menutup browser kami antara Kasus 1 & 2, datanya masih ada di cache memori

Tampilkan Cache Peramban

Di Chrome, kita dapat membuka

Cache-Control: private

Browser memeriksa header respons HTTP yang dihasilkan oleh server web. Ada empat header yang biasa digunakan untuk caching

• ETag
• Kontrol-Cache
• Berakhir
• Terakhir diubah

ETag

ETag (atau Tag Entitas) adalah string yang berfungsi sebagai token validasi cache. Ini biasanya hash dari isi file

Server dapat menyertakan ETag dalam tanggapannya, yang kemudian dapat digunakan browser ini dalam permintaan di masa mendatang (setelah file kedaluwarsa) untuk menentukan apakah cache berisi salinan basi

Jika hashnya sama, maka sumber daya tidak berubah dan server merespons dengan kode respons 304 (Tidak Dimodifikasi) dengan isi kosong. Ini memberi tahu browser bahwa masih aman untuk menggunakan salinan yang di-cache

Perhatikan bahwa ETag hanya digunakan dalam permintaan setiap kali file kedaluwarsa dari cache

Kontrol-Cache

Header Cache-Control memiliki sejumlah arahan yang dapat kita atur untuk mengontrol perilaku cache, kedaluwarsa, dan validasi. Ini dapat digabungkan bersama juga

Perilaku Cache

Cache-Control: public

publik berarti sumber daya dapat di-cache oleh cache apa pun (browser, CDN, dll)

Cache-Control: private

pribadi berarti sumber daya hanya dapat di-cache oleh browser

Cache-Control: no-store

Ini memberi tahu browser untuk selalu meminta sumber daya dari server

Cache-Control: no-cache

Yang ini sebenarnya agak menyesatkan. Itu tidak berarti "jangan di-cache"

Ini memberi tahu browser untuk meng-cache file tetapi tidak menggunakannya sampai memeriksa dengan server untuk memvalidasi kami memiliki versi terbaru. Validasi ini dilakukan dengan header ETag

Ini biasanya digunakan dengan file HTML karena masuk akal bagi browser untuk selalu memeriksa markup terbaru

Kedaluwarsa

Cache-Control: max-age=60

Ini menentukan lamanya waktu dalam detik sumber daya harus di-cache. Jadi max-age=60 berarti harus di-cache selama 1 menit. RFC 2616 merekomendasikan bahwa nilai maksimum tidak boleh lebih dari 1 tahun (max-age=31536000)

Cache-Control: s-max-age=60

Ini hanya digunakan oleh cache perantara seperti CDN

Validasi

Cache-Control: must-revalidate

Ini memberi tahu cache bahwa ia harus memverifikasi status sumber daya basi sebelum menggunakannya dan yang kedaluwarsa tidak boleh digunakan

Berakhir

Header Kedaluwarsa berasal dari HTTP 1 yang lebih lama. 0 hari tetapi masih digunakan di banyak situs

Bidang header ini memberikan tanggal kedaluwarsa setelah aset dianggap tidak valid

Expires: Wed, 25 Jul 2018 21:00:00 GMT

Browser akan mengabaikan bidang ini jika ada direktif usia maksimal di Kontrol-Cache

Terakhir diubah

Header Last-Modified juga dari HTTP 1. 0 hari

Last-Modified: Mon, 12 Dec 2016 14:45:00 GMT

Bidang ini berisi tanggal dan waktu sumber daya terakhir diubah

Tag Meta HTML

Sebelum HTML5, menggunakan tag meta di dalam HTML untuk menentukan kontrol-cache adalah pendekatan yang valid

<meta http-equiv="Cache-control" content="no-cache">

Menggunakan tag meta seperti ini sekarang tidak disarankan dan bukan HTML5 yang valid. Mengapa? . Cache menengah tidak akan

Jadi selalu kirim instruksi caching melalui header HTTP

Tanggapan HTTP

Mari kita lihat contoh respons HTTP

Cache-Control: private

• Baris 2 memberi tahu kita bahwa usia maksimal adalah 1 jam
• Baris 5 memberi tahu kita bahwa ini adalah gambar PNG
• Baris 7 menunjukkan nilai ETag yang akan digunakan untuk validasi setelah tanda 1 jam untuk memverifikasi bahwa sumber daya tidak berubah
• Baris 8 adalah header Kedaluwarsa yang akan diabaikan karena usia maksimum ditetapkan
• Baris 10 adalah tajuk Last-Modified yang menunjukkan kapan gambar terakhir diubah

Jadi kami telah menetapkan bahwa cache browser itu luar biasa, dan kami harus memanfaatkannya

Namun kami juga ingin pengguna melihat versi terbaru halaman kami saat kami melakukan pembaruan. Kami tidak dapat mengharapkan mereka melakukan penyegaran paksa (Ctrl-F5) setiap kali mereka mengunjungi situs kami atau menghapus cache secara teratur

Jenis masalah caching ini sering menjadi sumber frustrasi bagi pengembang dan pengguna akhir. Seorang pengguna mungkin melihat halaman rusak atau tombol yang berperilaku aneh karena mereka memiliki stylesheet atau kode JavaScript yang kedaluwarsa

File Basi

Di bawah ini adalah pertukaran Twitter antara Chase Support dan pengguna yang mengalami masalah dengan formulir login di situs perbankan

Pengguna kemungkinan memiliki beberapa JavaScript lama yang di-cache di browser mereka yang menyebabkan formulir disetel ulang alih-alih dikirim saat tombol Logon diklik

Mari jelajahi situasi lain di mana file basi dapat mengganggu kita

Misalkan kita memperbaiki bug di file JavaScript bernama app. min. js dan dorong pembaruan ke situs produksi kami

Seperti inilah tampilan HTML kita

Cache-Control: private

Server web kami menyetel usia maksimal file JavaScript menjadi 1 minggu (604.800 detik)

Cache-Control: private

Setelah pembaruan, beberapa pengguna melaporkan bahwa mereka masih mengalami masalah yang merupakan gejala bug

Apa yang terjadi di sini?

• Bob mengunjungi situs tersebut 2 minggu yang lalu dan memiliki salinan cache dari aplikasi buggy. min. js. Karena salinannya lebih tua dari usia maksimal, browser akan mengambil file dari server, dan dia mendapatkan versi bebas bug terbaru
• Mary mengunjungi situs tersebut 2 hari yang lalu dan juga memiliki salinan cache dari aplikasi buggy. min. js. Salinannya lebih baru dari usia maksimum sehingga perambannya masih dengan senang hati menggunakan salinan yang di-cache

Di bagian selanjutnya, kita akan melihat cara mencegah masalah ini dengan teknik yang disebut penghancuran cache

Penghancuran cache adalah tempat kami membatalkan file cache dan memaksa browser untuk mengambil file dari server

Kami dapat menginstruksikan browser untuk mem-bypass cache hanya dengan mengubah nama file. Untuk browser, ini adalah sumber daya yang sama sekali baru sehingga akan mengambil sumber daya dari server

Penghancuran cache juga memungkinkan kita untuk mempertahankan nilai usia maksimal yang lama untuk sumber daya yang mungkin sering berubah. Google merekomendasikan agar usia maksimal ditetapkan menjadi 1 tahun (sumber)

Kami dapat menambahkan nomor versi ke nama file

Cache-Control: private

Kita bisa menambahkan sidik jari berdasarkan isi file

Cache-Control: private

Kita bisa menambahkan string kueri ke akhir nama file

Cache-Control: private

Pendekatan string kueri telah mengetahui masalah dengan server proxy sehingga metode ini umumnya tidak dianjurkan

Mengerjakan

• Gunakan header Cache-Control dan ETag untuk mengontrol perilaku cache untuk aset statis
• Tetapkan nilai usia maksimal yang panjang untuk mendapatkan keuntungan dari cache browser
• Gunakan sidik jari atau versi untuk penghancuran cache

Jangan

• Gunakan tag meta HTML untuk menentukan perilaku cache
• Gunakan string kueri untuk penghancuran cache

Bagaimana saya tahu jika file dimuat dari cache?

Lihat Alat Pengembang di browser Anda. Di Chrome, informasi ini ditampilkan di tab Jaringan di bawah kolom Ukuran

Apakah JavaScript di-cache?

Bagaimana cara menghentikan a. File JS tidak di-cache?

Apa itu caching JavaScript?

Apakah file HTML di-cache?