HTML5 memperkenalkan teknologi cache aplikasi, yang berarti bahwa aplikasi web dapat di -cache dan digunakan tanpa jaringan.
Tiga keuntungan yang dibawa oleh cache aplikasi adalah:
① Jelajahi Offline
② Tingkatkan kecepatan pendapatan wajah halaman
③ Kurangi tekanan server
Dan browser utama didukung dengan mendukung cache aplikasi.
Teknologi penyimpanan offlineHTML5 mengusulkan dua teknologi penyimpanan offline utama: localstorage dan cache aplikasi, masing -masing dengan skenario aplikasinya sendiri;
Setelah latihan, kami percaya bahwa LocalStorage harus menyimpan beberapa data AJAX non -kritis dan melakukan kue;
Cache aplikasi masih digunakan untuk menyimpan sumber daya statis, dan masih merupakan masalah lapisan gula kering;
Dan cookie hanya dapat menyimpan teks paragraf kecil (4096 byte); Dilakukan dengan cookie.
Oleh karena itu, skenario aplikasi cache aplikasi berbeda, jadi penggunaannya tidak konsisten.
PENDAHULUAN CACHE APLIKASICache Aplikasi menggunakan dua aspek:
① Server perlu mempertahankan daftar manifes
② Hanya ada satu pengaturan sederhana di browser
<html manifest = demo.appcache>
Untuk menjelaskan contohnya:
Cache ManifestCache:# The list of cache style1.css1.jpg01.jshttp: //localHost/applicationCache/02.jshttp: //localhost/Application/zepto.jsNetw Ork:# 4.jpgFallback:# After the access cache fails , The Sumber daya akses cadangan, yang pertama adalah sumber akses, yang kedua adalah mengganti file*.html /offline.html2.jpg/3.jpg
Pertama -tama, saya melaporkan kesalahan di sini:
Acara Kesalahan cache aplikasi: Manifest Fetch Gagal (404)
Alasan kesalahan ini adalah bahwa file manifes perlu mengkonfigurasi tipe-mime yang benar, yaitu, teks/cache-manifest. Harus dikonfigurasi di server web, server yang berbeda berbeda
/ApplicationCache 01.js 02.js 1.jpg 2.jpg 3.jpg 4.jpg demo.appcache index.html style1.css style2.css web.config zepto.js
Dengan cara ini, Anda dapat menerapkannya secara offline.
Perlu dicatat di sini.
File manifes dapat dibagi menjadi tiga bagian:
Cache Manifest -file yang tercantum pada judul ini akan cache setelah unduhan pertama
Jaringan -File yang tercantum dalam judul ini harus terhubung ke server tanpa di -cache
Fallback -File -file yang tercantum pada judul ini menetapkan bahwa halaman -halaman halaman mundur ketika halaman tidak dapat diakses (seperti halaman 404)
Seperti yang ditunjukkan pada gambar, HTML5 mendefinisikan beberapa titik peristiwa, tetapi kami umumnya tidak secara aktif menggunakan JS untuk mengoperasikan sesuatu.
DimensiBatas ukuran cache aplikasi disatukan pada 5m, saya melakukan tes di sini:
Seperti yang ditunjukkan, kedua file CSS masih melebihi 5m saat ini
Dokumen dimuat dari cache aplikasi dengan manifes http: //localhost/applicationcache/demo.appcacheindex.html: 1 Aplikasi Cache Memeriksa Dex.html: 6 Dapatkan http: //localhost/applicationcache/style2.css net :: err_fair.fair.fair.fair.fair. 1 Aplikasi cache noupdate eventIndex.html: 11 dapatkan http: //localhost/applicationcache/2.jpg net :: err_fairdindex.html: 12 getp: // localhost/appl icicationcache/3.jpg net :: err_faird
Seperti yang ditunjukkan, style2 tidak bisa lagi cache, masalah apa yang akan menyebabkan ini?
Misalnya, Saluran A mempertahankan cache aplikasinya sendiri, dan Channel B juga mempertahankan dirinya.
Disarankan bahwa cache aplikasi, menyimpan sumber daya publik, jangan menyimpan sumber daya bisnis
Beberapa masalahDari perspektif mekanisme pembaruan, ketika memperbarui manifes untuk pertama kalinya, karena pemuatan halaman telah dimulai atau bahkan selesai, pembaruan cache tidak selesai, dan browser masih akan menggunakan sumber daya yang kedaluwarsa; diperbarui. Pada saat ini, acara Window.Reload dieksekusi di acara pembaruan.
Window.applicationCache.addeventListener (updateready, function () {window.location.reload ()});Dari contoh di atas, dapat diketahui bahwa cache bukan hanya file definisi, seperti ApplicationCache/waktu dalam contoh di atas, data index.html saat pemetaan disimpan secara default, dan berisi demo. File AppCache.
Misalnya, kami membuat perubahan di sini:
<html manifest = demo.appcache> => <html manifest = demo1.appcache>
Pada saat ini, jika Anda tidak melakukan pembaruan demo.appcache, cache tidak akan diperbarui karena index.html di -cache, dan deteksi masih merupakan daftar manifes asli
Setiap halaman secara seragam mengelola daftar manifesnya sendiri, yang berarti bahwa halaman A dikonfigurasi dengan Common.js, dan halaman B juga dikonfigurasi dengan Common.js, yang berarti bahwa setelah halaman diperbarui, jika manifes pada halaman B B halaman B b Tidak akan diubah, halaman B masih dibaca.
MeringkaskanDalam hal ketersediaan dan kemudahan penggunaan, cache aplikasi layak digunakan, tetapi yang terbaik adalah cache untuk sumber daya statis.