Bagaimana untuk menetapkan cache dalam css

Semasa proses pembangunan tapak web, kami sering menghadapi masalah: kelajuan capaian tapak web sangat mengagumkan. Antaranya, faktor penting ialah tetapan cache laman web. Dalam artikel ini, saya akan memperkenalkan secara terperinci prinsip, kaedah, dan teknik pengoptimuman caching CSS.

1. Prinsip caching

Prinsip caching tapak web adalah sangat mudah: menyimpan beberapa fail yang biasa digunakan dalam cache setempat pengguna Pada kali berikutnya pengguna melawat tapak web yang sama, mereka boleh terus aksesnya daripada Baca fail secara setempat, menghasilkan pemuatan yang lebih cepat.

Fail CSS adalah bahagian penting tapak web kerana ia mempengaruhi penampilan, interaksi dan aspek lain tapak web. Apabila menyediakan cache, kami boleh menggunakan pengepala HTTP untuk menentukan dasar caching untuk fail CSS, membenarkan penyemak imbas untuk cache fail apabila ia mula-mula mengaksesnya, dan kemudian membacanya terus daripada cache apabila mengaksesnya semula.

2. Kaedah tetapan cache

Tetapan cache fail CSS terutamanya melibatkan dua pengepala HTTP: Tamat Tempoh dan Kawalan Cache.

1. Tamat Tempoh

Tamat Tempoh ialah pengepala HTTP yang digunakan untuk menetapkan masa tamat tempoh fail. Apabila menetapkan pengepala ini, kita boleh menentukan masa tamat tempoh tetap, seperti Expires: Fri, 01 Jan 2022 00:00:00 GMT, atau menetapkan masa relatif, seperti Expires: 1h.

Apabila pelanggan mengakses fail buat kali pertama, ia akan dicache dan masa tamat tempoh cache akan disimpan secara setempat. Apabila fail itu diakses semula pada masa akan datang, penyemak imbas akan menentukan sama ada cache telah tamat tempoh Jika ia belum tamat tempoh, fail akan dibaca terus dari cache, jika tidak, fail akan diminta semula.

Perlu diambil perhatian bahawa pengepala Tamat Tempoh bergantung pada masa klien Jika masa klien tidak tepat, tetapan cache mungkin tidak sah.

2. Cache-Control

Berbanding dengan Tamat Tempoh, Cache-Control adalah lebih fleksibel. Ia juga merupakan pengepala HTTP yang nilainya ialah rentetan yang mengandungi berbilang arahan, seperti Cache-Control: max-age=3600, public.

Beberapa arahan yang biasa digunakan termasuk:

• umur maks: menentukan masa cache fail, dalam saat.
• tiada cache: Memberitahu klien bahawa ia mesti mengesahkan dahulu dengan pelayan sama ada cache telah tamat tempoh.
• awam: Fail boleh dicache oleh cache awam (seperti CDN).
• peribadi: Fail ini hanya boleh dicache oleh cache peribadi, seperti cache penyemak imbas.

Perlu diambil perhatian bahawa Kawalan Cache akan mengatasi Tamat Tempoh.

3. Teknik pengoptimuman caching

1. Kawalan nombor versi

Dalam pembangunan tapak web, kandungan fail CSS sering diubah. Jika anda tidak mengubah suai tetapan cache, penyemak imbas akan memuat turun semula fail selepas cache tamat, menyebabkan tapak web dimuatkan dengan lebih perlahan.

Untuk menyelesaikan masalah ini, kami boleh menambah nombor versi pada URL fail CSS, seperti style.css?v=1.0. Setiap kali kandungan fail berubah, anda hanya perlu mengemas kini nombor versi, dan penyemak imbas akan menganggap ia adalah fail baharu dan memuat turunnya semula.

2. Pisah fail CSS

Kadangkala fail CSS yang kita tulis boleh menjadi sangat besar, menyebabkan halaman dipaparkan lebih perlahan. Pada ketika ini, kita boleh membahagikan fail CSS kepada beberapa fail yang lebih kecil supaya penyemak imbas boleh memuat turunnya secara selari.

Pada masa yang sama, menyelaraskan bahagian CSS yang biasa digunakan ke dalam HTML boleh mengelakkan memuatkan berbilang fail kecil dan meningkatkan kelajuan pemuatan halaman.

3. Dayakan pemampatan Gzip

Mampatan Gzip ialah cara sebelah pelayan untuk memampatkan fail teks, seperti fail CSS. Ia boleh mengurangkan saiz fail dengan ketara, dengan itu mempercepatkan muat turun fail.

Dalam pelayan web seperti Nginx atau Apache, kami boleh mendayakan pemampatan Gzip melalui konfigurasi.

4. Gunakan CDN

CDN ialah perkhidmatan penempatan terpusat dan teragih yang boleh cache fail sumber pada berbilang pelayan di seluruh dunia, dengan itu meningkatkan kelajuan pemuatan fail.

Apabila kami mengehos fail CSS pada CDN, apabila pengguna melawati tapak web, fail tersebut akan dimuatkan melalui pelayan CDN terdekat, sekali gus mempercepatkan pemaparan halaman.

Pembekal perkhidmatan CDN arus perdana termasuk Alibaba Cloud, Tencent Cloud, Huawei Cloud, dsb.

4. Ringkasan

Tetapan cache CSS ialah bahagian penting dalam pengoptimuman tapak web. Dengan menetapkan cache dengan betul, anda boleh mengurangkan masa muat turun fail dengan ketara dan meningkatkan prestasi tapak web dan pengalaman pengguna. Dalam pembangunan sebenar, kami perlu memilih penyelesaian tetapan cache yang sesuai dengan kami berdasarkan keadaan tertentu, dan terus mengoptimumkan untuk meningkatkan prestasi tapak web.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan cache dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!