انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #9 من درس: التخزين المؤقت HTTP

Cache Busting Static Files كسر الكاش للملفات الثابتة

أتقن منظومة التخزين المؤقت في HTTP وفق معيار RFC 9111: الفرق بين الكاش الخاص والكاش المشترك، وحساب الصلاحية، وتوجيهات Cache-Control والفرق بين no-cache وno-store، والتحقق الشرطي عبر ETag وكود 304، واستراتيجية كسر الكاش.
4 صفوف تعليمية
تكنولوجيا الويب
1,629 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تواجه هندسة الويب معضلة كلاسيكية عند ضبط الكاش: نحن نريد تخزين ملفات CSS وJavaScript لمدة سنة كاملة (max-age=31536000, immutable‏) لأقصى سرعة ممكنة، لكننا نريد في الوقت ذاته أن يصل أي تحديث برمجي جديد إلى جميع المستخدمين في اللحظة نفسها التي ننشره فيها! فكيف نجمع بين الأمرين؟

الحل الهندسي القياسي هو كسر الكاش بالبصمة الرقمية (Cache Busting / Content Fingerprinting‏)؛ حيث تضيف أدوات البناء الحديثة (مثل Vite وWebpack‏) بصمة محتوى الملف إلى اسمه مباشرة (مثل app.8f9d1a.css‏):

  • الملفات الثابتة المختومة بالبصمة (.css و.js‏): تُعطى صلاحية سنة كاملة مع immutable.
  • صفحة المستند الرئيسية (HTML‏): تُضبط بالتوجيه Cache-Control: no-cache ليتحقق المتصفح منها دائماً. وفور تعديل كود التنسيق، يتغير اسم الملف في البناء الجديد إلى app.c4e29b.css داخل صفحة HTML، فيتعامل معه المتصفح كرابط جديد تماماً ويجلبه على الفور!
الصف 2 كود برمجي

Static Asset Versioning Headerرأس إصدار الملفات الثابتة

تخزين الملفات الثابتة لعام كامل مع ربط أسماء الملفات ببصمة المحتوى للتحديث الفوري.

Shell 
<link rel="stylesheet" href="/css/app.a8f2c1.css">

# Server response header for hashed assets:
HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000, immutable
الصف 3 معاينة حية

Immutable Cache Busting Previewمعاينة تخزين الموارد الثابتة

معاينة تفاعلية توضح سرعة استرجاع الملفات الثابتة فورياً من الذاكرة المحلية دون اتصال شبكي.

الصف 4 ملاحظة هامة

جميع فقرات هذا الدرس (التخزين المؤقت HTTP)