الملخص: سواء في العمل أو في مقابلة، يعد تحسين أداء الواجهة الأمامية للويب أمرًا مهمًا للغاية. إذن، من أين يجب أن نبدأ بالتحسين؟ يمكنك اتباع 34 قاعدة Catch-Rules من Yahoo لتحسين الواجهة الأمامية، ولكنها الآن 35 قاعدة، لذلك يمكن القول إنها Catch-35 من Yahoo لتحسين الواجهة الأمامية. لقد تم تصنيفه، وهو أمر جيد، وبهذه الطريقة يكون لدينا اتجاه أوضح للتحسين.
جزء المحتوى 1. تقليل عدد طلبات HTTPيتم إنفاق 80% من وقت استجابة المستخدم النهائي على الواجهة الأمامية، ومعظم هذا الوقت يتم تنزيل المكونات المختلفة على الصفحة: الصور، وأوراق الأنماط، والبرامج النصية، والفلاش، وما إلى ذلك. سيؤدي تقليل عدد المكونات حتماً إلى تقليل عدد طلبات HTTP التي ترسلها الصفحة. هذا هو المفتاح لجعل صفحتك أسرع.
إحدى الطرق لتقليل عدد مكونات الصفحة هي تبسيط تصميم الصفحة. ولكن هل هناك طريقة لإنشاء صفحات معقدة مع تسريع أوقات الاستجابة؟ حسنًا، هناك بالفعل طريقة للحصول على كعكتك وتناولها أيضًا.
يؤدي دمج الملفات إلى تقليل عدد الطلبات عن طريق وضع جميع البرامج النصية في ملف واحد. وبالطبع، يمكنك أيضًا دمج جميع ملفات CSS. يمكن أن يكون دمج الملفات مهمة مرهقة إذا كانت البرامج النصية والأنماط لكل صفحة مختلفة، ولكن القيام بذلك كجزء من عملية نشر الموقع يمكن أن يؤدي بالفعل إلى تحسين أوقات الاستجابة. تعد CSS Sprites الطريقة المفضلة لتقليل عدد طلبات الصور. قم بدمج جميع صور الخلفية في صورة واحدة، ثم استخدم خصائص صورة الخلفية وموضع الخلفية في CSS لتحديد موضع الجزء المراد عرضه. يمكن لتعيين الصور دمج عدة صور في صورة واحدة، ويكون الحجم الإجمالي هو نفسه، ولكنه يقلل من عدد الطلبات ويسرع تحميل الصفحة. يكون تعيين الصور مفيدًا فقط إذا كانت الصورة متواصلة على الصفحة، مثل شريط التنقل. تعتبر عملية تحديد إحداثيات خريطة الصور مملة وعرضة للخطأ، كما أن استخدام خرائط الصور للتنقل ليس بالأمر السهل، لذا لا ينصح بهذه الطريقة. تستخدم الصور المضمنة (المشفرة Base64) البيانات: نمط URL لتضمين الصور في الصفحة. سيؤدي هذا إلى زيادة حجم ملف HTML، ويعد وضع الصور المضمنة في ورقة أنماط (مخزنة مؤقتًا) فكرة جيدة ويتجنب بنجاح جعل الصفحة ثقيلة. ومع ذلك، فإن المتصفحات السائدة الحالية لا تدعم الصور المضمنة بشكل جيد.يعد تقليل عدد طلبات HTTP للصفحة بمثابة نقطة بداية، وهذا دليل توجيهي مهم لتحسين سرعة الزيارة الأولى للموقع.
2. تقليل عمليات بحث DNSينشئ نظام اسم المجال تعيينًا بين أسماء المضيفين وعناوين IP، تمامًا مثل التعيين بين الأسماء والأرقام في دليل الهاتف. عند إدخال www.yahoo.com في المتصفح، سيتصل المتصفح بمحلل DNS لإرجاع عنوان IP الخاص بالخادم. DNS له تكلفة، ويستغرق الأمر من 20 إلى 120 مللي ثانية للبحث عن عنوان IP لاسم مضيف معين. لا يمكن للمتصفح تنزيل أي شيء من اسم المضيف حتى يكتمل بحث DNS.
يتم تخزين عمليات بحث DNS بشكل أكثر كفاءة، على خادم تخزين مؤقت خاص بواسطة موفر خدمة الإنترنت (ISP) الخاص بالمستخدم أو الشبكة المحلية، ولكن يمكن أيضًا تخزينها مؤقتًا على كمبيوتر المستخدم الفردي. يتم تخزين معلومات DNS في ذاكرة التخزين المؤقت DNS لنظام التشغيل (خدمة عميل DNS على نظام التشغيل Microsoft Windows). تحتوي معظم المتصفحات على ذاكرة تخزين مؤقت خاصة بها مستقلة عن نظام التشغيل. وطالما يحتفظ المتصفح بهذا السجل في ذاكرة التخزين المؤقت الخاصة به، فلن يقوم بالاستعلام عن نظام التشغيل DNS.
يقوم IE بتخزين عمليات بحث DNS مؤقتًا لمدة 30 دقيقة بشكل افتراضي، كما هو مكتوب في إعداد التسجيل DnsCacheTimeout. يقوم Firefox بالتخزين المؤقت لمدة دقيقة واحدة، والتي يمكن ضبطها باستخدام عنصر تكوين الشبكة.dnsCacheExpiration. (قام Fasterfox بتغيير وقت ذاكرة التخزين المؤقت إلى ساعة واحدة. PS Fasterfox هو مكون إضافي لتسريع FF)
إذا كانت ذاكرة التخزين المؤقت لـ DNS الخاصة بالعميل فارغة (بما في ذلك المتصفح ونظام التشغيل)، فإن عدد عمليات بحث DNS يساوي عدد أسماء المضيفين المختلفة على الصفحة، بما في ذلك عناوين URL للصفحة والصور وملفات البرامج النصية وأوراق الأنماط وكائنات Flash وغيرها اسم المضيف، فإن تقليل أسماء المضيفين المختلفة يمكن أن يقلل من عمليات بحث DNS.
يؤدي تقليل عدد أسماء المضيفين المختلفة أيضًا إلى تقليل عدد المكونات التي يمكن للصفحة تنزيلها بالتوازي. يؤدي تجنب عمليات بحث DNS إلى تقليل وقت الاستجابة، بينما يؤدي تقليل عدد التنزيلات المتوازية إلى زيادة وقت الاستجابة. قاعدتي هي توزيع المكونات عبر 2 إلى 4 أسماء مضيفين، وهو حل وسط بين تقليل عمليات بحث DNS والسماح بتنزيلات متزامنة عالية.
3. تجنب عمليات إعادة التوجيهتستخدم عمليات إعادة التوجيه رمزي الحالة 301 و302، فيما يلي رأس HTTP برمز الحالة 301:
تم نقل HTTP/1.1 301 إلى الأبد الموقع: http://example.com/newuriContent-Type: text/html
سينتقل المتصفح تلقائيًا إلى عنوان URL المحدد في حقل الموقع. كافة المعلومات المطلوبة لإعادة التوجيه موجودة في رأس HTTP، وعادةً ما يكون نص الاستجابة فارغًا. في الواقع، تمثل رؤوس HTTP الإضافية مثل Expires وCache-Control أيضًا عمليات إعادة توجيه. هناك طرق أخرى لإعادة التوجيه: قم بتحديث العلامات الوصفية وجافا سكريبت، ولكن إذا كان عليك إجراء إعادة التوجيه، فمن الأفضل استخدام رمز حالة HTTP القياسي 3xx، وذلك بشكل أساسي حتى يعمل زر الرجوع بشكل صحيح.
ضع في اعتبارك أن عمليات إعادة التوجيه يمكن أن تؤدي إلى إبطاء تجربة المستخدم. سيؤدي إدراج إعادة توجيه بين المستخدم ومستند HTML إلى تأخير كل شيء على الصفحة ولن يبدأ تنزيل المكونات حتى يتم تقديم مستند HTML إلى الصفحة browser.
هناك عملية إعادة توجيه شائعة تؤدي إلى إهدار الموارد بشكل كبير، ولا يعرف مطورو الويب ذلك بشكل عام، وذلك عندما يفتقد عنوان URL لشرطة مائلة في النهاية. على سبيل المثال، سيؤدي الانتقال إلى http://astrology.yahoo.com/astrology إلى إرجاع استجابة 301 تعيد التوجيه إلى http://astrology.yahoo.com/astrology/ (لاحظ الشرطة المائلة اللاحقة). في Apache، يمكنك استخدام تعليمات Alias أو mod_rewrite أو DirectorySlash لإلغاء عمليات إعادة التوجيه غير الضرورية.
الاستخدام الأكثر شيوعًا لإعادة التوجيه هو ربط الموقع القديم بالموقع الجديد، ويمكنه أيضًا توصيل أجزاء مختلفة من نفس الموقع وإجراء بعض المعالجة وفقًا لمواقف المستخدم المختلفة (نوع المتصفح، ونوع حساب المستخدم، وما إلى ذلك). . يعد ربط موقعين على الويب باستخدام عمليات إعادة التوجيه هو الأبسط ولا يتطلب سوى قدر صغير من التعليمات البرمجية الإضافية. على الرغم من أن استخدام عمليات إعادة التوجيه في هذه الأوقات يقلل من تعقيد التطوير بالنسبة للمطورين، إلا أنه يقلل من تجربة المستخدم. البديل هو استخدام الاسم المستعار وmod_rewrite، بشرط أن يكون كلا مساري التعليمات البرمجية على نفس الخادم. إذا تم استخدام إعادة التوجيه بسبب تغير اسم المجال، فيمكنك إنشاء CNAME (إنشاء سجل DNS يشير إلى اسم نطاق آخر كاسم مستعار) مع توجيه الاسم المستعار أو mod_rewrite.
4. اجعل Ajax قابلاً للتخزين المؤقتإحدى فوائد Ajax هي أنه يمكنه تقديم تعليقات فورية للمستخدم لأنه يمكنه طلب المعلومات بشكل غير متزامن من الخادم الخلفي. ومع ذلك، مع Ajax ليس هناك ضمان بأن المستخدمين لن يشعروا بالملل أثناء انتظار عودة استجابات JavaScript وXML غير المتزامنة. في العديد من التطبيقات، تعتمد قدرة المستخدم على الانتظار على كيفية استخدام Ajax. على سبيل المثال، في عميل البريد الإلكتروني المستند إلى الويب، سيظل المستخدمون يركزون على النتائج التي تعرضها طلبات Ajax للعثور على رسائل البريد الإلكتروني التي تطابق معايير البحث الخاصة بهم. من المهم أن تتذكر أن غير المتزامن لا يعني أنه فوري.
لتحسين الأداء، يعد تحسين استجابات Ajax أمرًا بالغ الأهمية. الطريقة الأكثر أهمية لتحسين أداء Ajax هي جعل الاستجابة قابلة للتخزين المؤقت، كما تمت مناقشته في إضافة رؤوس انتهاء الصلاحية أو رؤوس HTTP للتحكم في ذاكرة التخزين المؤقت. تنطبق القواعد الإضافية التالية على أياكس:
دعونا نلقي نظرة على مثال لبرنامج البريد الإلكتروني Web 2.0 الذي يستخدم Ajax لتنزيل دفتر عناوين المستخدم للحصول على وظيفة الإكمال التلقائي. إذا لم يقم المستخدم بتعديل دفتر العناوين الخاص به منذ آخر استخدام، وكانت استجابة Ajax قابلة للتخزين المؤقت ولها رأس انتهاء الصلاحية أو التحكم في ذاكرة التخزين المؤقت HTTP لم تنته صلاحيته، فيمكن قراءة دفتر العناوين السابق من ذاكرة التخزين المؤقت. يجب إعلام المتصفح بما إذا كان يجب عليه الاستمرار في استخدام استجابة دفتر العناوين المخزنة مؤقتًا مسبقًا أو طلب استجابة جديدة. يمكن تحقيق ذلك عن طريق إضافة طابع زمني إلى عنوان URL الخاص بـ Ajax لدفتر العناوين للإشارة إلى وقت التعديل الأخير لدفتر عناوين المستخدم، على سبيل المثال &t=1190241612. إذا لم يتم تعديل دفتر العناوين منذ آخر تنزيل وظل الطابع الزمني دون تغيير، فستتم قراءة دفتر العناوين مباشرة من ذاكرة التخزين المؤقت للمتصفح، وبالتالي تجنب رحلة HTTP إضافية ذهابًا وإيابًا. إذا قام المستخدم بتعديل دفتر العناوين، فإن الطابع الزمني يضمن أيضًا أن عنوان URL الجديد لن يتطابق مع الاستجابة المخزنة مؤقتًا وسيطلب المتصفح إدخال دفتر العناوين الجديد.
على الرغم من أن استجابات Ajax يتم إنشاؤها ديناميكيًا وقد تكون متاحة لمستخدم واحد فقط، إلا أنه يمكن تخزينها مؤقتًا، مما سيجعل تطبيق الويب 2.0 الخاص بك أسرع.
5. التحميل البطيء للمكوناتألق نظرة فاحصة على الصفحة واسأل نفسك: ما هو الضروري لعرض الصفحة في المقام الأول؟ ويمكن للباقي الانتظار.
يعد JavaScript خيارًا مثاليًا للفصل قبل حدث التحميل وبعده. على سبيل المثال، إذا كان لديك تعليمات برمجية JavaScript ومكتبات تدعم السحب والإفلات والرسوم المتحركة، فيمكن أن تنتظر هذه المكتبات لأن عنصر السحب والإفلات يحدث بعد عرض الصفحة في البداية. تتضمن الأقسام الأخرى التي يمكن تحميلها ببطء المحتوى المخفي (المحتوى الذي يظهر بعد التفاعل) والصور المطوية.
يمكن أن تساعد الأدوات في تقليل عبء العمل لديك: يمكن لـ YUI Image Loader تحميل الصور المطوية ببطء، كما أن الأداة المساعدة YUI Get هي طريقة سهلة لجلب JS وCSS. تعد صفحة Yahoo! الرئيسية مثالاً على ذلك، حيث يمكنك فتح لوحة شبكة Firebug وإلقاء نظرة فاحصة.
ومن الأفضل مواءمة أهداف الأداء مع أفضل ممارسات تطوير الويب الأخرى، مثل التحسين التدريجي. إذا كان العميل يدعم JavaScript، فيمكن تحسين تجربة المستخدم، ولكن يجب عليك التأكد من أن الصفحة تعمل بشكل صحيح عندما لا يكون JavaScript مدعومًا. لذلك، بمجرد التأكد من أن صفحتك تعمل بشكل صحيح، يمكنك تحسينها باستخدام بعض البرامج النصية بطيئة التحميل لدعم بعض التأثيرات الرائعة مثل السحب والإفلات والرسوم المتحركة.
6. مكونات التحميل المسبق
قد يبدو التحميل المسبق عكس التحميل البطيء، لكنه في الواقع له هدف مختلف. من خلال التحميل المسبق للمكونات، يمكنك الاستفادة الكاملة من وقت الخمول في المتصفح لطلب المكونات (الصور والأنماط والبرامج النصية) التي سيتم استخدامها في المستقبل. عندما يصل المستخدم إلى الصفحة التالية، تكون معظم المكونات موجودة بالفعل في ذاكرة التخزين المؤقت، لذلك سيتم تحميل الصفحة بشكل أسرع من وجهة نظر المستخدم.
في التطبيقات الفعلية، هناك الأنواع التالية من التحميل المسبق:
تعني الصفحة المعقدة مزيدًا من وحدات البايت التي سيتم تنزيلها، وسيكون الوصول إلى DOM باستخدام JavaScript أبطأ. على سبيل المثال، عندما تريد إضافة معالج حدث، هناك فرق بين التكرار خلال 500 عنصر DOM على الصفحة و5000 عنصر DOM.
يعد وجود عدد كبير من عناصر DOM علامة على وجود بعض العلامات غير ذات الصلة على الصفحة والتي تحتاج إلى التنظيف. هل تستخدم الجداول المتداخلة للتخطيط؟ أم أنك أضفت مجموعة من <div> فقط لإصلاح مشكلة التخطيط؟ ربما ينبغي استخدام علامات دلالية أفضل.
تعد أدوات YUI CSS المساعدة مفيدة جدًا للتخطيط: Grids.css مخصص للتخطيط العام، ويمكن استخدام Fonts.css وreset.css لإزالة التنسيق الافتراضي للمتصفح. هذه فرصة جيدة لبدء التنظيف والتفكير في ترميزك، مثل استخدام <div> فقط عندما يكون منطقيًا من الناحية الدلالية، وليس لأنه يعرض سطرًا جديدًا.
من السهل اختبار عدد عناصر DOM، فقط اكتب في وحدة تحكم Firebug:
document.getElementsByTagName('*').الطولإذن، كم عدد عناصر DOM كثيرة جدًا؟ يمكنك الرجوع إلى صفحات أخرى مشابهة ذات علامات جيدة، على سبيل المثال، صفحة Yahoo! الرئيسية هي صفحة مزدحمة إلى حد ما، ولكنها تحتوي على أقل من 700 عنصر (علامات HTML).
8. فصل المكونات عبر المجاليمكن أن تؤدي المكونات المنفصلة إلى زيادة التنزيلات المتوازية إلى الحد الأقصى، ولكن تأكد من أنك لا تستخدم أكثر من 2-4 نطاقات فقط، حيث توجد عقوبة بحث DNS. على سبيل المثال، يمكنك نشر محتوى HTML والمحتوى الديناميكي على www.example.org، وفصل المكونات الثابتة إلى static1.example.org وstatic2.example.org.
9. استخدم إطارات iframe بأقل قدر ممكنيمكنك استخدام iframe لإدراج مستند HTML في مستند أصل، ومن المهم فهم كيفية عمل iframe واستخدامه بكفاءة.
مزايا <iframe>:
عيوب <iframe>:
طلبات HTTP باهظة الثمن، وليست هناك حاجة لاستخدام طلب HTTP للحصول على استجابة غير مجدية (مثل 404 لم يتم العثور عليه)، ولن يؤدي ذلك إلا إلى إبطاء تجربة المستخدم دون أي فائدة.
بعض المواقع تستخدم 404 المفيد - هل تقصد xxx؟ ، وهذا مفيد لتجربة المستخدم، ولكنه أيضًا يهدر موارد الخادم (مثل قواعد البيانات وما إلى ذلك). أسوأ شيء هو أن جافا سكريبت الخارجي الذي ترتبط به به خطأ والنتيجة هي 404. أولاً، ستمنع هذه التنزيلات التنزيلات الموازية. ثانيًا، سيحاول المتصفح تحليل نص الاستجابة 404 لأنه عبارة عن كود JavaScript ويحتاج إلى معرفة الأجزاء المتوفرة منه.
جزء المغلق 11. تجنب استخدام تعبيرات CSSيعد استخدام تعبيرات CSS لتعيين خصائص CSS ديناميكيًا طريقة قوية وخطيرة. مدعوم من IE5، ولكن تم إهماله من IE8. على سبيل المثال، يمكنك استخدام تعبير CSS لتعيين لون الخلفية ليتغير بالساعة:
لون الخلفية: التعبير( (new Date()).getHours()%2 ? #B8D4FF : #F08A00 );12. حدد <link> لتجاهل @import
لقد تم ذكر أفضل الممارسات سابقًا: لتحقيق العرض التدريجي، يجب وضع CSS في الأعلى.
استخدام @import في IE له نفس تأثير استخدام <link> في الأسفل، لذا فمن الأفضل عدم استخدامه.
13. تجنب استخدام المرشحاتيمكن استخدام مرشح AlphaImageLoader الخاص بشركة IE لإصلاح مشكلة صور PNG الشفافة في الإصدارات السابقة لـ IE7. أثناء عملية تحميل الصور، سيمنع هذا الفلتر العرض، ويجمد المتصفح، ويزيد من استهلاك الذاكرة، ويتم تطبيقه على كل عنصر، وليس كل صورة، لذلك سيكون هناك الكثير من المشاكل.
أفضل طريقة هي ببساطة عدم استخدام AlphaImageLoader، والرجوع بأمان إلى استخدام صور PNG8 المدعومة جيدًا في IE بدلاً من ذلك. إذا كان يجب عليك استخدام AlphaImageLoader، فيجب عليك استخدام الشرطة السفلية hack:_filter لتجنب التأثير على مستخدمي IE7 والإصدارات الأحدث.
14. ضع ورقة الأنماط في الأعلىعند دراسة الأداء في Yahoo!، اكتشفنا أن وضع أوراق الأنماط في قسم HEAD بالمستند يجعل الصفحة تبدو وكأنها يتم تحميلها بشكل أسرع. وذلك لأن وضع ورقة الأنماط في الرأس يسمح بعرض الصفحة تدريجيًا.
يريد مهندسو الواجهة الأمامية الذين يهتمون بالأداء أن يتم عرض الصفحة بشكل تدريجي. بمعنى آخر، نريد أن يعرض المتصفح المحتوى الموجود في أسرع وقت ممكن، وهو أمر مهم بشكل خاص عندما يكون هناك الكثير من المحتوى على الصفحة أو عندما يكون اتصال الإنترنت الخاص بالمستخدم بطيئًا للغاية. لقد تمت دراسة وتوثيق أهمية إظهار التعليقات للمستخدمين (مثل مؤشرات التقدم). في حالتنا، صفحة HTML هي مؤشر التقدم! عندما يقوم المتصفح بتحميل رأس الصفحة وشريط التنقل والشعار العلوي وما إلى ذلك تدريجيًا، يتم استخدامها كتعليقات من قبل المستخدمين الذين ينتظرون تحميل الصفحة، مما قد يؤدي إلى تحسين تجربة المستخدم بشكل عام.
جزء شبيبة 15. إزالة البرامج النصية المكررةيمكن أن تؤثر الصفحات التي تحتوي على ملفات نصية مكررة على الأداء أكثر مما تعتقد. في مراجعة لأفضل 10 مواقع ويب في الولايات المتحدة، تم العثور على موقعين فقط يحتويان على نصوص مكررة. هناك سببان رئيسيان يزيدان من فرص ظهور النصوص المكررة على صفحة واحدة: حجم الفريق وعدد النصوص البرمجية. في هذه الحالة، تقوم البرامج النصية المكررة بإنشاء طلبات HTTP غير ضرورية، وتنفيذ تعليمات برمجية JavaScript عديمة الفائدة، وتؤثر على أداء الصفحة.
يقوم IE بإنشاء طلبات HTTP غير ضرورية، لكن Firefox لا يفعل ذلك. في IE، إذا تم تقديم برنامج نصي خارجي غير قابل للتخزين المؤقت مرتين بواسطة الصفحة، فسيتم إنشاء طلبي HTTP عند تحميل الصفحة. حتى إذا كان البرنامج النصي قابلاً للتخزين المؤقت، فسيقوم بإنشاء طلبات HTTP إضافية عندما يقوم المستخدم بإعادة تحميل الصفحة.
بالإضافة إلى إنشاء طلبات HTTP لا معنى لها، فإن تقييم البرنامج النصي عدة مرات يضيع الوقت. لأنه بغض النظر عما إذا كان البرنامج النصي قابلاً للتخزين المؤقت أم لا، فسيتم تنفيذ تعليمات برمجية JavaScript زائدة عن الحاجة في Firefox وIE.
إحدى الطرق لتجنب استيراد نفس البرنامج النصي مرتين عن طريق الخطأ هي تنفيذ وحدة إدارة البرنامج النصي في نظام القالب. الطريقة النموذجية لتقديم البرامج النصية هي استخدام علامات SCRIPT في صفحات HTML:
<script type=text/javascript src=menu_1.0.17.js></script>16. تقليل الوصول إلى DOM
يعد الوصول إلى عناصر DOM باستخدام JavaScript بطيئًا للغاية، لذا لكي تجعل الصفحة أكثر استجابة، يجب عليك:
في بعض الأحيان، يبدو أن الصفحة ليست مستجيبة بشكل كافٍ بسبب إضافة عدد كبير جدًا من معالجات الأحداث التي يتم تنفيذها بشكل متكرر إلى عناصر مختلفة من شجرة DOM، ولهذا السبب يوصى بتفويض الأحداث. إذا كان هناك 10 أزرار في div، فيجب عليك إضافة معالج حدث واحد فقط إلى حاوية div بدلاً من واحد لكل زر. يمكن أن تنبثق الأحداث، بحيث يمكنك التقاط الحدث ومعرفة الزر الذي يمثل مصدر الحدث.
18. ضع النص في الأسفلسيحظر البرنامج النصي التنزيلات المتوازية. توصي وثائق HTTP/1.1 الرسمية بأنه لا ينبغي للمتصفح تنزيل أكثر من مكونين بالتوازي لكل اسم مضيف. إذا كانت الصورة تأتي من أسماء مضيفين متعددة، فيمكن أن يتجاوز عدد التنزيلات المتوازية اثنين. إذا كان البرنامج النصي قيد التنزيل، فلن يبدأ المتصفح أي مهام تنزيل أخرى، حتى تحت اسم مضيف مختلف.
في بعض الأحيان، ليس من السهل نقل النص إلى الأسفل. على سبيل المثال، إذا تم إدراج البرنامج النصي في محتوى الصفحة باستخدام document.write، فلا توجد طريقة لنقله إلى الأسفل. قد تكون هناك أيضًا مشكلات تتعلق بالنطاق، والتي يمكن حلها في معظم الحالات.
الاقتراح الشائع هو استخدام البرامج النصية المؤجلة مع السمة DEFER مما يعني أنها لا يمكن أن تحتوي على document.write ومطالبة المتصفح بإخبارها أنه بإمكانه الاستمرار في العرض. لسوء الحظ، لا يدعم Firefox سمة التأجيل. في IE، قد يتم تأجيل البرنامج النصي، ولكن ليس كما هو متوقع. إذا كان من الممكن تأجيل البرنامج النصي، فيمكننا نقله إلى أسفل الصفحة وسيتم تحميل الصفحة بشكل أسرع.
جافا سكريبت، CSS 19. احتفظ بـ JavaScript وCSS بالخارجتتعلق العديد من مبادئ الأداء بكيفية إدارة المكونات الخارجية، ومع ذلك، قبل ظهور هذه المخاوف، يجب عليك طرح سؤال أساسي: هل يجب وضع JavaScript وCSS في ملفات خارجية أو كتابتهما مباشرة على الصفحة؟
في الواقع، يمكن أن يؤدي استخدام الملفات الخارجية إلى جعل الصفحة أسرع لأنه سيتم تخزين ملفات JavaScript وCSS مؤقتًا في المتصفح. تتم إعادة تنزيل JavaScript وCSS المضمنة في مستند HTML في كل مرة يتم فيها طلب مستند HTML. يؤدي القيام بذلك إلى تقليل عدد طلبات HTTP المطلوبة ولكنه يزيد من حجم مستند HTML. من ناحية أخرى، إذا كانت JavaScript وCSS موجودة في ملفات خارجية وتم تخزينها مؤقتًا بواسطة المتصفح، فقد نجحنا في تصغير مستند HTML دون زيادة عدد طلبات HTTP.
20. تصغير JavaScript وCSSيؤدي الضغط على وجه التحديد إلى إزالة الأحرف غير الضرورية من التعليمات البرمجية لتقليل الحجم وبالتالي تحسين سرعة التحميل. يعني تصغير الكود إزالة كافة التعليقات وأحرف المسافات البيضاء غير الضرورية (المسافات والأسطر الجديدة وعلامات التبويب). يمكن أن يؤدي القيام بذلك في JavaScript إلى تحسين الاستجابة لأن الملف الذي سيتم تنزيله أصغر. أداتي ضغط كود JavaScript الأكثر استخدامًا هما JSMin وYUI Compressor، ويمكن لضاغط YUI أيضًا ضغط CSS.
التشويش هو إجراء اختياري لتحسين التعليمات البرمجية المصدر وهو أكثر تعقيدًا من الضغط، لذا من المرجح أن تؤدي عملية التشويش أيضًا إلى إنتاج أخطاء. في دراسة استقصائية لأفضل عشرة مواقع ويب في الولايات المتحدة، يمكن أن يؤدي الضغط إلى تقليل الحجم بنسبة 21%، ويمكن أن يؤدي التشويش إلى تقليل الحجم بنسبة 25%. على الرغم من أن التشويش يوفر درجة أعلى من التخفيض، إلا أنه أكثر خطورة من الضغط.
بالإضافة إلى ضغط البرامج النصية والأنماط الخارجية، يمكن أيضًا ضغط كتل <script> و<style> المضمنة. حتى مع تمكين وحدة gzip، فإن الضغط أولاً يمكن أن يؤدي إلى تقليل الحجم بنسبة 5% أو أكثر. يتم استخدام JavaScript وCSS بشكل متزايد، لذا فإن ضغط التعليمات البرمجية سيكون له تأثير جيد.
صورة 21. تحسين الصورحاول تحويل تنسيق GIF إلى تنسيق PNG ومعرفة ما إذا كان ذلك يوفر المساحة. قم بتشغيل pngcrush (أو أي أداة أخرى لتحسين PNG) على جميع صور PNG
22. تحسين CSS Spriteلا تستخدم صورًا أكبر مما تحتاج إليه لمجرد أنه يمكنك ضبط العرض والارتفاع في HTML. إذا لزم الأمر
<img width=100 height=100 src=mycat.jpg المضيف: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: 10c24bc-4ab-457e1c1f HTTP/ 1.1 304 لم يتم تعديله32. استخدم طلب GET لأياكس
اكتشف فريق Yahoo! Mailbox أنه عند استخدام XMLHttpRequest، يتم تنفيذ طلب POST الخاص بالمتصفح من خلال عملية مكونة من خطوتين: إرسال رأس HTTP أولاً، ثم إرسال البيانات. لذلك من الأفضل استخدام طلب GET، الذي يحتاج فقط إلى إرسال رسالة TCP (ما لم يكن هناك عدد كبير جدًا من ملفات تعريف الارتباط). الحد الأقصى لطول عنوان URL لـ IE هو 2 كيلو بايت، لذلك إذا تجاوزت البيانات المراد إرسالها 2 كيلو بايت، فلا يمكن استخدام GET.
أحد الآثار الجانبية المثيرة للاهتمام لطلبات POST هو عدم إرسال أي بيانات فعليًا، مثل طلبات GET. كما هو موضح في وثائق HTTP، يتم استخدام طلبات GET لاسترداد المعلومات. لذا فإن دلالاتها مخصصة فقط لطلب البيانات باستخدام طلب GET، وليس لإرسال البيانات التي يجب تخزينها على الخادم.
33. قم بمسح المخزن المؤقت في أقرب وقت ممكنعندما يطلب المستخدم صفحة، يستغرق الخادم حوالي 200 إلى 500 مللي ثانية لتجميع صفحة HTML، وخلال هذه الفترة يتوقف المتصفح وينتظر وصول البيانات. هناك وظيفة Flush () في PHP، والتي تسمح لك بإرسال جزء من استجابة HTML المعدة إلى المتصفح، بحيث يمكن للمتصفح البدء في الحصول على المكونات أثناء إعداد الجزء المتبقي في الخلفية وتنعكس الفائدة بشكل أساسي في خلفية مزدحمة جدًا أو واجهة أمامية خفيفة جدًا على الصفحة (ملاحظة: بمعنى آخر، تنعكس الميزة بشكل أفضل عندما يكون وقت الاستجابة في الخلفية بشكل أساسي).
المكان المثالي لمسح المخزن المؤقت هو بعد HEAD، لأن إنشاء جزء HEAD من HTML عادة ما يكون أسهل ويسمح بإدخال أي ملفات CSS وJavaScript، مما يسمح للمتصفح بالبدء في جلب المكونات بالتوازي بينما لا تزال الخلفية قيد المعالجة .
على سبيل المثال:
... <!-- css, js --> </head> <?php Flush(); ?> <body> ... <!-- content -->34. استخدم CDN (شبكة توصيل المحتوى)
تؤثر المسافة الفعلية للمستخدم من الخادم أيضًا على وقت الاستجابة. يتيح نشر المحتوى على خوادم متعددة موزعة جغرافيًا للمستخدمين تحميل الصفحات بشكل أسرع. ولكن كيف نفعل ذلك؟
الخطوة الأولى لتحقيق المحتوى الموزع جغرافيًا هي: لا تحاول إعادة تصميم تطبيق الويب الخاص بك لاستيعاب البنية الموزعة. اعتمادًا على التطبيق، قد يتضمن تغيير البنية مهامًا شاقة مثل مزامنة حالة الجلسة وتكرار معاملات قاعدة البيانات عبر الخوادم (قد لا تكون الترجمات دقيقة). قد تتأخر المقترحات الخاصة بتقصير المسافة بين المستخدمين والمحتوى أو قد يكون من المستحيل تمريرها بسبب هذه الصعوبة.
تذكر أن 80% إلى 90% من وقت استجابة المستخدم النهائي يتم إنفاقه في تنزيل مكونات الصفحة: الصور والأنماط والبرامج النصية والفلاش وما إلى ذلك. وهذه قاعدة ذهبية للأداء. من الأفضل تحقيق اللامركزية في المحتوى الثابت أولاً بدلاً من إعادة تصميم بنية التطبيق من البداية. وهذا لا يقلل وقت الاستجابة بشكل كبير فحسب، بل يسهل أيضًا إظهار مساهمة CDN.
شبكة توصيل المحتوى (CDN) عبارة عن مجموعة من خوادم الويب المنتشرة في مواقع جغرافية مختلفة لتوصيل المحتوى إلى المستخدمين بكفاءة أكبر. عادةً، يعتمد الخادم المختار لتقديم المحتوى على قياس مسافة الشبكة. على سبيل المثال: اختر الخادم الذي يحتوي على أقل عدد من القفزات أو أسرع وقت استجابة.
35. أضف رأس HTTP لانتهاء الصلاحية أو التحكم في ذاكرة التخزين المؤقتهناك جانبان لهذه القاعدة:
أصبح تصميم الويب أكثر ثراءً، مما يعني وجود المزيد من البرامج النصية والصور والفلاش على الصفحة. قد لا يزال يتعين على الزائرين الجدد للموقع إرسال بعض طلبات HTTP، ولكن باستخدام تاريخ انتهاء الصلاحية، يصبح المكون قابلاً للتخزين المؤقت، مما يتجنب طلبات HTTP غير الضرورية أثناء جلسات التصفح اللاحقة. يتم عادةً استخدام رؤوس HTTP لانتهاء الصلاحية على الصور، ولكن يجب استخدامها على جميع المكونات، بما في ذلك البرامج النصية والأنماط ومكونات Flash.
تستخدم المتصفحات (والوكلاء) التخزين المؤقت لتقليل عدد وحجم طلبات HTTP بحيث يتم تحميل الصفحات بشكل أسرع. يستخدم خادم الويب رأس استجابة Expiration HTTP لإخبار العميل بالمدة التي يجب أن يتم تخزين كل مكون من مكونات الصفحة فيها مؤقتًا. يؤدي استخدام وقت في المستقبل البعيد كتاريخ انتهاء الصلاحية إلى إخبار المتصفح بأن هذه الاستجابة لن تتغير قبل 15 أبريل 2010.
تنتهي: الخميس، 15 أبريل 2010، الساعة 20:00:00 بتوقيت جرينتش
إذا كنت تستخدم خادم Apache، فاستخدم التوجيه ExpiresDefault لتعيين تاريخ انتهاء الصلاحية بالنسبة إلى التاريخ الحالي. يحدد المثال التالي فترة صلاحية مدتها 10 سنوات من وقت الطلب:
انتهاء صلاحية الوصول الافتراضي بالإضافة إلى 10 سنوات
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.