مع ظهور عصر WEB2.0، حدث تطور غير مسبوق في الشبكة. أصبحت تجربة المستخدم الأمامية ذات أهمية متزايدة لتعويض بعض أوجه القصور في تفاعل المستخدم الضعيف في بنية B/S، ومع ذلك، سيؤدي هذا إلى مشكلة، وهي أنها ستزيد الضغط على العميل على سبيل المثال، باستخدام كمية كبيرة من كود JS، سوف يعلم الجميع أن كود JS الذي يتم تشغيله على العميل سيؤثر على كفاءة تحليل صفحة الويب بأكملها في المتصفح، مما قد يعني أيضًا زيادة في حركة مرور العميل، لذا سواء كان ذلك. من منظور تحميل الخادم أو منظور المستخدم، فمن المهم بشكل خاص تحسين كود العميل! تشرح هذه المقالة بشكل أساسي طرق تحسين الواجهة الأمامية للويب من الجوانب الداخلية والخارجية. آمل أن يمنح القراء بعض الخبرة والإلهام.
أولاً، دعونا نلقي نظرة على بيانات حركة مرور http لـ http://yahoo.com من خلال مخطط إحصائي لـ Yahoo:
يمكننا أن نجد أنه من طلب الخادم الأول إلى الصفحة التي يتم تحميلها بالكامل على العميل، فإن قراءة كود HTML لا تمثل سوى 5٪ من وقت الاستجابة بالكامل. تنطبق هذه النتيجة على الغالبية العظمى من مواقع الويب في الولايات المتحدة التي تم أخذ عينات منها من بين أفضل عشرة مواقع ويب، يوجد موقع واحد فقط يحتوي على أكثر من 5% ولكن أقل من 20%، ويتم استخدام 80% من الوقت المتبقي لقراءة المحتوى الآخر لصفحة الويب، أي الواجهة الأمامية (النص الأصلي موجود في المقدمة). -end، المعنى لا يشمل html، ويمكن أن تكون بقية التعليمات البرمجية عبارة عن صور أو نصوص برمجية أو فلاش أو مقاطع فيديو أو أشياء مختلفة). هذا هو السبب الرئيسي الذي يجعلنا نركز على هذه الأشياء لتحسين سرعة العرض.
هناك ثلاثة أسباب رئيسية تدفعك للبدء بالواجهة الأمامية :
1. خارج التعليمات البرمجية، لدينا الطرق الثلاث التالية:
1. استخدم تقنية CDN
بالنسبة لطرق محددة، يمكنك البحث عنها في جوجل. (يبدو أن المبدأ العام هو تحديد موقع الزائر والمحتوى الذي تم الوصول إليه لتحديد أقرب خادم للتعامل مع طلب المستخدم)
2. أضف رأسًا منتهي الصلاحية منذ فترة طويلة
تنتهي: الخميس، 15 أبريل 2010، الساعة 20:00:00 بتوقيت جرينتش
ستستخدم المتصفحات التخزين المؤقت لتقليل عدد طلبات http لتسريع وقت تحميل الصفحة. إذا تمت إضافة وقت انتهاء صلاحية طويل إلى رأس الصفحة، فسيقوم المتصفح دائمًا بتخزين العناصر الموجودة في الصفحة.
ومع ذلك، سيؤدي هذا إلى مشكلة، أي أنه إذا تغيرت الأشياء الموجودة على الصفحة، فيجب تغيير الاسم، وإلا فلن يتم تحديث العميل بشكل نشط، في مجموعة عمل Yahoo، سيتم استخدام رقم الإصدار، مثل yahoo_2. 0.6.js
3. ضغط Gzip
Gzip هي طريقة الضغط الأكثر شيوعًا وفعالية اليوم، وقد تم تطويرها بواسطة GNU وتم توحيدها بواسطة RFC1952.
(يقوم Gzip بضغط الصور وcss والبرامج النصية وما إلى ذلك على جانب الخادم، ثم يرسلها إلى متصفح العميل لفك ضغطها. يمكن أن يؤدي ذلك إلى زيادة سرعة النقل، لكن الضغط على الخادم سيزداد. بشكل عام، هو أكثر ملاءمة لضغط بعض العناصر