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

في الوحدتين الأخيرتين، اكتشفت مفاهيم مثل تأجيل تحميل 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 عمليات التنقل في الصفحات ديناميكيًا روابط الجلب المسبق أو العرض المسبق للصفحات عند ظهورها في إطار عرض المستخدم. ويؤدي هذا إلى زيادة احتمالية أن يكون المستخدم في النهاية الانتقال إلى هذه الصفحة—مقارنة بالجلب المسبق لجميع الروابط على الصفحة.

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

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

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

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

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

الإعداد المسبق لعامل الخدمة

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

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

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

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

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

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

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

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.

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

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

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

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