كيفية تسريع الموقع مع علامة

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

المطورين لديهم فكرة جيدة جدا من كيف يتم التنقل في مواقع الويب الخاصة بهم, و اي الموارد المطلوبة في معظم الأحيان وبالتالي ، يمكنهم التنبؤ ببعض متصفحات العمليات المستقبلية التي يجب أن تقوم بها للمواقع. كل ما نحتاجه الآن هو للمطورين لإيجاد طريقة لذلك ترحيل هذه توقعات للمتصفحات و وضعها في الاستخدام الجيد. هذا هو المكان الذي تأتي فيه بعض "روابط HTML" الخاصة.

تجديد معلومات عن طلبات HTTP

قبل إلقاء نظرة على هذه الروابط ، حان الوقت لتحديث ذاكرتنا حول كيفية حدوث عملية جلب ملفات نموذجية تطلب HTTP. دعنا نقول شخص يدعى جو يريد زيارة موقع على شبكة الإنترنت.

إليك ما يحدث بعد ذلك:

1. يقوم Joe بكتابة عنوان موقع الويب الذي يمكن الاستدلال عليه إنسانيًا في شريط عناوين المتصفح ويضغط على "Enter".
2. بمجرد استلام هذا العنوان ، يسأل المتصفح خادم DNS (مجاملات مزود خدمة الإنترنت) عن عنوان IP الخاص بالعنوان الذي قدمه Joe.
3. خادم DNS يلتزم.
4. الآن وبعد أن أصبح المتصفح يعرف عنوان IP ، فإنه يرسل رسالة (في لهجة TCP) إلى خادم الموقع ، يطلب اتصالاً.
5. إذا كان الخادم على قيد الحياة وبصحة جيدة ، فإنه يرسل ردًا يعترف بطلب المستعرض ويستجيب المتصفح ويقر برسالة الخادم. (ملحوظة: نعم ، هذه نسخة مخففة للغاية من مصافحة TCP بين عميل وخادم.)
6. عند انتهاء المصافحة ، يتم تأسيس اتصال بين الاثنين.
7. الآن ، يقوم المتصفح بتغيير نمط لهجته إلى HTTP ويسأل الخادم للموقع.
8. يعرض الخادم ، الذي يعرف الصفحة الرئيسية للموقع ، ذلك بالضبط ، والذي يتم استلامه بواسطة المستعرض ويظهر لجو الذي ينتظر بصبر شديد أمام الكمبيوتر.

يمر طلب HTTP النموذجي الكل ذلك (وأكثر من ذلك) لإحضار مستند عبر الإنترنت. لذلك إذا كان أي من هذه العملية يمكن أن تقفز عندما يكون ذلك ممكنا, في وسعنا قلل من الوقت الذي يتعين علينا فيه انتظار تسليم الموارد التي نريدها.

علاقات ارتباط HTML

تحدد W3C 4 علاقات ارتباط HTML (يختلط للعلاقة) اسمه نظام أسماء النطاقات-الجلب المسبق, المسبق ل, الجلب المسبق, و عرض مسبق. معًا يطلق عليهم (بواسطة W3C) "تلميحات الموارد"الآن ، سوف نرى ماذا يمكن أن يفعلوا و حيث يمكن استخدامها.

1. الجلب المسبق DNS

في الجلب المسبق DNS ، و تحليل اسم المجال (ويعرف أيضًا باسم الحصول على عنوان IP المطابق من خادم DNS) أن يتم مسبقًا.

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

هذه الحد من الكمون عن طريق الجلب المسبق DNS يمكن القيام به عن طريق إضافة هذا الرمز إلى الصفحة المرجعية.

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

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

تتوفر هذه الميزة في جميع المتصفحات الحديثة تقريبًا باستثناء Safari اعتبارًا من مارس 2016.

2. الاتصال

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

يسرد W3C حالة الاستخدام المثالية للقطع الأولي: الموجهات. يستخدم المطورون عمليات إعادة التوجيه لعدد من الأسباب.

في هذه الحالة ، يكون الطلب التالي للمتصفح (الموقع المعاد توجيهه) هو 100 ٪ يمكن التنبؤ بها, ويمكن تكون مقدما ل, إلى تقليل زمن الانتقال.

تخيل أن هناك صفحة موقع وسيطة تعيد التوجيه إلى "xyzsite"، سيؤدي ارتباط HTML التالي إلى جعل المستعرض يقوم بالاتصال بملقم xyzsite ، عندما يصل إلى تلك الصفحة الوسيطة.

اعتبارًا من مارس 2016 ، يتوفر هذا في Chrome و Opera و Firefox.

3. الجلب المسبق

مع الجلب المسبق, لمورد ، المتصفح يبدأ تنفيذ تحليل DNS لاسم مجال المورد, ثم ينفذ اتصال TCP مع خادم المورد, يجعل طلب HTTP ، وأخيرا يجلب ويخزن المورد الجاهز مسبقًا في ذاكرة التخزين المؤقت للمتصفح.

إذا كنت متأكدًا من الموارد التي ستحتاج إليها لاحقًا ، فهذه هي الموارد التي يجب جلبها مسبقًا ؛ هنا يكمن الصيد. الجلب المسبق يأخذ التخمين, وإذا كنت تعتقد خطأ ، فقد تباطؤ بالفعل بدلاً من تسريع موقعك.

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

الجلب المسبق مدعوم في Chrome و Firefox و Opera.

4. المسبق

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

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

Prerender متوفر بالفعل في Chrome و IE و Opera اعتبارًا من مارس 2016.

هناك عدد قليل من الأشياء ملاحظة

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

لذلك ، كل شيء قائمة الانتظار وتنفيذها عندما يشعر المتصفح بحرية كافية للقيام بذلك.

ليس بالضرورة أن تكون تلميحات الموارد هذه موجودة في الصفحة حتى قبل تحميل الصفحة. يستطيعون تم إضافتها لاحقًا بواسطة JavaScript, وسوف تلميحات المورد القيام بعملهم كالمعتاد.

(2) تحدد W3C سمة وصلة HTML مسمي احتمال التلميح, العلاقات العامة (مع القيمة من 0 إلى 1) لتلميحات الموارد هذه ، والتي يمكن استخدامها لتوفير احتمال الطلبات التي سيتم تقديمها في المستقبل. لم أر هذه السمة قيد التنفيذ من قبل أي متصفح حتى الآن. على سبيل المثال ، تنص التعليمة البرمجية التالية على أن هناك فرصة بنسبة 80٪ xyzsite سيتم طلبها في المستقبل و 30٪ للصفحة about.

يمكننا أيضًا إضافة سمة crossorigin الاختيارية إلى تلميحات الموارد لإعلام المستعرض ببيانات اعتماد CORS للطلب المرتبط.