hujung hadapan web
tutorial js
Perangkap biasa untuk mengelakkan apabila menggunakan cache aplikasi html5
Perangkap biasa untuk mengelakkan apabila menggunakan cache aplikasi html5
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">
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>
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>
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
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
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
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Demystifying JavaScript: Apa yang berlaku dan mengapa penting
Apr 09, 2025 am 12:07 AM
JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript?
Apr 04, 2025 pm 05:09 PM
Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...
Adakah JavaScript sukar belajar?
Apr 03, 2025 am 12:20 AM
Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.
Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido?
Apr 04, 2025 pm 05:36 PM
Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...
Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan
Apr 10, 2025 am 09:33 AM
Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza?
Apr 04, 2025 pm 05:12 PM
Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...
