هناك طريقتان للجلب المسبق: العلامات <link> وعناوين HTTP

Demián Renzulli
Demián Renzulli
X GitHub

في هذا الدرس التطبيقي حول الترميز، ستنفّذ عملية الجلب المسبق بطريقتَين: باستخدام <link rel="prefetch"> وباستخدام عنوان HTTP Link.

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

قياس الأداء

حدِّد أولاً الأداء الأساسي:

  1. اضغط على Control+Shift+J (أو Command+Option+J على أجهزة Mac) لفتح "أدوات مطوّلي البرامج".

  2. انقر على علامة التبويب الشبكة.

  3. في القائمة المنسدلة الحدّ من السرعة، اختَر الجيل الثالث السريع لمحاكاة نوع اتصال بطيء.

  4. لتحميل صفحة المنتج، انقر على الشراء الآن في التطبيق التجريبي.

يستغرق تحميل الصفحة product-details.html حوالي 600 ملي ثانية:

لوحة الشبكة التي تعرض أوقات تحميل product-details.html

التحميل المُسبَق لصفحة المنتج باستخدام <link rel="prefetch">

لتحسين التنقّل، أدرِج علامة prefetch في الصفحة المقصودة لجلب صفحة product-details.html مسبقًا:

  • أضِف عنصر <link> التالي إلى رأس ملف views/index.html:
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

السمة as اختيارية ولكن يُنصح باستخدامها، فهي تساعد المتصفّح في ضبط العناوين الصحيحة وتحديد ما إذا كان المرجع متوفّرًا في ذاكرة التخزين المؤقت. تشمل القيم النموذجية لهذه السمة ما يلي: document وscript وstyle وfont وimage وغير ذلك.

للتأكّد من أنّ ميزة "الجلب المسبق" تعمل، اتّبِع الخطوات التالية:

  1. اضغط على Control+Shift+J (أو Command+Option+J على أجهزة Mac) لفتح "أدوات مطوّلي البرامج".

  2. انقر على علامة التبويب الشبكة.

  3. في القائمة المنسدلة الحدّ من السرعة، اختَر الجيل الثالث السريع لمحاكاة نوع اتصال بطيء.

  4. أزِل العلامة من مربّع الاختيار "إيقاف ذاكرة التخزين المؤقت".

  5. أعِد تحميل التطبيق.

عند تحميل الصفحة المقصودة، يتم تحميل الصفحة product-details.html أيضًا، ولكن بأقل أولوية:

لوحة الشبكة تعرض عملية جلب مسبق لملف product-details.html.

يتم الاحتفاظ بالصفحة في ذاكرة تخزين مؤقت HTTP لمدة خمس دقائق، وبعد ذلك يتم تطبيق قواعد Cache-Control العادية على المستند. في هذه الحالة، يحتوي product-details.html على عنوان cache-control بقيمة public, max-age=0، ما يعني أنّه سيتم الاحتفاظ بالصفحة لمدة خمس دقائق إجمالاً.

إعادة تقييم الأداء

  1. أعِد تحميل التطبيق.
  2. لتحميل صفحة المنتج، انقر على الشراء الآن في التطبيق التجريبي.

اطّلِع على اللوحة الشبكة. هناك اختلافان مقارنةً بتتبُّع الشبكة الأوّلي:

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

يمثّل ذلك انخفاضًا بنسبة% 98 تقريبًا مقارنةً بالإصدار السابق الذي استغرق حوالي 600 ملي ثانية.

لوحة الشبكة تعرض ملف product-details.html الذي تم استرداده من ذاكرة التخزين المؤقت التي تم جلبها مسبقًا.

ميزة إضافية: استخدام prefetch كتحسين تدريجي

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

لتنفيذ ميزة "الجلب المسبق التكيّفي"، عليك أولاً إزالة العلامة <link rel="prefetch"> من views/index.html:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

بعد ذلك، أضِف الرمز التالي إلى public/script.js لتعريف دالة تُدرِج العلامة prefetch بشكلٍ ديناميكي عندما يكون المستخدم متصلاً بشبكة سريعة:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

