اعرف المزيد عن الجلب المسبق التنبؤي وكيفية تنفيذه من قِبل Guess.js.
خلال جلسة التنقل السريع على الويب باستخدام الجلب المسبق التنبؤي في مؤتمر Google I/O لعام 2019، بدأت بالحديث عن تحسين تطبيقات الويب من خلال تقسيم الرموز والآثار المحتملة على الأداء في ما يتعلق بالتنقل لاحقًا في الصفحة. في الجزء الثاني من المحادثة، ناقشتُ كيفية تحسين سرعة التنقل باستخدام Guess.js لإعداد الجلب المسبق التنبؤي:
تقسيم الرموز لتطبيقات الويب الأسرع
تتسم تطبيقات الويب بالبطء، وJavaScript من بين الموارد الأكثر تكلفة التي تشحنها. يمكن أن يؤدي انتظار تحميل تطبيق ويب بطيء إلى شعور المستخدمين بالاستياء وانخفاض الإحالات الناجحة.
طريقة "التحميل الكسول" هي أسلوب فعّال لتقليل وحدات بايت JavaScript التي تنقلها عبر السلك. يمكنك استخدام أساليب متعددة لتحميل JavaScript باستخدام طريقة \"التحميل الكسول\"، بما في ذلك:
- تقسيم الرمز على مستوى المكون
- تقسيم الرمز على مستوى المسار
من خلال تقسيم التعليمة البرمجية على مستوى المكون، يمكنك نقل المكونات الفردية إلى مقاطع JavaScript منفصلة. وفي أحداث معينة، يمكنك تحميل النصوص البرمجية ذات الصلة وعرض المكوّنات.
مع ذلك، عند تقسيم الرمز على مستوى المسار، يمكنك نقل المسارات بالكامل إلى أجزاء مستقلة. عندما ينتقل المستخدمون من مسار إلى آخر، يجب عليهم تنزيل JavaScript المرتبط وتمهيد الصفحة المطلوبة. وقد تؤدي هذه العمليات إلى تأخيرات كبيرة، خاصةً على الشبكات البطيئة.
الجلب المسبق لـ JavaScript
يسمح الجلب المسبق للمتصفح بتنزيل الموارد التي من المحتمل أن يحتاج المستخدم إليها قريبًا، وتخزينها مؤقتًا. الطريقة المعتادة هي استخدام السمة <link rel="prefetch">، ولكن هناك خطأان شائعان:
- ويستهلك الجلب المُسبَق لعدد كبير جدًا من الموارد (الجلب الزائد) الكثير من البيانات.
- قد لا يتم جلب بعض الموارد التي يحتاجها المستخدم بشكل مسبق مطلقًا.
يحل الجلب المسبق التنبؤي هذه المشكلات من خلال استخدام تقرير لأنماط التنقل عند المستخدمين لتحديد مواد العرض التي ينبغي جلبها مسبقًا.
الجلب المسبق التنبؤي باستخدام Guess.js
Guess.js عبارة عن مكتبة JavaScript توفر وظيفة الجلب المسبق التنبؤية. يستخدم Guess.js تقريرًا من "إحصاءات Google" أو مقدّم خدمة إحصاءات آخر لإنشاء نموذج تنبؤي يمكن استخدامه لجلب ما من المرجَّح أن يحتاجه المستخدم فقط بذكاء.
يتضمّن Guess.js عمليات دمج مع Angular وNext.js وNuxt.js وGatsby. لاستخدامه في تطبيقك، أضِف هذه الأسطر إلى إعداد حزمة الويب لتحديد رقم تعريف ملف شخصي في "إحصاءات Google":
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
إذا كنت لا تستخدم "إحصاءات Google"، يمكنك تحديد reportProvider وتنزيل البيانات من خدمتك المفضّلة.
التكامل مع أطر العمل
لمعرفة المزيد حول كيفية دمج Guess.js مع إطار العمل المفضل لديك، اطلع على هذه الموارد:
للحصول على جولة تفصيلية حول الدمج مع Angular، شاهد هذا الفيديو:
ما هي آلية عمل Guess.js؟
وفي ما يلي كيفية تنفيذ Guess.js الجلب المسبق التنبؤي:
- ويتم أولاً استخلاص البيانات لأنماط تنقل المستخدم من مقدم التحليلات المفضل لديك.
- ثم يعيّن عناوين URL من التقرير إلى مقاطع JavaScript التي تم إنشاؤها بواسطة حزمة الويب.
- استنادًا إلى البيانات المستخرجة، يتم إنشاء نموذج تنبؤي بسيط للصفحات التي من المرجح أن ينتقل المستخدم إليها من أي صفحة معيّنة.
- يستدعي النموذج لكل مقطع من مقاطع JavaScript، للتنبؤ بالمقاطع الأخرى التي يُحتمل أن تكون مطلوبة بعد ذلك.
- وتضيف تعليمات الجلب المسبق إلى كل مقطع.
عند الانتهاء من Guess.js، سيحتوي كل مقطع على إرشادات الجلب المسبق تشبه ما يلي:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
يطلب الرمز الذي تم إنشاؤه من خلال Guess.js من المتصفِّح مراعاة الجلب المُسبَق للمقطع a.js مع الاحتمالية 0.2 والمقطع b.js مع الاحتمالية 0.8.
وبمجرد أن ينفذ المتصفح الرمز، سيتحقق Guess.js من سرعة اتصال المستخدم. وإذا كان ذلك كافيًا، سيدرج Guess.js علامتا <link rel="prefetch"> في عنوان الصفحة، علامة واحدة لكل مقطع. إذا كان المستخدم على شبكة عالية السرعة، سيجلب Guess.js كلا المقطعين مسبقًا. إذا كان اتصال المستخدم بالشبكة ضعيفًا، سيجلب Guess.js المقطع b.js مسبقًا فقط لأنّه من المرجّح أن يكون مطلوبًا.
مزيد من المعلومات
لمعرفة المزيد حول Guess.js، اطلع على هذه الموارد: