تصحيح أخطاء قواعد التخمين

Barry Pollard

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

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

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

شرح مصطلحات "ما قبل"

هناك الكثير من مصطلحات "ما قبل" التي يسهل الخلط بينها، لذلك لنبدأ بشرح لما يلي:

• الجلب المسبق: جلب مورد أو مستند مسبقًا لتحسين الأداء في المستقبل. تتناول هذه المشاركة مستندات الجلب المُسبَق باستخدام واجهة برمجة تطبيقات Speculation Rules API، بدلاً من استخدام خيار <link rel="prefetch"> القديم المشابه والذي يُستخدَم غالبًا في الجلب المُسبَق للموارد الفرعية.
• العرض المُسبَق: يتجاوز هذا الإجراء الجلب المسبق ويعرض الصفحة بأكملها كما لو كان المستخدم قد انتقل إليها، ولكنه يبقيها في عملية عارض في الخلفية مخفية للاستخدام إذا كان المستخدم ينتقل إليها بالفعل. مرة أخرى، يتناول هذا المستند الإصدار الأحدث من Speculation Rules API هذا بدلاً من خيار <link rel="prerender"> الأقدم (الذي لم يعُد يعرض بشكل مسبق كامل).
• توقّعات التنقّل: المصطلح المجمّع لخيارات الجلب المُسبَق والعرض المُسبَق الجديدة التي تنشأ عن قواعد التوقُّع.
• التحميل المسبق: هو مصطلح يشير إلى عدد من التكنولوجيات والعمليات، بما في ذلك <link rel="preload"> وأداة فحص التحميل المسبق وعمليات التحميل المسبق للتنقّل بين مشغّلي الخدمات. لن يتم تناول هذه العناصر هنا، ولكن يتم تضمين العبارة للتمييز بوضوح عن تلك العناصر عن مصطلح "التنبؤات التنقلية".

قواعد التوقُّع للحساب prefetch

يمكن استخدام قواعد التوقُّع للجلب المُسبَق لمستند التنقُّل التالي. على سبيل المثال، عند إدراج ملف JSON التالي في صفحة، سيتم جلب next.html وnext2.html مسبقًا:

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

يتميّز استخدام قواعد التوقّع للجلب المُسبَق للتنقّل ببعض المزايا عن بنية <link rel="prefetch"> القديمة، مثل واجهة برمجة تطبيقات أكثر تعبيرًا والنتائج التي يتم تخزينها في ذاكرة التخزين المؤقت للذاكرة بدلاً من ذاكرة التخزين المؤقت لقرص HTTP.

تصحيح أخطاء prefetch قاعدة توقُّع

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

الطلبان المظلان باللون الأحمر هما الموارد التي تم جلبها مسبقًا، كما يظهر في عمود النوع. يتم جلب هذه العناصر بأولوية Lowest كما هي لعمليات التنقل المستقبلية، ويعطي Chrome الأولوية لموارد الصفحة الحالية.

يؤدي النقر على أحد الصفوف أيضًا إلى عرض عنوان HTTP Sec-Purpose: prefetch، الذي يوضّح الطريقة التي يمكن من خلالها تحديد هذه الطلبات من جهة الخادم:

تصحيح أخطاء prefetch باستخدام علامات تبويب "التحميل المبني على توقُّع"

تمت إضافة قسم جديد بعنوان عمليات التحميل المبني على توقُّع في لوحة التطبيق ضمن "أدوات مطوري البرامج في Chrome" ضمن قسم خدمات الخلفية، للمساعدة في تصحيح أخطاء قواعد التوقُّع:

تتوفّر ثلاث علامات تبويب في هذا القسم:

• عمليات التحميل المبني على توقُّع التي تسرد الحالة المعروضة مُسبقًا للصفحة الحالية.
• القواعد التي تسرد جميع مجموعات القواعد الموجودة في الصفحة الحالية.
• توقُّعات التي تسرد كل عناوين URL التي تم جلبها مسبقًا وعرضها مُسبقًا من مجموعات القواعد.

تظهر علامة تبويب توقُّعات في لقطة الشاشة السابقة، ويمكننا أن نرى أنّ نموذج الصفحة هذا يحتوي على مجموعة واحدة من قواعد التوقُّع للجلب المُسبَق لـ 3 صفحات. نجح عمليتان من عمليات الجلب المُسبَق هذه وتعذّرت عملية واحدة. يمكن النقر على الرمز بجانب مجموعة القواعد لنقلك إلى مصدر مجموعة القواعد في لوحة العناصر. وبدلاً من ذلك، يمكن النقر على رابط الحالة للانتقال إلى علامة التبويب التوقعات التي تمت تصفيتها إلى مجموعة القواعد تلك.

تسرد علامة التبويب توقُّعات جميع عناوين URL المستهدَفة، بالإضافة إلى الإجراء (الجلب المُسبَق أو العرض المُسبَق)، ومجموعة القواعد التي جاءت منها (حيث قد يكون هناك العديد من عناوين 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="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

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

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

تصحيح أخطاء prerender باستخدام علامات تبويب "عمليات التحميل المبني على توقُّع"

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

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

في الإصدار 121 من Chrome، أطلقنا إتاحة قواعد المستندات. ويتيح ذلك للمتصفّح اختيار هذه العناوين من روابط المصدر نفسها في الصفحة، بدلاً من إدراج مجموعة محدّدة من عناوين URL:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

يختار هذا المثال كل روابط المصادر نفسها، باستثناء تلك التي تبدأ بـ /not-safe-to-prerender كروابط عرض مُسبَقة.

ويؤدي أيضًا إلى ضبط العرض المُسبَق eagerness على moderate، ما يعني أنّه يتم عرض عمليات التنقّل مسبقًا عند التمرير فوق الرابط أو النقر عليه.

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

تكون الحالة لم يتم التشغيل لأنّ عملية العرض المُسبَق لم تبدأ بعد. ومع ذلك، عندما نمرِّر مؤشر الماوس فوق الروابط، نلاحظ تغيير الحالة لأنّه يتم عرض كل عنوان URL مسبقًا:

وضع Chrome حدودًا لعمليات العرض المُسبَق، بما في ذلك عرضان مُسبَقان بحد أقصى لعرض moderate بسرعة، لذا بعد تمرير مؤشر الماوس فوق الرابط الثالث، نلاحظ سبب تعذُّر عرض عنوان URL هذا:

تصحيح أخطاء prerender باستخدام لوحات "أدوات مطوري البرامج" الأخرى

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

مع ذلك، أصبح من الممكن الآن تبديل العارض الذي تستخدمه لوحات "أدوات مطوّري البرامج" من خلال القائمة المنسدلة في أعلى يسار اللوحة، أو من خلال اختيار عنوان URL في الجزء العلوي من اللوحة واختيار فحص:

تتم مشاركة هذه القائمة المنسدلة (والقيمة المحدّدة) مع كل اللوحات الأخرى أيضًا، مثل لوحة الشبكة، حيث يمكنك معرفة أن الصفحة المطلوبة هي الصفحة المعروضة مُسبقًا:

بعد الاطّلاع على عناوين HTTP لهذه الموارد، سيتبيّن لنا أنّه سيتم ضبطها جميعًا باستخدام عنوان Sec-Purpose: prefetch;prerender:

بدلاً من ذلك، لوحة العناصر التي يمكنك الاطّلاع فيها على محتوى الصفحة، كما هو الحال في لقطة الشاشة التالية التي يظهر فيها العنصر <h1> للصفحة المعروضة مُسبقًا:

أو لوحة وحدة التحكم، حيث يمكنك الاطّلاع على سجلّات وحدة التحكّم الصادرة من الصفحة المعروضة مُسبقًا:

تصحيح أخطاء قواعد التوقُّع في الصفحة المعروضة مُسبقًا

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

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

بالإضافة إلى ذلك، كما هو الحال مع عمليات الجلب المُسبَق، سيحاول الانتقال من صفحة تتضمّن قواعد توقُّع لا تتطابق مع الصفحة الحالية توضيح سبب عدم تطابق عناوين URL مع العناوين المُشار إليها في قواعد التوقُّع للصفحة السابقة ضمن علامة التبويب عمليات التحميل المبني على توقُّع:

الخلاصة

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

شكر وتقدير

صورة صورة واحدة من تصميم نوبيلسون فيرنانديز على قناة Unلمحة