تعمل الدالة على النحو التالي:

  • يتحقّق من السمة effectiveType في Network Information API لتحديد ما إذا كان المستخدم متصلاً بشبكة الجيل الرابع (أو أسرع).
  • في حال استيفاء هذا الشرط، يتم إنشاء علامة <link> مع تحديد prefetch كنوع التلميح، ويتم تمرير عنوان URL الذي سيتم جلب بياناته مسبقًا في السمة href، ويتم الإشارة إلى أنّ المورد هو document بتنسيق HTML في السمة as.
  • أخيرًا، يتم إدخال النص البرمجي بشكل ديناميكي في head الصفحة.

بعد ذلك، أضِف script.js إلى views/index.html، قبل علامة الإغلاق </body> مباشرةً:

<body>
      ...
      <script src="/script.js"></script>
</body>

يضمن طلب script.js في نهاية الصفحة أنّه سيتم تحميله وتنفيذه بعد تحليل الصفحة وتحميلها.

للتأكّد من أنّ الجلب المسبق لا يتعارض مع الموارد المهمة للصفحة الحالية، أضِف مقتطف الرمز التالي لاستدعاء injectLinkPrefetchIn4g() في الحدث window.load:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

تتضمّن الصفحة المقصودة الآن ميزة الجلب المسبق product-details.html فقط عند الاتصال بشبكة سريعة. للتأكّد من ذلك، يُرجى اتّباع الخطوات التالية:

  1. اضغط على Control+Shift+J (أو Command+Option+J على أجهزة Mac) لفتح "أدوات مطوّلي البرامج".
  2. انقر على علامة التبويب الشبكة.
  3. في القائمة المنسدلة التقييد، اختَر على الإنترنت.
  4. أعِد تحميل التطبيق.

من المفترض أن يظهر لك الرمز product-details.html في لوحة "الشبكة":

لوحة الشبكة تعرض عملية جلب مسبق لملف product-details.html.

للتأكّد من عدم جلب صفحة المنتج مسبقًا على الاتصالات البطيئة، اتّبِع الخطوات التالية:

  1. في القائمة المنسدلة "التقييد"، اختَر 3G البطيء.
  2. أعِد تحميل التطبيق.

يجب أن تتضمّن لوحة الشبكة المراجع الخاصة بالصفحة المقصودة فقط بدون product-details.html:

تعرض &quot;لوحة الشبكة&quot; عدم جلب ملف product-details.html مسبقًا.

جلب مسبق لورقة الأنماط الخاصة بصفحة المنتج باستخدام عنوان HTTP Link

يمكن استخدام عنوان HTTP Link لجلب مسبق لنوع الموارد نفسه الذي تجلبه علامة link. يعتمد قرار استخدام أحدهما أو الآخر في الغالب على تفضيلاتك، لأنّ الفرق في الأداء ليس كبيرًا. في هذه الحالة، ستستخدمها لجلب CSS الرئيسي لصفحة المنتج مسبقًا، وذلك لتحسين عرضها بشكل أكبر.

أضِف عنوان HTTP Link لـ style-product.css في استجابة الخادم للصفحة المقصودة:

  1. افتح الملف server.js وابحث عن معالج get() لعنوان URL الجذر: /.
  2. أضِف السطر التالي في بداية المعالج:
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. اضغط على Control+Shift+J (أو Command+Option+J على أجهزة Mac) لفتح "أدوات مطوّلي البرامج".
  2. انقر على علامة التبويب الشبكة.
  3. أعِد تحميل التطبيق.

يتم الآن جلب style-product.css مسبقًا بأقل أولوية بعد تحميل الصفحة المقصودة:

لوحة الشبكة تعرض عملية جلب مسبق لملف style-product.css.

للانتقال إلى صفحة المنتج، انقر على الشراء الآن. ألقِ نظرة على لوحة الشبكة:

لوحة الشبكة تعرض ملف style-product.css الذي تم استرجاعه من ذاكرة التخزين المؤقت للجلب المسبق.

تم استرداد الملف style-product.css من "ذاكرة التخزين المؤقت للتحميل المسبق" واستغرق تحميله 12 ملي ثانية فقط.