JavaScript Academy · درس

استراتيجيات التخزين المؤقت

طبّقوا نمطي أولوية ذاكرة التخزين المؤقت وأولوية الشبكة.

استراتيجيات التخزين المؤقت درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

لماذا تهم الاستراتيجيات؟

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

ذاكرة التخزين المؤقت أولًا

ذاكرة التخزين المؤقت أولًا: افحصوا ذاكرة التخزين المؤقت؛ وإذا وجدتم الاستجابة فأعيدوها، وإلا فاجلبوها من الشبكة. تناسب هذه الاستراتيجية الأصول الثابتة قليلة التغير، مثل الخطوط وCSS والصور.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached || fetch(request);
}

التخزين المؤقت أولًا مع التخزين الاحتياطي

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

async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  const fresh = await fetch(request);
  const cache = await caches.open('runtime');
  cache.put(request, fresh.clone());
  return fresh;
}

الشبكة أولًا

الشبكة أولًا: جرّبوا الشبكة؛ فإذا نجح الطلب، استخدموا الاستجابة وخزنوها مؤقتًا، وإذا فشل، كما يحدث عند عدم الاتصال، فانتقلوا إلى ذاكرة التخزين المؤقت. تناسب هذه الاستراتيجية المحتوى الذي يتحدث باستمرار، مثل الأخبار ولوحات المعلومات.

async function networkFirst(request) {
  try {
    const fresh = await fetch(request);
    const cache = await caches.open('runtime');
    cache.put(request, fresh.clone());
    return fresh;
  } catch (err) {
    return caches.match(request);
  }
}

التقديم من النسخة القديمة مع إعادة التحقق

التقديم من النسخة القديمة مع إعادة التحقق: أعِد النسخة المخزنة مؤقتًا فورًا لتحقيق السرعة، وفي الوقت نفسه اجلب نسخة حديثة في الخلفية لتحديث التخزين المؤقت للاستخدام التالي. إنها موازنة ممتازة بين السرعة والحداثة.

async function staleWhileRevalidate(request) {
  const cache = await caches.open('runtime');
  const cached = await cache.match(request);
  const network = fetch(request).then(res => {
    cache.put(request, res.clone());
    return res;
  });
  return cached || network;
}

الشبكة فقط والتخزين المؤقت فقط

طرفان بسيطان ومتباعدان:

الشبكة فقط: اجلب البيانات دائمًا ولا تخزنها مؤقتًا أبدًا، مثل إشارات التحليلات.
التخزين المؤقت فقط: قدّم الأصول المخزنة مسبقًا فقط، ولا تتصل بالشبكة أبدًا، مثل هيكل التطبيق.

// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);

التوجيه حسب نوع الطلب

تختار التطبيقات الفعلية استراتيجية لكل طلب. افحص request.url أو request.destination في معالج الجلب، ثم وجّه الطلب وفقًا لذلك.

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request));
  } else {
    event.respondWith(cacheFirst(event.request));
  }
});

معالجة البدائل عند عدم الاتصال

عندما يفشل كل من الاتصال بالشبكة والبحث في التخزين المؤقت، أعِد صفحة ودية للعمل دون اتصال أو عنصرًا نائبًا بدلًا من استجابة معطلة.

async function withOfflineFallback(request) {
  return (await caches.match(request)) ||
         (await caches.match('/offline.html'));
}

تخزين الاستجابات الناجحة فقط

تجنب تخزين الأخطاء مؤقتًا. افحص response.ok أو حالة الاستجابة قبل التخزين، حتى لا تؤدي استجابة 404 أو 500 إلى إفساد التخزين المؤقت.

const fresh = await fetch(request);
if (fresh.ok) {
  cache.put(request, fresh.clone());
}
return fresh;

اختيار الاستراتيجية

طابق الاستراتيجية مع نوع المحتوى:

الأصول الثابتة: التخزين المؤقت أولًا
البيانات الديناميكية: الشبكة أولًا
المحتوى المختلط: التقديم من النسخة القديمة مع إعادة التحقق

تجمع معظم التطبيقات بين عدة استراتيجيات من خلال توجيه الطلبات.

مراجعة الاستراتيجيات

تتيح استراتيجيات التخزين المؤقت لعامل خدمة واحد تقديم التطبيق بالكامل بذكاء: أصول ثابتة فورية، وبيانات ديناميكية حديثة، وبدائل سلسة عند عدم الاتصال، مع اختيار الاستراتيجية لكل طلب.

اختبار سريع

اختبر مدى فهمك لاستراتيجيات التخزين المؤقت.

مراجعة

لقد تعلمت استراتيجيات التخزين المؤقت:

التخزين المؤقت أولًا للأصول الثابتة.
الشبكة أولًا للبيانات الديناميكية الحديثة.
التقديم من النسخة القديمة مع إعادة التحقق للجمع بين السرعة والحداثة.
وجّه كل طلب عبر request.url/destination.
خزّن الاستجابات الناجحة فقط، وقدّم بدائل عند عدم الاتصال.

التالي: المزامنة في الخلفية وتحديثات التخزين المؤقت.

الأسئلة الشائعة

هل درس «استراتيجيات التخزين المؤقت» مجاني؟

نعم — نص درس «استراتيجيات التخزين المؤقت» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «استراتيجيات التخزين المؤقت»؟

طبّقوا نمطي أولوية ذاكرة التخزين المؤقت وأولوية الشبكة. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «استراتيجيات التخزين المؤقت»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy