Mengapa css tidak dicache?

CSS (Cascading Style Sheets), sebagai salah satu teknologi paling asas dalam pembangunan bahagian hadapan, sering digunakan untuk mencantikkan halaman tapak web dan mengoptimumkan pengalaman pengguna. Walau bagaimanapun, pembangun laman web sering menghadapi masalah apabila menyahpepijat gaya CSS: Fail CSS tidak dicache.

Apakah caching CSS?

Apabila melawat tapak web, pelayan akan menghantar beberapa sumber statik ke penyemak imbas, seperti HTML, CSS, JavaScript, gambar dan fail lain. Untuk meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna, penyemak imbas menyimpan cache fail ini supaya halaman yang sama dimuatkan dengan lebih cepat pada kali seterusnya anda melawatinya. Mekanisme caching ini dipanggil cache HTTP.

Apabila pengguna melawat halaman untuk kali pertama, penyemak imbas memuat turun semua sumber statik dan menyimpannya dalam cache setempat. Apabila pengguna melawat halaman itu sekali lagi, penyemak imbas boleh membaca fail ini terus dari cache tanpa memuat turun semula fail tersebut. Ini meningkatkan kelajuan memuatkan halaman dan mengurangkan beban pelayan.

Mengapa fail CSS tidak dicache?

Walau bagaimanapun, kadangkala apabila pembangun mengubah suai gaya CSS, mereka mendapati penyemak imbas tidak mengemas kini gaya dalam halaman, tetapi masih memuatkan fail cache sebelumnya. Ini adalah masalah dengan fail CSS tidak dicache.

Punca masalah ini ialah cara mekanisme cache HTTP berfungsi. Apabila penyemak imbas meminta sumber statik, ia akan membawa pengepala permintaan If-Modified-Since, yang mengembalikan nilai Etag sumber kepada pelayan. Pelayan akan menyemak pengepala permintaan ini Jika cache setempat penyemak imbas belum tamat tempoh, pelayan akan mengembalikan kod status 304, yang menunjukkan bahawa fail boleh diperolehi daripada cache tempatan. Oleh itu, walaupun pembangun mengemas kini gaya CSS, jika penyemak imbas masih meminta fail dengan pengepala permintaan lama, pelayan masih akan mengembalikan kod status 304, menyebabkan penyemak imbas tidak mengemas kini gaya CSS.

Bagaimana untuk menyelesaikan masalah fail CSS tidak dicache?

1. Kosongkan cache penyemak imbas

Pembangun boleh menyelesaikan masalah fail CSS tidak dikemas kini dengan mengosongkan cache penyemak imbas. Dalam penyemak imbas Chrome, anda boleh membuka halaman data kosong dengan memasukkan chrome://settings/clearBrowserData dalam bar alamat, pilih kosongkan cache penyemak imbas dan data kuki, kemudian klik butang "Kosongkan Data".

2. Tambahkan nombor versi pada URL

Pembangun boleh menambah nombor versi pada URL fail CSS untuk memastikan penyemak imbas boleh mendapatkan fail terkini. Contohnya, ../style.css?v=1.0, selepas mengubah suai gaya, tukar nombor versi kepada nombor atau cap masa lain Penyemak imbas akan menganggap ini adalah fail baharu dan mengemas kini gaya. Kaedah ini memerlukan pengubahsuaian manual pautan fail dan sesuai untuk projek yang lebih kecil.

3. Tetapkan Kawalan Cache dan Pragma

Pembangun boleh menetapkan Kawalan Cache dan Pragma dalam pengepala respons HTTP pada bahagian pelayan untuk mengawal masa penyemak imbas menyimpan sumber. dan cara. Contohnya, menetapkan Cache-Control kepada no-cache atau max-age=0 dan Pragma kepada no-cache bermakna penyemak imbas tidak akan cache sumber dan setiap permintaan akan mengembalikan versi terkini fail. Kaedah ini sesuai untuk projek yang lebih besar dan tapak web dengan trafik tinggi.

Kesimpulan

Masalah fail CSS tidak dicache adalah masalah biasa dalam pembangunan bahagian hadapan, tetapi pengguna boleh menyelesaikannya dengan mengosongkan cache penyemak imbas, menggunakan nombor versi dan menetapkan Cache-Control dan Pragma. Masalah ini meningkatkan kelajuan memuatkan laman web dan pengalaman pengguna.

Atas ialah kandungan terperinci Mengapa css tidak dicache?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!