cari
Rumahhujung hadapan webtutorial jsPerangkap biasa untuk mengelakkan apabila menggunakan cache aplikasi html5

Common Pitfalls to Avoid when using HTML5 Application Cache

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.
Caching Aplikasi HTML5 (juga dikenali sebagai AppCache) telah menjadi topik hangat untuk pemaju web baru -baru ini. Appcache membolehkan anda membenarkan pelawat laman web untuk melayari laman web anda semasa di luar talian. Anda juga boleh menyimpan bahagian -bahagian laman web, seperti imej, helaian gaya, atau fon web, dalam cache pada komputer pengguna. Ini dapat membantu memuatkan laman web anda dengan lebih cepat, dengan itu mengurangkan beban pada pelayan.

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!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Aplikasi JavaScript: Dari Front-End ke Back-EndAplikasi JavaScript: Dari Front-End ke Back-EndMay 04, 2025 am 12:12 AM

JavaScript boleh digunakan untuk pembangunan front-end dan back-end. Bahagian depan meningkatkan pengalaman pengguna melalui operasi DOM, dan back-end mengendalikan tugas pelayan melalui Node.js. 1. Contoh front-end: Tukar kandungan teks laman web. 2. Contoh backend: Buat pelayan Node.js.

Python vs JavaScript: Bahasa mana yang harus anda pelajari?Python vs JavaScript: Bahasa mana yang harus anda pelajari?May 03, 2025 am 12:10 AM

Memilih Python atau JavaScript harus berdasarkan perkembangan kerjaya, keluk pembelajaran dan ekosistem: 1) Pembangunan Kerjaya: Python sesuai untuk sains data dan pembangunan back-end, sementara JavaScript sesuai untuk pembangunan depan dan penuh. 2) Kurva Pembelajaran: Sintaks Python adalah ringkas dan sesuai untuk pemula; Sintaks JavaScript adalah fleksibel. 3) Ekosistem: Python mempunyai perpustakaan pengkomputeran saintifik yang kaya, dan JavaScript mempunyai rangka kerja front-end yang kuat.

Rangka Kerja JavaScript: Menguasai Pembangunan Web ModenRangka Kerja JavaScript: Menguasai Pembangunan Web ModenMay 02, 2025 am 12:04 AM

Kuasa rangka kerja JavaScript terletak pada pembangunan yang memudahkan, meningkatkan pengalaman pengguna dan prestasi aplikasi. Apabila memilih rangka kerja, pertimbangkan: 1.

Hubungan antara JavaScript, C, dan penyemak imbasHubungan antara JavaScript, C, dan penyemak imbasMay 01, 2025 am 12:06 AM

Pengenalan Saya tahu anda mungkin merasa pelik, apa sebenarnya yang perlu dilakukan oleh JavaScript, C dan penyemak imbas? Mereka seolah -olah tidak berkaitan, tetapi sebenarnya, mereka memainkan peranan yang sangat penting dalam pembangunan web moden. Hari ini kita akan membincangkan hubungan rapat antara ketiga -tiga ini. Melalui artikel ini, anda akan mempelajari bagaimana JavaScript berjalan dalam penyemak imbas, peranan C dalam enjin pelayar, dan bagaimana mereka bekerjasama untuk memacu rendering dan interaksi laman web. Kita semua tahu hubungan antara JavaScript dan penyemak imbas. JavaScript adalah bahasa utama pembangunan front-end. Ia berjalan secara langsung di penyemak imbas, menjadikan laman web jelas dan menarik. Adakah anda pernah tertanya -tanya mengapa Javascr

Aliran node.js dengan typescriptAliran node.js dengan typescriptApr 30, 2025 am 08:22 AM

Node.js cemerlang pada I/O yang cekap, sebahagian besarnya terima kasih kepada aliran. Aliran memproses data secara berperingkat, mengelakkan beban memori-ideal untuk fail besar, tugas rangkaian, dan aplikasi masa nyata. Menggabungkan sungai dengan keselamatan jenis typescript mencipta powe

Python vs JavaScript: Pertimbangan Prestasi dan KecekapanPython vs JavaScript: Pertimbangan Prestasi dan KecekapanApr 30, 2025 am 12:08 AM

Perbezaan prestasi dan kecekapan antara Python dan JavaScript terutamanya dicerminkan dalam: 1) sebagai bahasa yang ditafsirkan, Python berjalan perlahan tetapi mempunyai kecekapan pembangunan yang tinggi dan sesuai untuk pembangunan prototaip pesat; 2) JavaScript adalah terhad kepada benang tunggal dalam penyemak imbas, tetapi I/O multi-threading dan asynchronous boleh digunakan untuk meningkatkan prestasi dalam node.js, dan kedua-duanya mempunyai kelebihan dalam projek sebenar.

Asal JavaScript: Meneroka Bahasa PelaksanaannyaAsal JavaScript: Meneroka Bahasa PelaksanaannyaApr 29, 2025 am 12:51 AM

JavaScript berasal pada tahun 1995 dan dicipta oleh Brandon Ike, dan menyedari bahasa itu menjadi C. 1.C Language menyediakan keupayaan pengaturcaraan prestasi tinggi dan sistem untuk JavaScript. 2. Pengurusan memori JavaScript dan pengoptimuman prestasi bergantung pada bahasa C. 3. Ciri lintas platform bahasa C membantu JavaScript berjalan dengan cekap pada sistem operasi yang berbeza.

Di sebalik tabir: Apa bahasa JavaScript?Di sebalik tabir: Apa bahasa JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript berjalan dalam penyemak imbas dan persekitaran Node.js dan bergantung pada enjin JavaScript untuk menghuraikan dan melaksanakan kod. 1) menjana pokok sintaks abstrak (AST) di peringkat parsing; 2) menukar AST ke bytecode atau kod mesin dalam peringkat penyusunan; 3) Laksanakan kod yang disusun dalam peringkat pelaksanaan.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan