hujung hadapan web
tutorial js
Perangkap biasa untuk mengelakkan apabila menggunakan cache aplikasi html5
Perangkap biasa untuk mengelakkan apabila menggunakan cache aplikasi html5
Feb 20, 2025 am 10:05 AM
mata utama
- Jangan sertakan fail manifes dalam manifes cache aplikasi, yang boleh membuat gelung yang hampir tidak lagi memaklumkan laman web anda bahawa fail cache baru tersedia.
- Sentiasa tetapkan jenis aplikasi yang nyata dalam fail .htaccess pelayan untuk memastikan AppCache berjalan dengan betul. Jika jenis media tidak ditetapkan, Appcache tidak akan berfungsi.
- Perhatikan bahawa jika tiada fail individu yang dinyatakan dalam fail manifes boleh didapati atau tidak boleh dimuat turun, keseluruhan fail manifes akan dibuang. Ini adalah tingkah laku khas AppCache.
- Selepas mengemas kini laman web, sentiasa mengemas kini fail manifes, jika tidak, pengguna tidak akan melihat perubahan dan hanya akan melihat data yang di -cache sebelumnya. Anda boleh mengemas kini nombor atau tarikh versi dalam komen dalam fail manifes untuk memaksa pelayar web pengguna untuk memuat turun versi baru fail manifes.
Untuk menggunakan AppCache, anda boleh membuat fail manifes dengan lanjutan "Appcache", contohnya: manifest.appcache. Dalam fail ini, anda boleh menyenaraikan semua fail ke cache. Untuk mengaktifkannya di laman web anda, anda mesti memasukkan rujukan kepada fail manifes di laman web elemen HTML, seperti yang ditunjukkan di bawah:
<html lang="en" manifest="manifest.appcache">Ini adalah fail manifes sampel:
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>Di samping manfaat AppCache, terdapat beberapa perangkap biasa yang harus dielakkan untuk mengelakkan mengganggu pengalaman pengguna dan memusnahkan aplikasi anda.
Jangan Senaraikan fail nyata dalam fail nyata
Jika anda memasukkan fail manifes itu sendiri dalam aplikasi cache aplikasi, ia akan terjebak dalam beberapa jenis gelung yang tidak akan memaklumkan laman web anda bahawa terdapat fail cache baru yang tersedia, dan ia harus memuat turun dan menggunakan fail manifes baru bukannya fail manifes lama. Oleh itu, berhati -hati untuk tidak membuat kesilapan berikut:
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>Sumber yang tidak dapat dicapai pada halaman cache tidak akan dimuatkan
Ini adalah kesilapan yang sangat biasa apabila menggunakan Appcache untuk kali pertama. Di sinilah bendera rangkaian dalam fail manifes dimainkan. Bahagian rangkaian fail manifes menentukan sumber yang perlu diakses oleh aplikasi web secara dalam talian.
URL yang ditentukan di bawah bendera rangkaian pada dasarnya adalah "Whitelist", iaitu, fail yang ditentukan di bawah bendera ini sentiasa dimuatkan dari pelayan apabila terdapat sambungan Internet. Sebagai contoh, coretan kod berikut memastikan bahawa permintaan untuk memuat sumber yang terkandung dalam / API / Subtree sentiasa dimuatkan dari rangkaian, bukan dari cache.
<html lang="en" manifest="manifest.appcache">
Sentiasa tetapkan jenis aplikasi yang nyata dalam fail .htaccess pelayan
Fail manifes harus selalu disampaikan di bawah teks jenis media/manifes cache yang betul. Jika jenis media tidak ditetapkan, Appcache tidak akan berfungsi.
Ia harus sentiasa dikonfigurasi dalam fail .htaccess pelayan pengeluaran. Ini disebut dalam kebanyakan tutorial yang menerangkan AppCache, tetapi banyak pemaju mengabaikan ini apabila memindahkan aplikasi web dari pelayan pembangunan ke pelayan pengeluaran.
masukkan yang berikut dalam fail .htaccess Apache:
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>
Jika anda memuat naik aplikasi anda ke Google App Engine, anda boleh melakukan tugas yang sama dengan menambahkan coretan berikut ke fail app.yaml:
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>
Elakkan membuang keseluruhan senarai kerana fail tidak dapat dijumpai
Jika tiada fail individu yang dinyatakan dalam fail manifes boleh didapati atau tidak boleh dimuat turun, keseluruhan fail manifes akan dibuang. Ini adalah tingkah laku yang aneh dari AppCache, yang harus diingat ketika merancang aplikasi web yang menggunakan AppCache.
Contoh:
<code>NETWORK: /api</code>
Jika anda memadam logo.gif, Appcache tidak akan dapat mencari fail imej yang dipadam, jadi tiada apa -apa dalam fail manifes akan dilaksanakan.
data dimuatkan dari AppCache walaupun dalam talian
Setelah penyemak imbas web anda menyimpan fail manifes cache, fail akan dimuatkan dari cache yang nyata walaupun pengguna disambungkan ke Internet. Ciri ini membantu meningkatkan kelajuan pemuatan laman web anda dan membantu mengurangkan beban pelayan.
Perubahan pada pelayan tidak berlaku sehingga fail nyata dikemas kini
Kerana anda tahu dari titik sebelumnya bahawa data akan dimuatkan dari AppCache walaupun pengguna dalam talian, perubahan kepada fail di laman web atau pelayan tidak akan berlaku sehingga fail manifes dikemas kini.
Selepas mengemas kini laman web, anda sentiasa perlu mengemas kini fail manifes, jika tidak, pengguna anda tidak akan pernah melihat perubahan, mereka hanya akan melihat data yang sebelum ini di -cache. Anda boleh mengemas kini nombor atau tarikh versi dalam komen dalam fail manifes untuk memaksa pelayar web pengguna untuk memuat turun versi baru fail manifes. Sebagai contoh, jika anda menggunakan fail senarai sebelum membuat perubahan ke laman web anda:
<code>AddType text/cache-manifest .manifest</code>
Ia boleh ditukar kepada sesuatu yang serupa dengan blok kod berikut supaya penyemak imbas pengguna dapat memuat turun salinan baru fail manifest.
<code>- url: /public_html/(.*\.appcache) static_files: public_html/ mime_type: text/cache-manifest upload: public_html/(.*\.appcache)</code>
Sila ambil perhatian bahawa baris bermula dengan # adalah garis komen yang tidak akan dilaksanakan.
fail manifes mesti disampaikan dari sumber yang sama dengan tuan rumah.
Walaupun fail manifes boleh memegang rujukan kepada sumber yang akan di -cache dari domain lain, ia harus diberikan kepada penyemak imbas web dari sumber yang sama dengan halaman hos. Jika ini tidak berlaku, fail manifes tidak akan dimuatkan. Sebagai contoh, fail manifes berikut betul:
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js</code>
di sini kita menentukan apa yang kita mahu simpan dalam cache penyemak imbas pengguna, yang dirujuk dari domain lain, yang benar -benar baik.
url relatif relatif untuk senarai url
Satu perkara penting yang perlu diperhatikan ialah URL relatif yang anda nyatakan dalam manifes adalah relatif kepada fail manifes, tidak relatif kepada dokumen yang anda rujuk fail manifes. Jika nyata dan rujukan tidak berada di jalan yang sama, sumber tidak akan dimuatkan dan fail nyata tidak akan dimuatkan.
Jika struktur aplikasi anda kelihatan seperti ini:
<html lang="en" manifest="manifest.appcache">
maka fail manifes anda sepatutnya kelihatan seperti ini:
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>
periksa status senarai semak secara programatik
Anda boleh secara programatik memeriksa sama ada aplikasi anda menggunakan versi terkini cache yang manifes dengan menguji window.applicationcache.status. Berikut adalah beberapa kod sampel:
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>
Menjalankan kod di atas di laman web akan memberitahu anda apabila kemas kini baru ke senarai Appcache tersedia. Perhatikan bahawa UpdateReady adalah keadaan yang ditetapkan. Anda juga boleh menggunakan kaedah swapCache () dalam fungsi onupDateReady () untuk menggantikan fail manifes lama dengan fail manifes baru:
<code>NETWORK: /api</code>
Kesimpulan
AppCache adalah teknik yang berguna, tetapi seperti yang telah kita lihat, berhati -hati ketika melaksanakannya dalam projek. Pemaju harus memilih secara selektif apa yang harus dimasukkan ke dalam fail manifes. Idealnya, fail manifes harus mengandungi kandungan statik seperti stylesheets, skrip, fon web, dan imej. Walau bagaimanapun, anda sentiasa menjadi hakim terbaik tentang apa yang termasuk dalam fail manifes. Appcache adalah pedang bermata dua, jadi berhati-hati apabila menggunakannya!
Kebanyakan kandungan di atas telah diperkenalkan di tempat lain, dan terdapat beberapa perkara utama yang lain. Anda boleh menyemak sumber -sumber berikut untuk maklumat lanjut:
- perangkap cache aplikasi pada mdn
- cache aplikasi Jake Archibald adalah jerk
- resipi luar talian Jake Archibald
Soalan Lazim Mengenai Caching Aplikasi HTML5 (FAQ)
Apakah caching aplikasi HTML5 dan mengapa penting?
HTML5 Application Cache (AppCache) adalah ciri yang membolehkan pemaju menentukan fail mana yang harus di -cache oleh penyemak imbas dan menjadikannya tersedia untuk pengguna untuk di luar talian. Ia penting kerana ia dapat meningkatkan prestasi aplikasi web anda dengan mengurangkan beban pelayan dan menjimatkan jalur lebar. Ia juga membolehkan aplikasi berjalan walaupun pengguna berada di luar talian, memberikan pengalaman pengguna yang lebih baik.
Bagaimana aplikasi caching aplikasi HTML5?
Caching Aplikasi HTML5 berfungsi dengan menggunakan fail manifes. Fail ini menyenaraikan sumber yang perlu disemak oleh penyemak imbas untuk kegunaan luar talian. Apabila pengguna mengakses laman web, penyemak imbas memeriksa sama ada fail manifes dikaitkan dengannya. Jika ya, penyemak imbas akan memuat turun dan menyimpan sumber yang disenaraikan. Pada masa yang akan datang pengguna melawat laman web, penyemak imbas akan memuatkan sumber cache dan bukannya memuat turunnya dari pelayan.
Apakah perangkap biasa apabila menggunakan caching aplikasi HTML5?
Apabila menggunakan caching aplikasi HTML5, beberapa perangkap biasa termasuk: tidak mengemas kini fail manifes dengan betul, menyebabkan sumber lama disediakan; Penyimpanan peranti.
Bagaimana untuk mengelakkan perangkap ini?
Untuk mengelakkan perangkap ini, sentiasa mengemas kini fail manifes dengan betul apabila sumber berubah. Gunakan bahagian rangkaian fail manifes untuk menentukan sumber yang tidak boleh di -cache. Juga, pertimbangkan penyimpanan peranti pengguna dan cache hanya sumber yang diperlukan.
Apakah masa depan caching aplikasi HTML5?
cache aplikasi HTML5 sedang ditamatkan, digantikan oleh pekerja perkhidmatan. Pekerja perkhidmatan menyediakan lebih banyak kawalan ke atas cache dan boleh mengendalikan senario yang lebih kompleks. Walau bagaimanapun, pekerja perkhidmatan kini disokong oleh tidak semua pelayar, jadi masih penting untuk memahami dan menggunakan caching aplikasi HTML5.
Bagaimana untuk membuat fail manifes?
Fail manifes adalah fail teks mudah yang menyenaraikan sumber yang akan di -cache. Ia harus dihidangkan sebagai jenis mime "teks/cache-manifest". Baris pertama fail harus "manifes cache", diikuti dengan sumber yang akan di -cache.
Bagaimana untuk mengaitkan laman web dengan fail manifes?
Untuk mengaitkan laman web dengan fail manifes, tambahkan atribut "manifes" ke tag "HTML" laman web. Nilai atribut "nyata" hendaklah menjadi URL fail manifes.
bagaimana untuk mengemas kini cache?
Untuk mengemas kini cache, buat perubahan pada fail manifes. Setiap kali pengguna melawat laman web, penyemak imbas memeriksa kemas kini ke fail manifes. Jika fail manifes telah diubah, penyemak imbas akan memuat turun dan cache sumber baru.
Apa yang berlaku jika sumber yang disenaraikan dalam fail manifes tidak dapat dimuat turun?
Jika sumber yang disenaraikan dalam fail manifes tidak dapat dimuat turun, keseluruhan proses kemas kini cache akan gagal. Penyemak imbas akan terus menggunakan cache lama.
Bolehkah saya menggunakan cache aplikasi html5 untuk semua sumber?
Secara teknikal, anda boleh menggunakan cache aplikasi HTML5 untuk semua sumber, ini tidak disyorkan. Cache sumber yang berlebihan boleh mengisi penyimpanan peranti pengguna dan prestasi kesan negatif. Adalah lebih baik untuk cache hanya sumber yang diperlukan.
Atas ialah kandungan terperinci Perangkap biasa untuk mengelakkan apabila menggunakan cache aplikasi html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Java vs JavaScript: Membersihkan kekeliruan
Jun 20, 2025 am 12:27 AM
Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.
Komen JavaScript: Penjelasan ringkas
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic
Bagaimana untuk bekerja dengan tarikh dan masa di JS?
Jul 01, 2025 am 01:27 AM
Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.
JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju
Jun 20, 2025 am 12:21 AM
JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection
Kenapa anda harus meletakkan tag di bahagian bawah ?
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript: Meneroka jenis data untuk pengekodan yang cekap
Jun 20, 2025 am 12:46 AM
JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)
Apakah peristiwa yang menggelegak dan menangkap di Dom?
Jul 02, 2025 am 01:19 AM
Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.
Apa perbezaan antara Java dan JavaScript?
Jun 17, 2025 am 09:17 AM
Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.
