الجلب المُسبَق والعرض المُسبَق والتخزين المُسبَق لعامل الخدمات

في آخر وحدتَين، اكتشفت مفاهيم مثل تأجيل تحميل JavaScript وصور التحميل الكسول وعناصر <iframe>. يؤدي تأجيل تحميل الموارد إلى تقليل استخدام الشبكة ووحدة المعالجة المركزية (CPU) أثناء التحميل الأولي للصفحة من خلال تنزيل الموارد في المرحلة التي تكون هناك حاجة إليها، بدلاً من تحميلها مُسبقًا، حيث قد لا يتم استخدامها. يمكن أن يؤدي ذلك إلى تحسين أوقات التحميل المبدئية للصفحة، ولكن قد تؤدي التفاعلات اللاحقة إلى حدوث تأخير إذا لم يتم تحميل الموارد اللازمة لتشغيلها في وقت حدوثها.

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

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

الجلب المُسبَق للموارد المطلوبة في المستقبل القريب بأولوية منخفضة

من الممكن جلب الموارد بشكل استباقي، بما في ذلك الصور أو أوراق الأنماط أو موارد JavaScript، وذلك باستخدام تلميح مورد <link rel="prefetch">. ويخبر التلميح prefetch المتصفّح بأنّه من المحتمل أن يكون أحد الموارد مطلوبًا في المستقبل القريب.

عند تحديد تلميح prefetch، يمكن للمتصفّح بعد ذلك بدء طلب لهذا المورد عند تحديد أولوية أدنى لتجنُّب التعارض مع الموارد المطلوبة للصفحة الحالية.

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

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

يخبر مقتطف HTML السابق المتصفِّح بأنّه يمكنه جلب date-picker.js وdate-picker.css مسبقًا بعد أن يكون في وضع عدم النشاط. من الممكن أيضًا جلب الموارد مسبقًا بشكل ديناميكي أثناء تفاعل المستخدم مع الصفحة في JavaScript.

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

الجلب المسبق للصفحات لتسريع عمليات الانتقال المستقبلية

من الممكن أيضًا جلب صفحة وكل مواردها الفرعية مسبقًا من خلال تحديد السمة as="document" عند الإشارة إلى مستند HTML:

<link rel="prefetch" href="/page" as="document">

عندما يكون المتصفِّح غير نشِط لفترة قصيرة، قد يبدأ طلبًا بأولوية منخفضة لـ /page.

في المتصفحات المستندة إلى Chromium، يمكنك الجلب المسبق للمستندات باستخدام واجهة برمجة تطبيقات قواعد التوقُّع. وتُعرّف قواعد التوقُّع على أنّها كائن JSON مضمّن في HTML للصفحة، أو تتم إضافته ديناميكيًا من خلال JavaScript:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

يصف عنصر JSON إجراءً واحدًا أو أكثر، ويتم حاليًا دعم prefetch وprerender فقط، بالإضافة إلى قائمة بعناوين URL المرتبطة بهذا الإجراء. في مقتطف HTML السابق، يتم توجيه المتصفّح إلى الجلب المسبق لـ /page-a و/page-b. على غرار <link rel="prefetch">، تشير قواعد التوقُّع إلى أنّ المتصفّح قد يتجاهله في ظل ظروف معيّنة.

تعمل المكتبات مثل Quicklink على تحسين التنقل بين الصفحات من خلال الجلب المُسبَق للروابط أو عرضها مُسبقًا بشكل ديناميكي عند ظهورها ضمن إطار العرض الخاص بالمستخدم. يزيد هذا من احتمالية انتقال المستخدم في النهاية إلى تلك الصفحة—مقارنة بالجلب المسبق لجميع الروابط على الصفحة.

الصفحات المعروضة مُسبقًا

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

تتوفّر ميزة "العرض المُسبَق" من خلال واجهة برمجة التطبيقات Speculation Rules API:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>

الجلب المُسبَق والعروض التوضيحية للعرض المُسبَق

التخزين المؤقت لعامل الخدمة

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

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

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

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

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

الرمز السابق هو مثال على ملف البيان الذي يتضمّن ملفَّين: script.ffaa4455.js و/index.html. إذا كان المورد يحتوي على معلومات الإصدار في الملف نفسه (تُعرف باسم تجزئة الملف)، يمكن ترك السمة revision على أنّها null، لأنّه سبق وتم تحديد إصدارات للملف (على سبيل المثال، لمورد script.ffaa4455.js في الرمز السابق).ffaa4455 بالنسبة للموارد التي لم يتم إصدار نسخة منها، يمكن إنشاء مراجعة لها في وقت الإنشاء.

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

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

على سبيل المثال، في صفحة بيانات منتج التجارة الإلكترونية، يمكن استخدام عامل خدمة لتخزين CSS وJavaScript المطلوبة مؤقتًا لعرض صفحة تفاصيل المنتج، ما يجعل التنقل إلى صفحة تفاصيل المنتج أسرع بكثير. في المثال السابق، يتم تخزين product-page.ac29.css وproduct-page.39a1.js بشكل مسبق. إنّ طريقة precacheAndRoute المتوفّرة في workbox-precaching تسجِّل تلقائيًا المعالجات اللازمة لضمان جلب الموارد المخزّنة مؤقتًا من واجهة برمجة تطبيقات مشغّل الخدمات متى لزم الأمر.

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

اختبِر معلوماتك

ما هي الأولوية التي يظهر فيها التلميح prefetch؟

مرتفع.
يُرجى إعادة المحاولة.
متوسط.
يُرجى إعادة المحاولة.
منخفض.
إجابة صحيحة

ما الفرق بين الجلب المُسبَق والعرض المسبق للصفحة؟

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

ذاكرة التخزين المؤقت لعامل الخدمة هي نفسها ذاكرة التخزين المؤقت لبروتوكول HTTP.

صحيح
يُرجى إعادة المحاولة.
خطأ
إجابة صحيحة

المقالة التالية: نظرة عامة على عمال الويب

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

بعد ذلك، نقدّم نظرة عامة على العاملين على الويب، وكيف يمكنهم التخلص من العمل المكلّف من سلسلة التعليمات الرئيسية ومنح سلسلة التعليمات الرئيسية مساحة أكبر لتفاعلات المستخدمين. إذا تساءلت يومًا ما الذي يمكنك القيام به لمنح السلسلة الرئيسية مساحة أكبر، فإن الوحدتين التاليتين تستحقان وقتك!