كيف تعمل ذاكرة التخزين المؤقت للمتصفح؟

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

ما هي ذاكرة التخزين المؤقت للمتصفح؟

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

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

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

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

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

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

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

التحكم في ذاكرة التخزين المؤقت

تم تقديم رأس التحكم في ذاكرة التخزين المؤقت في HTTP / 1.1 ويعتبر التطبيق الأكثر حداثة على الإطلاق. هناك العديد من القيم المختلفة التي يمكنك استخدامها ، اعتمادًا على الطريقة التي تريد أن تتصرف بها المتصفحات. مما يجعلها متعددة الاستخدامات. فيما يلي قائمة بتوجيهات Cache-Control:

• لا مخبأ
  يوجه متصفح الويب الخاص بك إلى عدم الرجوع إلى ذاكرة التخزين المؤقت على الفور ، ولكن للتحقق من صحة المحتوى على الخادم. إذا كانت طازجة ، فيمكن تقديمها من ذاكرة التخزين المؤقت.
• لا متجر
  يخبر المتصفح بعدم تخزين المحتوى مؤقتًا بأي شكل من الأشكال. يتم استخدامه في الغالب عند التعامل مع البيانات الحساسة أو البيانات التي تتغير بشكل متكرر.
• عام
  يميز المحتوى بأنه عام ، مما يعني أنه يمكن تخزينه مؤقتًا بواسطة المتصفح وأي أطراف وسيطة (مثل الوكلاء ، وما إلى ذلك).
• خاص
  يُستخدم لتمييز المحتوى على أنه خاص ، مما يعني أنه يمكن تخزينه مؤقتًا فقط بواسطة المتصفح ، وليس بواسطة وكلاء وسيط وما شابه. يشير هذا عادةً إلى البيانات المتعلقة بالمستخدم.
• ماكس سن
  يمثل Max-age الحد الأقصى للوقت بالثواني الذي يمكن أن يظل فيه المحتوى في ذاكرة التخزين المؤقت للمتصفح قبل أن يحتاج العميل إلى إعادة التحقق منه. على عكس عنوان انتهاء الصلاحية الذي سنقوم بزيارته قريبًا ، يحدد الحد الأقصى للعمر قيمة نسبية بالثواني من وقت تخزين المحتوى مؤقتًا ، وليس تاريخ انتهاء الصلاحية المطلق.
• S- ماكساج
  هذا مشابه لـ max-age ولكنه يستخدم فقط لذاكرة التخزين المؤقت الوسيطة.
• يجب إعادة التحقق
  يفرض على المتصفح إعادة التحقق من المحتوى في كل مرة يحتاج إليه ، بدلاً من مجرد تقديمه مباشرةً من ذاكرة التخزين المؤقت للمتصفح.
  هذا مفيد في حالة حدوث انقطاع في الشبكة.
• إعادة التحقق من الوكيل
  مشابه لـ must-revalidate ، لكنه لا ينطبق إلا على ذاكرات التخزين المؤقت الوسيطة.
• لا تحويل
  يوجه المتصفح إلى عدم تحويل المحتوى المستلم من الخادم بأي طريقة (عادةً ما يتم ضغطه وما إلى ذلك).

ايتاج

يتم استخدام رأس استجابة Etag لتحديد مورد معين. في كل مرة يتغير فيها مورد معين ، يتم إنشاء Etag جديد. بهذه الطريقة ، يتم حفظ النطاق الترددي ، لأن خادم الويب لا يحتاج إلى إعطاء استجابة كاملة إذا لم يتغير Etag. وبالتالي ، يتم تمكين رأس Etag افتراضيًا على Nginx و Apache ، ويتم إنشاء قيم Etag تلقائيًا ، لذلك لا يتعين عليك تحديد أي شيء.

استضافة موقع الويب الخاص بك مع Pressidium

ضمان استرداد الأموال لمدة 60 يومًا

اطلع على خططنا

تنتهي

تم تقديم هذا في HTTP / 1.0 ويحدد تاريخًا محددًا في المستقبل حيث سيتم اعتبار المحتوى قديمًا. إنه تاريخ "الأفضل قبل" للمحتوى. على سبيل المثال ، تنتهي الصلاحية: الخميس ، 25 مايو 2017 ، الساعة 12:30:00 بتوقيت غرينتش

براغما

هذا رأس HTTP / 1.0 قديم إلى حد ما ويستخدم في الغالب للتوافق مع الإصدارات السابقة. إدخال Pragma: no-cache سيجعل متصفحك يتصرف بطريقة مشابهة لـ Cache-Control: no-cache .

كيفية تنفيذ سياسة التخزين المؤقت على موقع الويب الخاص بك

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

اباتشي 2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

كما ترى فإن الأمر بسيط جدًا. في المثال الأول ، نستخدم توجيه FileMatch الخاص بـ apache2 للمطابقة مع مجموعة محددة من أنواع الملفات (.ico ، .pdf ، إلخ) وجعلها عامة ، بحد أقصى يبلغ 84600 ثانية. في الثانية ، نطابق مرة أخرى أنواع ملفات معينة باستخدام توجيه موقع nginx ، ونضمّن حدًا أقصى للعمر يبلغ 365 يومًا. ونعرّفها أيضًا على أنها "عامة" باستخدام عبارة إضافة رأس.

بي أتش بي

إذا كنت ترغب في إضافة رؤوس استجابة مباشرة إلى التعليمات البرمجية الخاصة بك ، فما عليك سوى استخدام أمر رأس PHP.

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

كيفية الاختبار لمعرفة ما إذا كان يعمل

يمكنك بسهولة الاختبار لمعرفة قواعد التخزين المؤقت للمتصفح ، باستخدام ، على سبيل المثال ، وحدة تحكم الويب في Firefox أو أدوات مطوري Chrome:

1. انقر على أيقونة الهامبرغر في أعلى اليمين.
2. حدد المزيد من الأدوات> أدوات المطور
3. أدخل عنوان URL الخاص بك في شريط العناوين واضغط على Enter.

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

هذا يعني أنه تم تحميل المورد تلقائيًا من مخزن التخزين المؤقت المحلي ، بدلاً من طلبه من الخادم.

في الحالات التي يكون لديك فيها عبارة "must-revalidate" على رأس Cache-Control ، سيكون رمز الحالة 304 (غير معدّل). هذا يعني أن متصفحك أعاد التحقق من المصدر مقابل الخادم ، ورد الخادم بأن المحتوى لم يتغير ، وبالتالي يمكن تقديمه من ذاكرة التخزين المؤقت للمتصفح.

تابع لتعطيل ذاكرة التخزين المؤقت عن طريق تحديد خانة الاختيار تعطيل ذاكرة التخزين المؤقت والضغط على إعادة التحميل.

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

استنتاج

يمكن أن تصبح سياسات التخزين المؤقت والتخزين المؤقت للمستعرض معقدة للغاية. لكن البدء في تجربة Cache-Control كما أوضحنا هو أمر بسيط. في معظم الأحيان ، يكون تنفيذ سياسة التخزين المؤقت "العامة" للأصول الثابتة كافيًا لإحداث فرق في أداء موقع الويب الخاص بك. ومع ذلك ، فإنه يضيف طبقة إضافية من "القلق" فوق العديد من الأشياء الأخرى ، ونعتقد أنه لا ينبغي أن يكون كذلك. تابعنا في مقالنا التالي ، حيث سنعرض كيف نقوم بتنفيذ التخزين المؤقت للمتصفح في Pressidium والذي يجعل كل هذا القلق يختفي.