مقدمة

يعد التخزين المؤقت بمثابة تغيير جذري في تحسين سرعة واستجابة تطبيقات الويب والهاتف المحمول. في هذه المدونة، سنستكشف استراتيجيات التخزين المؤقت الأساسية لتطبيقات الواجهة الأمامية، ونتعامل مع معالجة البيانات الكبيرة، ونتعمق في تعقيدات التخزين المؤقت للخلف/الأمام (B/F).

استراتيجيات التخزين المؤقت الرئيسية لتطبيقات الواجهة الأمامية

التخزين المؤقت للمتصفح

يعمل التخزين المؤقت للمتصفح على زيادة قدرة المتصفح على تخزين نسخ من أصول الويب محليًا، مما يقلل أوقات التحميل وطلبات الخادم. فيما يلي بعض الجوانب المهمة:

• التحكم في ذاكرة التخزين المؤقت: يحدد رأس HTTP هذا سياسات التخزين المؤقت. على سبيل المثال، التحكم في ذاكرة التخزين المؤقت: max-age=3600 يخبر المتصفح بالتخزين المؤقت للمورد لمدة 3600 ثانية.

• انتهاء الصلاحية: يحدد هذا الرأس تاريخ/وقت انتهاء الصلاحية الدقيق للمورد المخزن مؤقتًا. غالبًا ما يتم استخدامه جنبًا إلى جنب مع التحكم في ذاكرة التخزين المؤقت.

• ETag: يوفر رأس ETag معرفًا فريدًا لإصدارات الموارد. عندما يتغير أحد الموارد، تتغير علامة ETag الخاصة به، مما يتيح التحقق الفعال من ذاكرة التخزين المؤقت.
  

Cache-Control: public, max-age=86400
Expires: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "33a64df5"

عمال الخدمة

عمال الخدمة عبارة عن نصوص برمجية يتم تشغيلها في الخلفية، مما يوفر إمكانات تخزين مؤقت متقدمة. يمكنهم اعتراض طلبات الشبكة وتقديم الاستجابات المخزنة مؤقتًا، حتى السماح بالوصول دون اتصال بالإنترنت.

• ذاكرة التخزين المؤقت أولاً: العرض من ذاكرة التخزين المؤقت إذا كان ذلك متاحًا؛ إذا لم يكن الأمر كذلك، قم بالجلب من الشبكة.

• الشبكة أولاً: الجلب من الشبكة أولاً؛ إذا كانت الشبكة غير متاحة، قم بالخدمة من ذاكرة التخزين المؤقت.

• Stale-While-Revalidate: العرض من ذاكرة التخزين المؤقت وجلب وتحديث ذاكرة التخزين المؤقت في الخلفية في نفس الوقت.
  

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

التخزين المحلي وقاعدة البيانات المفهرسة

التخزين المحلي وIndexedDB هما حلول تخزين قائمة على المتصفح لاستمرار البيانات من جانب العميل.

• التخزين المحلي: مثالي لتخزين كميات صغيرة من البيانات كأزواج ذات قيمة رئيسية. إنه متزامن ويبلغ الحد الأقصى للتخزين حوالي 5 ميجابايت.

• IndexedDB: مناسب لتخزين كميات أكبر من البيانات المنظمة. وهو يدعم المعاملات والاستعلامات المعقدة، مما يجعله مثاليًا للبيانات الأكثر جوهرية وتعقيدًا.

مثال

التخزين المحلي

localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');

مفهرسةDB

let request = indexedDB.open('database', 1);
request.onupgradeneeded = event => {
  let db = event.target.result;
  db.createObjectStore('store', { keyPath: 'id' });
};

يحتوي المتصفح نفسه على بعض تقنيات التخزين المؤقت، وهنا واحدة منها.

الغوص العميق في التخزين المؤقت للخلف/الأمام (B/F).

ما هو التخزين المؤقت B/F؟

يشير التخزين المؤقت B/F إلى الآلية التي تقوم بها المتصفحات بتخزين حالة صفحة الويب في سجل المتصفح، مما يتيح للمستخدمين التنقل ذهابًا وإيابًا دون إعادة تحميل الصفحة بأكملها.

تتوفر هذه الميزات في معظم المتصفحات، ويمكنك استكشاف ذلك من علامة التبويب "فحص"

كيف يعمل التخزين المؤقت B/F

• ذاكرة التخزين المؤقت للصفحة : يقوم المتصفح بتخزين الحالة الكاملة للصفحة، بما في ذلك DOM وسياق JavaScript والبيانات الموجودة في الذاكرة.

• BFCache: المتصفحات الحديثة (مثل Chrome وFirefox) تستخدم BFCache للحفاظ على حالة الصفحة في الذاكرة، مما يسمح بالتنقل الفوري.

فوائد التخزين المؤقت B/F

• تنقل أسرع: يتم تحميل الصفحة بشكل فوري عند استخدام زري الرجوع والأمام في المتصفح.

• تجربة مستخدم محسنة: تعمل التحولات السلسة على تحسين تجربة المستخدم الشاملة.

• تقليل تحميل الخادم: طلبات أقل إلى الخادم حيث يتم تخزين حالة الصفحة وإعادة استخدامها.

خاتمة

يمكن أن يؤدي تنفيذ إستراتيجيات التخزين المؤقت الفعالة إلى تحسين أداء تطبيقات الويب والهاتف المحمول بشكل كبير. بدءًا من التخزين المؤقت للمتصفح وعمال الخدمة وحتى معالجة البيانات الكبيرة واستخدام التخزين المؤقت B/F، تضمن هذه التقنيات أن تكون تطبيقاتك سريعة وسريعة الاستجابة وسهلة الاستخدام. ابدأ في الاستفادة من هذه الاستراتيجيات اليوم لإحداث ثورة في أداء تطبيقك!

آمل أن تكون قد تعلمت شيئًا جديدًا من هذه المدونة. تابعني للحصول على مدونات تقنية قصيرة ونقية وعميقة وفريدة من نوعها. شكرًا!