Adakah anda biasa dengan beberapa perkara penting tentang mekanisme caching HTML?

Pemahaman mendalam tentang mekanisme caching HTML: Adakah anda tahu apa itu?

Caching HTML ialah strategi pengoptimuman yang sering digunakan dalam pembangunan web Dengan menyimpan sumber statik halaman web secara setempat pada peranti pengguna, ia boleh mengurangkan beban pada pelayan, meningkatkan kelajuan pemuatan halaman web dan juga meningkatkan pengguna. pengalaman. Artikel ini akan memperkenalkan mekanisme caching HTML secara terperinci dan menyediakan beberapa contoh kod khusus.

1. Mekanisme cache penyemak imbas

Kebanyakan penyemak imbas menyokong cache HTTP dan mengawal tingkah laku cache sumber melalui pengepala protokol HTTP. Mekanisme cache HTTP yang biasa digunakan ialah:

1. Cache paksa: mengawal masa cache sumber dengan menetapkan pengepala Tamat Tempoh atau Kawalan Cache. Apabila masa cache belum tamat, penyemak imbas memuatkan sumber terus dari cache tanpa menghantar permintaan kepada pelayan. Contohnya:

   <!-- 设置过期时间为1小时 -->
   <meta http-equiv="Expires" content="Thu, 01 Dec 2022 00:00:00 GMT">
   
   <!-- 使用Cache-Control设置缓存时间 -->
   <meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate">

   Salin selepas log masuk

2. Cache rundingan: Kenal pasti maklumat versi sumber dengan menetapkan pengepala Last-Modified dan ETag. Apabila masa cache tamat, penyemak imbas menghantar permintaan kepada pelayan, dan pelayan mengembalikan kod status 304 berdasarkan maklumat versi sumber, memberitahu penyemak imbas untuk menggunakan cache setempat. Contohnya:

   // 设置Last-Modified头
   if (File.lastModified) {
     response.setHeader("Last-Modified", new Date(File.lastModified()).toGMTString());
   }
   
   // 设置ETag头
   response.setHeader("ETag", "12345");

   Salin selepas log masuk

2. Mekanisme caching halaman web

Selain caching HTTP, mekanisme caching halaman web juga boleh dilaksanakan dengan cara berikut:

1. Menggunakan LocalStorage: LocalStorage adalah sisi pelanggan storan yang disediakan dalam Teknologi standard HTML5 yang boleh menyimpan data pada bahagian pelayar untuk digunakan apabila halaman web dibuka pada masa akan datang. Contohnya:

   // 存储数据
   localStorage.setItem("key", "value");
   
   // 获取数据
   var data = localStorage.getItem("key");

   Salin selepas log masuk

2. Gunakan SessionStorage: SessionStorage adalah serupa dengan LocalStorage, tetapi data disimpan semasa sesi dan bukannya secara kekal. Data sesi dikosongkan apabila pengguna menutup tetingkap penyemak imbas. Contohnya:

   // 存储数据
   sessionStorage.setItem("key", "value");
   
   // 获取数据
   var data = sessionStorage.getItem("key");

   Salin selepas log masuk

3. Menggunakan Service Worker: Service Worker ialah urutan JavaScript bebas daripada halaman web yang boleh digunakan untuk menyimpan sumber statik halaman web dan menyediakan akses fail semasa di luar talian. Melalui acara pemasangan pekerja perkhidmatan, sumber yang diperlukan boleh dicache. Contohnya:

   self.addEventListener("install", function(event) {
     event.waitUntil(
       caches.open("cache-v1").then(function(cache) {
         return cache.addAll([
           "/js/jquery.min.js",
           "/css/style.css",
           "/images/logo.png"
         ]);
       })
     );
   });

   Salin selepas log masuk

Ringkasnya, mekanisme caching HTML memainkan peranan penting dalam pembangunan web. Dengan menggunakan teknologi caching paksa, caching rundingan dan caching halaman web secara rasional, beban pelayan boleh dikurangkan dengan berkesan dan kelajuan memuatkan halaman web serta pengalaman pengguna dipertingkatkan. Memahami dan menguasai mekanisme caching ini sangat penting untuk membangunkan aplikasi web yang cekap dan stabil.

Saya harap contoh kod yang disediakan dalam artikel ini akan membantu anda memperoleh pemahaman yang lebih mendalam tentang mekanisme cache HTML. Sudah tentu, kaedah pelaksanaan khusus masih perlu diselaraskan dan dioptimumkan mengikut situasi tertentu. Jika anda mempunyai sebarang pertanyaan atau ingin membincangkan topik berkaitan dengan lebih lanjut, sila tinggalkan mesej untuk perbincangan.

Atas ialah kandungan terperinci Adakah anda biasa dengan beberapa perkara penting tentang mekanisme caching HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!