Cache memori Chrome vs cache disk

97

Saya tertarik dengan cache memori chrome vs cache disk? Saya menggunakan webpack, plugin potongan umum dan menghasilkan semua file saya dengan chunkhash.

Bagaimana memori berbeda dari cache disk. Ketika saya memuat ulang halaman saya, beberapa file dimuat dari cache memori dan beberapa dari cache disk (bundle.js dan image.jpg dari cache memori dan css dari cache disk). Terkadang berbeda. Bisakah kita mengontrol itu, pilih apa yang dimuat dari mana? Cache memori tampaknya lebih cepat daripada cache disk.

google-chrome caching webpack Igor-Vuk
sumber
1
Hai Igor, Apakah ini menyebabkan masalah memuat webpack? Bagaimana Anda mengatasinya?
Nikmati
1
Tidak ada masalah. Ini hanyalah fungsi cache browser yang menyimpan file paket webpack dalam cache.
Igor-Vuk
Hai Igor, saya melihat ini menjadi masalah ketika beberapa file yang dibundel dimuat dari disk dan beberapa dari memori. Itu melempar kesalahan JSONP, ketika itu terjadi. Ini terjadi hanya dalam kasus yang jarang terjadi.
Nikmati
se / SuperUser
chharvey

Jawaban:

77

Seperti kata nama mereka:

"Cache Memori" menyimpan dan memuat sumber daya ke dan dari Memori (RAM). Jadi ini jauh lebih cepat tetapi tidak terus-menerus. Konten tersedia sampai Anda menutup Browser.

"Disk Cache" tetap ada. Sumber daya yang di-cache disimpan dan dimuat ke dan dari disk.

Tes Sederhana: Buka Alat / Jaringan Pengembang Chrome. Muat ulang halaman beberapa kali. Kolom tabel "Ukuran" akan memberi tahu Anda bahwa beberapa file dimuat "dari cache memori". Sekarang tutup browser, buka Developper Tools / Network lagi dan muat halaman itu lagi. Semua file cache sekarang dimuat "dari cache disk", karena cache memori Anda kosong.

Ruwen
sumber
4
Yah, aku tidak tahu sesederhana itu.
Faizan Anwer Ali Rupani
29
bagaimana browser menentukan aset mana yang akan disimpan di Cache Memori versus Cache Disk?
chharvey
11
dapatkah kita mengonfigurasi apa yang harus di-cache di cache memori?
Igor-Vuk
1
Saya memiliki beberapa itens di aplikasi sudut saya yang dimuat dari disk ketika saya menjalankannya secara lokal, pada produksi, file-file ini tidak di-cache sama sekali. Hanya cache dari memori yang berfungsi di lingkungan produksi. Apakah kalian tahu apa yang bisa menyebabkannya?
Rafael Andrade
@RafaelAndrade Perlu diingat, bahwa sudut menyediakan banyak lingkungan (di src / lingkungan / *. Ts). environment.prod.ts mendefinisikan produktifitas membangun lingkungan di mana environment.ts mendefinisikan lingkungan pembangunan lokal Anda. Dalam pengembangan lokal env Anda kebanyakan tidak menginginkan file yang di-cache sehingga perubahan lokal Anda selalu berlaku untuk aplikasi Anda.
Ruwen
15

Chrome mengimplementasikan cache di berbagai level abstraksi. Pada intinya terdapat cache HTTP (Browser) - backend untuk mekanisme cache lainnya. Umumnya cache dapat dibagi menjadi:

  • Cache HTTP
  • Cache Pekerja Layanan
  • Kedipkan cache

Cache HTTP

Setiap permintaan yang dibuat melalui jaringan diproksikan oleh HTTP Cache yang mengikuti RFC . Ketika diminta untuk cache pertama kali ditimpa. Sumber daya dikunci oleh url asal.

Cache Pekerja Layanan

Untuk menangani kegagalan koneksi jaringan dengan baik, Anda dapat menggunakan Service Worker . Cache dan penyimpanan cache akan diambil dari disk lagi.

Blink Cache

Blink menggunakan Http Cache sebagai backend dalam dua mode pembuatan - dalam memori dan sederhana (sistem file). Yang mana yang digunakan tergantung pada batas yang ditetapkan secara global untuk cache berapa banyak memori yang dapat mereka ambil. Juga cache perender saat ini mendapatkan bagian paling banyak. Yang di-cache adalah font, gambar, dan skrip. Jika penggunaan memori global mencapai beberapa ambang batas yang ditentukan maka backend sistem file digunakan.

Memaksakan dalam cache memori

Jika Anda ingin file Anda disajikan dari mekanisme default penggantian memori, Anda dapat menerapkan Service Worker Anda sendiri. Menggunakan File Api, sumber daya dapat dibaca dan disimpan ke dalam objek di memori. Kemudian mengganti peristiwa pengambilan akan menekan jaringan dan file membaca dengan konten yang disajikan dari objek global ini.

Dominik G
sumber