يقدم HTML5 تقنية ذاكرة التخزين المؤقت للتطبيق ، مما يعني أنه يمكن تخزين تطبيقات الويب واستخدامها بدون شبكة.
المزايا الثلاث التي تقدمها ذاكرة التخزين المؤقتة هي:
① تصفح متصل
② زيادة سرعة دخل الوجه للصفحة
③ تقليل ضغط الخادم
ويدعم المتصفح الرئيسي ذاكرة التخزين المؤقت للتطبيق.
تكنولوجيا التخزين في وضع عدم الاتصالتقترح HTML5 تقنية تخزين رئيسية في وضع عدم الاتصال: Cache LocalStorage و Application ، كل منها مع سيناريوهات التطبيق الخاصة بها ؛
بعد التدريب ، نعتقد أن LocalStorage يجب أن تخزن بعض بيانات أياكس غير الحرجة والقيام بالكعكة ؛
لا يزال يستخدم ذاكرة التخزين المؤقت للتطبيق لتخزين الموارد الثابتة ، ولا تزال مسألة الجليد الجاف ؛
ويمكن أن تنقذ ملفات تعريف الارتباط فقط (4096 بايت) ؛ يتم تنفيذ ملفات تعريف الارتباط.
لذلك ، فإن سيناريو التطبيق لذاكرة التخزين المؤقت للتطبيق مختلف ، لذا فإن الاستخدام غير متسق.
مقدمة التخزين المؤقت للتطبيقيستخدم ذاكرة التخزين المؤقت للتطبيق جانبين:
① يحتاج الخادم إلى الحفاظ على قائمة واضحة
② لا يوجد سوى إعداد بسيط واحد على المتصفح
<html missest = demo.appcache>
لشرح المثال:
Cache DayestCache:# قائمة cache style1.css1.jpg01.jshttp: //localhost/applicationcache/02.jshttp: //localhost/applicination مورد للوصول الاحتياطي ، الأول هو مصدر الوصول ، والثاني هو استبدال الملف*.html /offline.html2.jpg/3.jpg
بادئ ذي بدء ، أبلغت عن خطأ هنا:
حدث خطأ في ذاكرة التخزين المؤقت للتطبيق: فشل الجلب البيض (404)
سبب هذا الخطأ هو أن ملف البيان يحتاج إلى تكوين نوع MIME الصحيح ، أي النص/ذاكرة التخزين المؤقت. يجب تكوينها على خادم الويب ، خوادم مختلفة مختلفة
/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
وبهذه الطريقة ، يمكنك تطبيقه في وضع عدم الاتصال
تجدر الإشارة إلى هنا.
يمكن تقسيم الملفات الواضحة إلى ثلاثة أجزاء:
بيان ذاكرة التخزين المؤقت -الملف المدرج على هذا العنوان سوف يخبئ بعد التنزيل الأول
الشبكة -يجب توصيل الملفات المدرجة في هذا العنوان بالخادم دون أن يتم تخزينها مؤقتًا
تراجع الملفات المدرجة في هذا العنوان أن صفحات الصفحات المتراجع عندما لا يمكن الوصول إلى الصفحة (مثل الصفحة 404)
كما هو موضح في الشكل ، يحدد HTML5 العديد من نقاط الأحداث ، لكننا لا نستخدم عمومًا JS لتشغيل شيء ما.
البعديتم توحيد الحد الأقصى لحجم ذاكرة التخزين المؤقت للتطبيق عند 5 أمتار ، وأجري اختبارًا هنا:
كما هو موضح ، لا يزال ملفان CSS يتجاوزان 5 أمتار في هذا الوقت
تم تحميل المستند من ذاكرة التخزين المؤقت للتطبيق باستخدام manifest http: //localhost/applicationcache/demo.appcacheindex.html: 1 تطبيق ذاكرة التخزين المؤقت dex.html: 6 الحصول على http: //localhost/applicationcache/style2.cs net :: err_fairdindex.html 1 تطبيق Cache NoupDate eventIndex.html: 11 احصل على http: //localhost/applicationcache/2.jpg net :: err_fairdindex.html: 12 getp: // localhost/appl icationcache/3.jpg net :: err_fairdd
كما هو موضح ، لم يعد النمط 2 قادرًا على ذاكرة التخزين المؤقت ، ما هي المشكلات التي سيسببها هذا؟
على سبيل المثال ، تحافظ القناة A على ذاكرة التخزين المؤقتة الخاصة بها ، كما تحافظ القناة B على نفسها.
يوصى بتخزين ذاكرة التخزين المؤقت ، وتخزين الموارد العامة ، ولا تخزن موارد الأعمال
بعض المشاكلمن منظور آلية التحديث ، عند تحديث البيان لأول مرة ، لأن تحميل الصفحة قد تم الانتهاء منه ، لا يتم إكمال تحديث ذاكرة التخزين المؤقت ، وسيظل المتصفح يستخدم الموارد منتهية الصلاحية ؛ يتم تحديثه. في هذا الوقت ، تم تنفيذ حدث Window.reload في حدث التحديث.
window.applicationCache.adDeventListener (updateready ، function () {window.location.reload ()}) ؛من المثال أعلاه ، يمكن أن يُعرف أن ذاكرة التخزين المؤقت ليست فقط ملف التعريف ، مثل ApplicationCache/time في المثال أعلاه ، يتم حفظ بيانات index.html حيث يتم حفظ التعيين افتراضيًا ، ويحتوي على العرض التوضيحي. ملف AppCache.
على سبيل المثال ، نجري تغييرًا هنا:
<html missest = demo.appcache> => <html manesest = demo1.appcache>
في هذا الوقت ، إذا لم تقم بتحديثات Demo.AppCache ، فلن يتم تحديث ذاكرة التخزين المؤقت لأن الفهرس
تدير كل صفحة بشكل موحد قائمة البيان الخاصة بها ، مما يعني أنه تم تكوين الصفحة A باستخدام common.js ، ويتم تكوين صفحة B أيضًا باستخدام common.js ، مما يعني أنه بعد تحديث الصفحة ، إذا كان البيان على الصفحة B لن يتم تغييرها ، لا تزال الصفحة ب هي القراءة.
لخصفيما يتعلق بالتوافر وسهولة الاستخدام ، فإن ذاكرة التخزين المؤقت للتطبيق تستحق استخدامها ، ولكن من الأفضل أن تنفق المزيد من الجهد!