يمكن استخدام قواعد التوقّع لجلب صفحات التنقّل التالية وعرضها مسبقًا كما هو موضّح بالتفصيل في المنشور السابق. ويمكن أن يتيح ذلك تحميل الصفحات بشكل أسرع أو حتى فوري، ما يؤدي إلى تحسين مؤشرات أداء الويب الأساسية بشكل كبير لعمليات التنقّل الإضافية هذه في الصفحة.
قد يكون تصحيح أخطاء قواعد التوقّع أمرًا صعبًا. وينطبق ذلك بشكل خاص على الصفحات المعروضة مُسبقًا، لأنّها تُعرض في أداة عرض منفصلة، مثل علامة تبويب مخفية في الخلفية تحلّ محل علامة التبويب الحالية عند تفعيلها. لذلك، لا يمكن دائمًا استخدام خيارات "أدوات مطوّري البرامج" المعتادة لتصحيح الأخطاء.
يعمل فريق Chrome جاهدًا على تحسين دعم "أدوات مطوّري البرامج في Chrome" لتصحيح أخطاء قواعد التوقّع. في هذه المقالة، سنعرض جميع الطرق المختلفة لاستخدام هذه الأدوات من أجل فهم قواعد التخمين في الصفحة، وسبب عدم عملها، والحالات التي يمكن فيها للمطوّرين استخدام خيارات "أدوات مطوري البرامج" المألوفة والحالات التي لا يمكنهم فيها استخدامها.
شرح المصطلحات التي تبدأ بـ "ما قبل"
هناك الكثير من المصطلحات التي تبدأ بـ "ما قبل" والتي قد تكون مربكة، لذا سنبدأ بشرحها:
- الجلب المُسبق: جلب مورد أو مستند مسبقًا لتحسين الأداء في المستقبل. يتناول هذا المنشور الجلب المُسبَق للمستندات باستخدام Speculation Rules API، بدلاً من خيار
<link rel="prefetch">المشابه ولكن الأقدم والذي غالبًا ما يُستخدم للجلب المُسبَق للموارد الفرعية. - العرض المُسبَق: يتجاوز هذا الإجراء الجلب المُسبَق ويعرض الصفحة بأكملها كما لو كان المستخدم قد انتقل إليها، ولكنّه يحتفظ بها في عملية عرض مخفية في الخلفية جاهزة للاستخدام إذا انتقل المستخدم إليها فعليًا. نركّز في هذا المستند على الإصدار الأحدث من Speculation Rules API، وليس على الخيار
<link rel="prerender">القديم (الذي لم يعُد يتيح العرض المُسبق الكامل). - عمليات التنقّل التخمينية: هي المصطلح الجماعي لخيارات الجلب المسبق والعرض المسبق الجديدة التي يتم تفعيلها من خلال قواعد التخمين.
- التحميل المُسبق: مصطلح مثقل يمكن أن يشير إلى عدد من التقنيات والعمليات، بما في ذلك
<link rel="preload">والماسح الضوئي للتحميل المُسبق وعمليات التحميل المُسبق للتنقّل في مشغّل الخدمات. لن نتناول هذه العناصر هنا، ولكن تم تضمين المصطلح للتمييز بوضوح بينها وبين مصطلح "عمليات التنقّل التخمينية".
قواعد التوقُّع لـ prefetch
يمكن استخدام قواعد التوقّع لجلب مستند التنقّل التالي مسبقًا. على سبيل المثال، عند إدراج ملف JSON التالي في صفحة، سيتم جلب next.html وnext2.html مسبقًا:
<script type="speculationr>ules"
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
إنّ استخدام قواعد التخمين للجلب المُسبَق لعمليات التنقّل له بعض المزايا مقارنةً بصيغة <link rel="prefetch"> القديمة، مثل واجهة برمجة تطبيقات أكثر تعبيرًا وتخزين النتائج في ذاكرة التخزين المؤقت بدلاً من ذاكرة التخزين المؤقت للقرص HTTP.
تصحيح أخطاء قواعد التوقّع في prefetch
يمكن الاطّلاع على عمليات الجلب المُسبَق التي يتم تشغيلها من خلال قواعد التوقُّع في لوحة الشبكة بالطريقة نفسها التي يتم بها الاطّلاع على عمليات الجلب الأخرى:
الطلبان المميّزان باللون الأحمر هما الموارد التي تم جلبها مسبقًا، كما يظهر في عمود النوع. يتم جلب هذه الموارد بأولوية Lowest لأنّها مخصّصة لعمليات التنقّل المستقبلية، ويمنح Chrome الأولوية لموارد الصفحة الحالية.
يؤدي النقر على أحد الصفوف أيضًا إلى عرض عنوان HTTP Sec-Purpose: prefetch، وهو الطريقة التي يمكن من خلالها تحديد هذه الطلبات من جهة الخادم:
تصحيح أخطاء prefetch باستخدام علامات التبويب "التحميل المبني على توقُّع"
تمت إضافة قسم جديد باسم تحميل مبني على توقّع في لوحة التطبيق ضمن "أدوات مطوري البرامج في Chrome"، ضمن قسم خدمة تُشغَّل في الخلفية، للمساعدة في تصحيح أخطاء قواعد التخمين:
تتوفّر ثلاث علامات تبويب في هذا القسم:
- عمليات التحميل المبنية على توقُّع التي تعرض حالة العرض المُسبق للصفحة الحالية
- القواعد: تعرض جميع مجموعات القواعد التي تم العثور عليها في الصفحة الحالية، والتي تم تحديدها كعناوين URL أو علامات قواعد، إن توفّرت.
- التخمينات التي تعرض جميع عناوين URL التي تم جلبها مسبقًا وعرضها مسبقًا من مجموعات القواعد
تظهر علامة التبويب التوقّعات في لقطة الشاشة السابقة، ويمكننا أن نرى أنّ صفحة المثال هذه تحتوي على مجموعة واحدة من قواعد التوقّع لجلب 3 صفحات مسبقًا. نجحت عمليتا جلب مسبق وتعذّرت عملية واحدة. يمكن النقر على الرمز بجانب مجموعة القواعد للانتقال إلى مصدر مجموعة القواعد في لوحة العناصر. بدلاً من ذلك، يمكن النقر على رابط الحالة للانتقال إلى علامة التبويب التوقّعات التي تمت فلترتها وفقًا لمجموعة القواعد هذه.
تعرض علامة التبويب التخمينات جميع عناوين URL المستهدَفة، بالإضافة إلى الإجراء (الجلب المُسبق أو العرض المُسبق)، ومجموعة القواعد التي تم استخلاصها منها (قد تكون هناك مجموعات متعددة في الصفحة)، وحالة كل تخمين:
أعلى عناوين URL، يمكن استخدام قائمة منسدلة لعرض عناوين URL من جميع مجموعات القواعد، أو عناوين URL من مجموعة قواعد معيّنة فقط. وأسفل ذلك، يتم إدراج جميع عناوين URL. يؤدي النقر على عنوان URL إلى عرض معلومات أكثر تفصيلاً.
في لقطة الشاشة هذه، يمكننا رؤية سبب تعذُّر جلب الصفحة next3.html (غير المتوفّرة، وبالتالي تعرض رمز الحالة 404، وهو رمز حالة HTTP ليس من فئة 2xx).
تعرض علامة التبويب "الملخّص"، عمليات التحميل المبني على توقُّع، تقريرًا بعنوان حالة تحميل هذه الصفحة المبني على توقُّع لتوضيح ما إذا تم استخدام الجلب المُسبق أو العرض المُسبق لهذه الصفحة أم لا.
بالنسبة إلى صفحة تم جلبها مُسبقًا، من المفترض أن تظهر لك رسالة نجاح عند الانتقال إلى تلك الصفحة:
توقُّعات غير مطابقة
عندما يتم الانتقال من صفحة تتضمّن قواعد توقّع لا تؤدي إلى استخدام الجلب المُسبَق أو العرض المُسبَق، سيعرض قسم إضافي من علامة التبويب المزيد من التفاصيل حول سبب عدم تطابق عنوان URL مع أي من عناوين URL الخاصة بالتوقّع، ما يساعد في رصد الأخطاء الإملائية في قواعد التوقّع.
على سبيل المثال، انتقلنا هنا إلى next4.html، ولكن تم جلب next.html أو next2.html أو next3.html فقط بشكل مسبق، لذا يمكننا أن نرى أنّ هذا لا يتطابق تمامًا مع أي من هذه القواعد الثلاث.
تُعدّ علامات التبويب عمليات التحميل التخمينية مفيدة جدًا لتصحيح أخطاء قواعد التخمين نفسها والعثور على أي أخطاء في بنية JSON.
بالنسبة إلى عمليات الجلب المُسبَق نفسها، من المرجّح أن تكون لوحة الشبكة مكانًا مألوفًا أكثر. في مثال تعذُّر الجلب المُسبق، يمكنك الاطّلاع على الخطأ 404 للجلب المُسبق هنا:
ومع ذلك، تصبح علامات التبويب عمليات التحميل المبني على توقُّع أكثر فائدة لقواعد التوقُّع للعرض المُسبَق، والتي سنتناولها بعد ذلك.
قواعد التوقُّع لـ prerender
تتّبع قواعد التوقّع للعرض المُسبَق البنية نفسها التي تتّبعها قواعد التوقّع للجلب المُسبَق. على سبيل المثال:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
تؤدي مجموعة القواعد هذه إلى تحميل الصفحات المحدّدة وعرضها بالكامل (مع مراعاة قيود معيّنة). يمكن أن يوفّر ذلك تجربة تحميل فورية، ولكن مع تكاليف موارد إضافية.
على عكس عمليات الجلب المُسبَق، لا يمكن الاطّلاع على هذه العمليات في لوحة الشبكة، لأنّه يتم جلبها وعرضها في عملية عرض منفصلة في Chrome. وهذا يجعل علامات التبويب تحميل مبني على توقّع أكثر أهمية لتصحيح أخطاء قواعد التخمين للعرض المُسبَق.
تصحيح أخطاء prerender باستخدام علامات التبويب "عمليات التحميل المبني على توقُّع"
يمكن استخدام شاشات تحميل مبني على توقّع نفسها لقواعد العرض المُسبَق، كما هو موضّح في صفحة تجريبية مشابهة تحاول عرض الصفحات الثلاث مسبقًا بدلاً من جلبها مسبقًا:
نرى هنا مرة أخرى أنّ أحد عناوين URL الثلاثة تعذّر عرضه مسبقًا، ويمكن للمطوّرين الحصول على التفاصيل لكل عنوان URL في علامة التبويب التخمينات من خلال النقر على الرابط 2 جاهز، 1 تعذّر.
في الإصدار 121 من Chrome، أطلقنا ميزة "قواعد المستندات". يتيح ذلك للمتصفّح الحصول على هذه الروابط من روابط المصدر نفسه على الصفحة، بدلاً من إدراج مجموعة محدّدة من عناوين URL:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_match<es">;: "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
/script
يختار هذا المثال جميع الروابط من المصدر نفسه، باستثناء تلك التي تبدأ بـ /not-safe-to-prerender كمرشّحة للعرض المُسبَق.
ويضبط أيضًا السمة prerender eagerness على moderate، ما يعني أنّه يتم عرض الصفحات مسبقًا عند تمرير مؤشر الماوس فوق الرابط (على الكمبيوتر المكتبي) أو استنادًا إلى إطار العرض (على الأجهزة الجوّالة) أو عند النقر عليه.
هناك قواعد مشابهة لهذه القواعد على الموقع الإلكتروني التجريبي لقواعد التوقّع، ويؤدي استخدام قسم عمليات التحميل المبني على توقّع الجديد على هذا الموقع الإلكتروني إلى إظهار مدى فائدة علامة التبويب الجديدة هذه، حيث يتم إدراج جميع عناوين URL المؤهَّلة التي عثر عليها المتصفّح في الصفحة:
تكون الحالة لم يتم تفعيلها لأنّ عملية العرض المُسبَق لهذه الصفحات لم تبدأ. ومع ذلك، عندما نمرّر المؤشر فوق الروابط، نرى الحالة تتغيّر مع عرض كل عنوان URL مسبقًا:
يضع Chrome حدودًا على عمليات العرض المُسبَق، بما في ذلك حدّ أقصى يبلغ عمليتَي عرض مُسبَق لمستوى الرغبة moderate، لذا بعد تمرير مؤشر الماوس فوق الرابط الثالث، يظهر سبب تعذُّر عرض عنوان URL هذا:
تصحيح أخطاء prerender باستخدام لوحات "أدوات مطوّري البرامج" الأخرى
على عكس عمليات الجلب المُسبَق، لن تظهر الصفحات التي تم عرضها مسبقًا في عمليات العرض الحالية في لوحات "أدوات مطوري البرامج"، مثل لوحة الشبكة، لأنّها تُعرض في محرّك العرض الخاص بها في الخلفية.
ومع ذلك، أصبح من الممكن الآن تبديل المعالج الذي تستخدمه لوحات "أدوات مطوّري البرامج" من خلال القائمة المنسدلة في أعلى يسار الصفحة، أو من خلال اختيار عنوان URL في الجزء العلوي من اللوحة واختيار فحص:
تتم مشاركة هذه القائمة المنسدلة (والقيمة المحدّدة) في جميع اللوحات الأخرى أيضًا، مثل لوحة الشبكة، حيث يمكنك الاطّلاع على الصفحة التي يتم طلبها وهي الصفحة التي تم عرضها مسبقًا:
عند الاطّلاع على عناوين HTTP لهذه الموارد، يمكننا ملاحظة أنّه سيتم ضبطها جميعًا باستخدام العنوان Sec-Purpose: prefetch;prerender:
أو لوحة العناصر التي يمكنك من خلالها الاطّلاع على محتوى الصفحة، كما هو موضّح في لقطة الشاشة التالية حيث يظهر العنصر <h1> للصفحة التي تم عرضها مسبقًا:
أو لوحة وحدة التحكّم، حيث يمكنك الاطّلاع على سجلّات وحدة التحكّم التي تصدرها الصفحة التي تم عرضها مسبقًا:
تصحيح أخطاء قواعد التوقّع في الصفحة المعروضة مُسبقًا
تتناول الأقسام السابقة كيفية تصحيح أخطاء الصفحات المعروضة مُسبقًا على الصفحة التي تبدأ العرض المُسبق. ومع ذلك، يمكن أيضًا للصفحات التي تم عرضها مسبقًا تقديم معلومات تصحيح الأخطاء، إما من خلال إجراء طلبات تحليلية أو تسجيل الدخول إلى وحدة التحكّم (التي يمكن عرضها كما هو موضّح في القسم السابق).
بالإضافة إلى ذلك، بعد أن يفعّل المستخدم صفحة تم عرضها مسبقًا من خلال الانتقال إليها، ستعرض علامة التبويب عمليات التحميل المبني على التوقّع هذه الحالة، وما إذا تم عرضها مسبقًا بنجاح أم لا. وإذا تعذّر العرض المُسبَق، يتم تقديم تفسير للسبب:
بالإضافة إلى ذلك، كما هو الحال في عمليات الجلب المُسبَق، سيحاول التنقّل من صفحة تتضمّن قواعد توقُّع لا تتطابق مع الصفحة الحالية أن يعرض لك سبب عدم تطابق عناوين URL مع تلك التي تشملها قواعد التوقُّع في الصفحة السابقة في علامة التبويب عمليات التحميل المبنية على توقُّع:
الخاتمة
في هذه المقالة، عرضنا الطرق المختلفة التي يمكن للمطوّرين من خلالها تصحيح أخطاء قواعد التوقّع الخاصة بالجلب والعرض المُسبقَين. يواصل الفريق العمل على أدوات لقواعد التخمين، ونودّ سماع اقتراحات من المطوّرين حول الطرق الأخرى التي قد تكون مفيدة لتصحيح أخطاء واجهة برمجة التطبيقات الجديدة والمثيرة هذه. ننصح المطوّرين بالإبلاغ عن أي مشاكل أو أخطاء أو طلبات ميزات من خلال أداة تتبُّع المشاكل في Chrome.
الإقرارات
الصورة المصغّرة من تصميم نوبلسون فرنانديز على Unsplash.