قائمة تحسين سرعة الويب

أعتقد أن الإنترنت أصبح جزءًا لا غنى عنه من حياة الناس. إن تطبيقات العملاء الأثرياء مثل Ajax و Flex ، وما إلى ذلك ، تجعل الناس أكثر سعادة لتجربة العديد من الوظائف التي لا يمكن تنفيذها إلا في C/S. على سبيل المثال ، قامت Google فرصة بنقل جميع تطبيقات المكاتب الأساسية إلى الإنترنت. بالطبع ، على الرغم من كونها مريحة ، فإنها تجعل الصفحة أبطأ وأبطأ بلا شك. أنا أقوم بالتنمية في الواجهة الأمامية. فيما يتعلق بالأداء ، وفقًا لمسح Yahoo ، فإن الواجهة الخلفية لا تمثل سوى 5 ٪ ، في حين أن الواجهة الأمامية تصل إلى 95 ٪ ، والتي يمكن تحسينها 88 ٪ من الأشياء.

ما سبق هو مخطط دورة الحياة لصفحة Web2.0. يقول المهندس بوضوح أنه ينقسم إلى أربع مراحل: الحمل والولادة والتخرج والزواج. إذا تمكنا من إدراك هذه العملية بدلاً من الاستجابة البسيطة للطلب عند النقر على رابط الويب ، فيمكننا حفر العديد من التفاصيل التي يمكن أن تحسن الأداء. استمعت اليوم إلى محاضرة حول بحث أداء الويب من قبل Xiao Ma Ge على Taobao في فريق تطوير Yahoo. شعرت أنني اكتسبت الكثير وأردت مشاركتها على المدونة.

أعتقد أن الكثير من الناس سمعوا عن 14 قاعدة لتحسين أداء الموقع. يمكن الاطلاع على مزيد من المعلومات في المطور. yahoo.com

1. تقليل عدد طلبات HTTP قدر الإمكان [المحتوى]

2. استخدم CDN (شبكة توصيل المحتوى) [الخادم]

3. إضافة رأس انتهاء صلاحية (أو السيطرة على ذاكرة التخزين المؤقت) [الخادم]

4. مكون GZIP [الخادم]

5. ضع نمط CSS فوق الصفحة [CSS]

6. انقل البرنامج النصي إلى الأسفل (بما في ذلك الخط) [JavaScript]

7. تجنب استخدام التعبيرات في CSS [CSS]

8. افصل JavaScript و CSS في ملفات خارجية [JavaScript] [CSS]

9. تقليل استفسارات DNS [المحتوى]

10. ضغط JavaScript و CSS (بما في ذلك inline) [JavaScript] [CSS]

11. تجنب إعادة توجيه [الخادم]

12. قم بإزالة البرامج النصية المكررة [JavaScript]

13. تكوين علامات الكيان (ETAGS) [CSS]

14. اصنع ذاكرة التخزين المؤقت Ajax

يوجد مكون إضافي yslow تحت Firefox ، والذي تم دمجه في Firebug. يمكنك استخدامه لمعرفة كيفية أداء موقع الويب الخاص بك بسهولة في هذه الجوانب.

هذا هو نتيجة استخدام yslow لتقييم موقع الويب الخاص بي xifengfang. لسوء الحظ ، لديها فقط 51 نقطة. هيه. عشرات المواقع الرئيسية في الصين ليست عالية. لقد اختبرت ذلك للتو وكان كل من سينا ​​و Netease 31 نقطة. ثم درجة ياهو (الولايات المتحدة) هي بالفعل 97 نقطة! يمكن أن نرى أن Yahoo بذل جهودًا في هذا الصدد. انطلاقًا من القواعد الـ 14 التي تلخصها ، هناك العديد من التفاصيل التي تمت إضافتها إلينا الآن ، وبعض الممارسات منحرفة بعض الشيء.

المادة 1: قلل من عدد طلبات HTTP قدر الإمكان (تقديم عدد أقل من طلبات HTTP)

تكون طلبات HTTP عامة ، وإيجاد طرق لتقليل عدد الطلبات يمكن أن تزيد بشكل طبيعي من سرعة صفحة الويب. تتمثل الطرق الشائعة في دمج CSS و JS (دمج ملفات CSS و JS في صفحة على التوالي) ، وخرائط الصور و sprites CSS ، وما إلى ذلك ، ربما تقسيم ملفات CSS و JS يرجع إلى الاعتبارات من حيث بنية CSS ، والمشاركة ، وما إلى ذلك. كان هذا لا يزال طلبًا للمتصفح ، ولكن لا يزال من الممكن استعادته إلى العديد من التطوير ، والذي كان مناسبًا للإدارة والمراجع المتكررة. يوصي Yahoo حتى كتابة الصفحة الرئيسية CSS و JS مباشرة في ملف الصفحة بدلاً من المراجع الخارجية. نظرًا لأن الصفحة الرئيسية لديها الكثير من الزيارات ، فإن القيام بذلك يمكن أن يقلل من عدد طالبين. في الواقع ، العديد من البوابات المحلية تفعل ذلك.

يشير CSS Sprites إلى الجمع فقط بين صورة الخلفية على الصفحة إلى واحدة ، ثم باستخدام القيمة التي لا يمكن تحديدها بواسطة سمة موقع الخلفية لـ CSS للحصول على خلفيتها. تعمل مواقع Taobao و Alibaba الصينية حاليًا. إذا كنت مهتمًا ، فيمكنك إلقاء نظرة على صور خلفية Taobao و Alibaba.

http://www.cssssprites.com/ هذا موقع ويب للأدوات يمكنه تلقائيًا دمج الصور التي تقوم بتحميلها وإعطاء إحداثيات بوضع الخلفية المقابلة. وإخراج النتائج في تنسيقات PNG و GIF.

المادة 2: استخدم شبكة توصيل المحتوى

لأكون صادقًا ، لا أعرف الكثير عن CDN. ببساطة ، من خلال إضافة بنية شبكة جديدة إلى الإنترنت الحالي ، نشر محتوى الموقع على خادم ذاكرة التخزين المؤقت الأقرب إلى المستخدم. من خلال تقنية موازنة تحميل DNS ، يُحكم أن مصدر المستخدم يصل إلى خادم ذاكرة التخزين المؤقت القريب للحصول على المحتوى المطلوب. يقوم المستخدمون في Hangzhou بالوصول إلى المحتوى على الخادم بالقرب من Hangzhou ، والذين في بكين يصلون إلى المحتوى على الخادم بالقرب من بكين. هذا يمكن أن يقلل بشكل فعال من وقت نقل البيانات على الشبكة وتحسين السرعة. لمزيد من المحتوى التفصيلي ، يمكنك الرجوع إلى شرح CDN على موسوعة Baidu. ياهو! توزيع المحتوى الثابت على CDN يقلل من وقت تأثير المستخدم بنسبة 20 ٪ أو أكثر.

مخطط تقنية CDN:

مخطط شبكة CDN:

المادة 3: إضافة رأس انتهاء صلاحية/ذاكرة التخزين المؤقت: أضف رأسًا انتهاء الصلاحية

الآن يتم تضمين المزيد والمزيد من الصور والبرامج النصية و CSS و Flash في الصفحة ، وعندما نصل إليها ، سنقدم حتماً العديد من طلبات HTTP. في الواقع ، يمكننا تخزين هذه الملفات عن طريق إعداد تنتهي صلاحيتها. يحدد Expire بالفعل وقت ذاكرة التخزين المؤقت لنوع معين من الملفات في المتصفح من خلال رسالة الرأس. لا تحتاج معظم الصور إلى تعديلها بشكل متكرر بعد نشرها. بعد أن تم تخزينه مؤقتًا ، لن يحتاج المستعرض إلى تنزيل هذه الملفات من الخادم وقراءتها مباشرة من ذاكرة التخزين المؤقت. سيؤدي ذلك إلى تسريع إلى حد كبير في الوصول إلى الصفحة مرة أخرى. يقوم بروتوكول HTTP 1.1 النموذجي بإرجاع معلومات الرأس:

HTTP/1.1 200 OK

التاريخ: الجمعة ، 30 أكتوبر 1998 13:19:41 بتوقيت جرينتش

الخادم: Apache/1.3.3 (UNIX)

السيطرة على ذاكرة التخزين المؤقت: Max-Ege = 3600 ، يجب إعادة تقييم

انتهاء صلاحية: الجمعة ، 30 أكتوبر 1998 14:19:41 بتوقيت جرينتش

المعدل الأخير: Mon ، 29 Jun 1998 02:28:12 GMT

ETAG: 3E86-410-3596FBBC

طول المحتوى: 1040

نوع المحتوى: النص/html

يمكن القيام بذلك عن طريق ضبط السيطرة على ذاكرة التخزين المؤقت وانتهيجته من خلال البرامج النصية من جانب الخادم.

على سبيل المثال ، إذا تم تعيينه في PHP ، فإنه ينتهي بعد 30 يومًا:

<!-Pheader (التحكم في ذاكرة التخزين المؤقت: يجب إعادة تقييم) ؛ $ إزاحة = 60 * 60 * 24 * 30 ؛ $ expstr = انتهاء صلاحيتها :. GMDate (D ، D Myh: i: s ، time () + $ الإزاحة). GMT ؛ Header ($ expstr) ؛-> يمكن أيضًا القيام به عن طريق تكوين الخادم نفسه ، بحيث لا تكون هذه واضحة للغاية ، هاها. إذا كنت تريد معرفة المزيد ، يرجى الرجوع إلى http://www.web-caching.com/

على حد علمي ، فإن انتهاء صلاحية وقت الانتهاء من موقع Alibaba الصيني هو 30 يومًا. ومع ذلك ، كانت هناك مشاكل خلال هذه الفترة ، خاصة عند تعيين وقت انتهاء صلاحية البرنامج النصي ، يجب عليك التفكير بعناية ، وإلا فقد يستغرق الأمر وقتًا طويلاً للعميل لإدراك هذه التغييرات بعد تحديث وظيفة البرنامج النصي المقابلة. واجهت هذه المشكلة عندما كنت أعمل على [اقتراح المشروع] من قبل. لذلك ، يجب أن نفكر بعناية في أي منها يجب أن يتم تخزينه مؤقتًا وأيهم لا ينبغي أن يتم تخزينه مؤقتًا.

المادة 4: تمكين ضغط GZIP: مكونات GZIP

فكرة GZIP هي ضغط الملفات على جانب الخادم أولاً ثم نقلها. هذا يمكن أن يقلل بشكل كبير من حجم نقل الملفات. بعد الانتهاء من الإرسال ، سيعيد المستعرض تحديد المحتوى المضغوط وتنفيذه. المتصفحات الحالية يمكن أن تدعم GZIP جيدا. لا يمكن للمتصفح التعرف عليه فحسب ، بل يمكن أيضًا للزحفات الرئيسية التعرف عليه أيضًا. يمكن لجميع كبار المسئولين الاقتصاديين أن تطمئن. علاوة على ذلك ، فإن نسبة ضغط GZIP كبيرة جدًا ، وعادة ما تكون نسبة الضغط 85 ٪ ، مما يعني أن صفحة 100K على الخادم يمكن ضغطها إلى حوالي 25 ألفًا قبل إرسالها إلى العميل. لمبادئ ضغط GZIP محددة ، يمكنك الرجوع إلى مقالة "خوارزمية ضغط GZIP" على CSDN. يؤكد Yahoo بشكل خاص على أنه يجب ضغط جميع محتوى النص بواسطة GZIP: HTML (PHP) ، JS ، CSS ، XML ، TXT ... يقوم موقعنا على موقع جيد في هذا الصدد ، إنه A A. في الماضي ، لم تكن صفحتنا الرئيسية ، لأن هناك العديد من JS على الصفحة الرئيسية مع رموز الإعلان. لم يتم ضغط JS من مواقع الويب الخاصة بأصحاب رمز الإعلانات هذه بواسطة GZIP ، والتي من شأنها سحب موقعنا على الويب.

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

المادة 5: ضع أوراق الأنماط في الأعلى

ضع CSS أعلى الصفحة ، لماذا هذا؟ نظرًا لأن المتصفحات مثل IE ، فإن Firefox لن تقدم أي شيء حتى يتم نقل جميع CSS تمامًا. السبب بسيط كما قال الأخ ما. CSS ، الاسم الكامل: صفائح نمط متتالية. يعني التتابع أن CSS وراء يمكن أن يغطي CSS السابقة ، ويمكن أن تغطي CSS ذات المستويات العالية CSS بمستويات منخفضة. في [CSS! المهم] تم ذكر علاقة التسلسل الهرمي في أسفل هذه المقالة ، وهنا نحتاج فقط إلى معرفة أنه يمكن كتابة CSS. نظرًا لأنه يمكن الكتابة فوقها السابقة ، فمن المعقول بلا شك أن يتم عرض المتصفح بعد تحميله بالكامل. في العديد من المتصفحات ، مثل IE ، فإن مشكلة وضع ورقة الأنماط في أسفل الصفحة هي أنها تحظر ترتيب عرض محتوى صفحة الويب. إذا قام المتصفح بحظر الشاشة لتجنب إعادة طلاء عناصر الصفحة ، فيمكن للمستخدم رؤية صفحات فارغة فقط. لا تمنع Firefox الشاشة ، ولكن هذا يعني أنه عندما يتم تنزيل ورقة الأنماط ، قد تحتاج بعض عناصر الصفحات إلى إعادة طلاءها ، مما يسبب مشكلات. لذلك يجب أن يتم تحميل CSS في أقرب وقت ممكن

بعد هذا المعنى ، إذا نظرنا إليه بعناية ، فهناك بعض المناطق التي يمكن تحسينها بالفعل. على سبيل المثال ، فإن ملف اثنين من CSS الموجودان في هذا الموقع هما <Link Rel = sthersheet rev = STYLESHEET HREF = http: //www.space007.com/themes/google/style/google.css type = text/css media = screen/> href = http: //www.space007.com/css/print.css type = text/css media = print/>. من الوسائط ، يمكننا أن نرى أن CSS الأولى مخصصة للمتصفح ، وملف CSS الثاني هو نمط الطباعة. من العادات السلوكية للمستخدم ، يجب أن يحدث الإجراء لطباعة الصفحة بعد عرض الصفحة. لذلك ، يجب أن تكون طريقة أفضل لإضافة CSS ديناميكيًا إلى الصفحة بعد تحميل الصفحة ، بحيث يمكنها تحسين السرعة. (ها ها)

المادة 6: ضع البرامج النصية في الأسفل

هناك غرضان لوضع البرامج النصية في أسفل الصفحة: 1. لأن تنفيذ البرامج النصية السينمائية يمنع حظر تنزيل الصفحة. أثناء عملية التحميل الخاصة بالصفحة ، عندما يقرأ المتصفح عبارة تنفيذ JS ، فإنه بالتأكيد يفسر كل شيء ويقرأ المحتوى التالي التالي. إذا كنت لا تصدق ذلك ، فيمكنك كتابة حلقة JS لمعرفة ما إذا كانت الأشياء الموجودة أسفل الصفحة ستظل ستظهر. (إن تنفيذ SetTimeOut و SetInterval يشبه إلى حد ما multithreading ، وسيستمر عرض المحتوى التالي قبل وقت الاستجابة المقابل.) المنطق وراء المتصفح هو أن JS قد ينفذ موقعه. HREF أو وظائف أخرى قد تقطع عملية هذه الصفحة بالكامل في أي وقت ، وهذا هو بالطبع ، يجب تحميله بعد الانتهاء منه. لذلك ، يمكن وضعها في نهاية الصفحة تقليل وقت تحميل العناصر المرئية للصفحة بشكل فعال. 2. المشكلة الثانية الناجمة عن البرنامج النصي هي أنه يحظر عدد التنزيلات المتوازية. توصي مواصفات HTTP/1.1 بعدم تجاوز عدد التنزيل المتوازي لكل مضيف للمتصفح 2 (أي يمكن أن يكون 2 فقط ، ويتم ضبط المتصفحات الأخرى مثل FF على 2 بشكل افتراضي ، ولكن يمكن أن تصل IE8 الجديد إلى 6). لذلك إذا قمت بتوزيع ملفات الصور على أجهزة متعددة ، فيمكنك تحقيق أكثر من تنزيلين متوازيين. ومع ذلك ، عند تنزيل ملف البرنامج النصي ، لن يبدأ المتصفح تنزيلات متوازية أخرى.

بالطبع ، لكل موقع ويب ، لا تزال جدوى وضع جميع البرامج النصية في أسفل الصفحة مشكوك فيها. على سبيل المثال ، صفحة موقع Alibaba الصيني. هناك JS مضمّن في العديد من الأماكن ، ويعتمد عرض الصفحات اعتمادًا كبيرًا على هذا. أعترف أن هذا أبعد ما يكون عن مفهوم البرامج النصية غير الغازية ، لكن العديد من المشكلات التاريخية ليس من السهل حلها.

المادة 7: تجنب استخدام التعبيرات في CSS (تجنب تعبيرات CSS)

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

المادة 8: ضع كل من JavaScript و CSS في الملفات الخارجية (اجعل JavaScript و CSS خارجيًا)

أعتقد أن هذا لا يزال من السهل فهمه. لا يتم ذلك فقط من منظور تحسين الأداء ، ولكن أيضًا من منظور صيانة الكود السهل. يمكن أن تقلل كتابة CSS و JS على محتوى الصفحة طلبين ، ولكن أيضًا زيادة حجم الصفحة. إذا كنت قد تم تخزينك مؤقتًا CSS و JS ، فلن يكون هناك طلبات HTTP إضافية مرتين. بالطبع ، قلت أيضًا من قبل أن بعض مطوري الصفحات الخاصين سيظلون يختارون ملفات CSS و JS المضمنة.

المادة 9: تقليل عمليات البحث DNS

هناك مراسلات فردية بين اسم المجال وعنوان IP على الإنترنت. من السهل تذكر اسم المجال (kuqin.com) ، لكن الكمبيوتر لا يتعرف عليه. يجب تحويل الاعتراف بين أجهزة الكمبيوتر إلى عنوان IP. يحتوي كل كمبيوتر على الشبكة على عنوان IP مستقل. يسمى عمل التحويل بين اسم المجال وعنوان IP دقة اسم المجال ، والمعروف أيضًا باسم استعلام DNS. ستستغرق عملية دقة DNS 20-120 ميلي ثانية ، ولن يقوم المتصفح بتنزيل أي شيء تحت اسم المجال حتى ينتهي استعلام DNS. لذلك ، يمكن أن يؤدي تقليل وقت استعلام DNS إلى تسريع سرعة التحميل للصفحة. يوصي Yahoo بالتحكم في عدد أسماء النطاقات الواردة في الصفحة في 2-4 قدر الإمكان. هذا يتطلب خطة جيدة للصفحة الكلية. نحن لا نقوم بعمل جيد في الوقت الحالي ، وقد أدت العديد من أنظمة الإعلان التي تدير النقاط إلى انخفاضنا.

المادة 10: ضغط JavaScript و CSS (Minify JavaScript)

من الواضح أن تضغط على اليسار واليمين من JS و CSS ، مما يقلل من عدد بايت الصفحة. تكون سرعة تحميل الصفحة أسرع بشكل طبيعي إذا كان لها سعة صغيرة. بالإضافة إلى الحد من حجم ، يمكن أن يوفر الضغط أيضًا قدرًا معينًا من الحماية. لقد قمنا بعمل جيد في هذا. تشمل أدوات الضغط الشائعة JSMIN ، ضاغط YUI ، إلخ. بالإضافة إلى ذلك ، مثل http://dean.edwards.name/packer/ ، نوفر لنا أيضًا أداة ضغط مريحة للغاية عبر الإنترنت. يمكنك رؤية فرق السعة بين ملفات JS المضغوطة وملفات JS غير المضغوطة على صفحة الويب jQuery:

بالطبع ، عيب واحد من الضغط هو أن قابلية قراءة الكود قد ولت. أعتقد أن العديد من الأصدقاء في الواجهة الأولى واجهوا هذه المشكلة: إن تأثير النظر إلى Google رائع للغاية ، ولكن عند النظر إلى رمز المصدر الخاص به ، هناك الكثير من الشخصيات المزدحمة معًا ، وحتى أسماء الوظائف تم استبدالها. أنا تفوح منه رائحة العرق! أليس من المريح للغاية للصيانة إذا كان الرمز الخاص بك هو نفسه؟ تتمثل الممارسة الحالية لجميع مواقع Alibaba الصينية في ضغطها على جانب الخادم عند إصدار JS و CSS. بهذه الطريقة يمكننا بسهولة الحفاظ على الكود الخاص بنا.

المادة 11: تجنب إعادة التوجيه

منذ وقت ليس ببعيد ، رأيت مقالة "Internet Explorer وحدود الاتصال" على IEBLOG. على سبيل المثال ، عند إدخال http://www.kuqin.com/ ، سيقوم الخادم تلقائيًا بإنشاء خادم 301 والانتقال إلى http://www.kuqin.com/. يمكنك رؤيته من خلال النظر إلى شريط العناوين للمتصفح. هذا النوع من إعادة التوجيه بشكل طبيعي يستغرق وقتا طويلا أيضا. بالطبع هذا مجرد مثال. هناك العديد من الأسباب لإعادة التوجيه ، ولكن الشيء الذي لا يمكن تغييره هو أنه في كل مرة يتم فيها إضافة إعادة التوجيه ، سيتم إضافة طلب ويب ، لذلك يجب تقليله.

المادة 12: إزالة البرامج النصية المكررة

لا أريد أن أقول هذا ، لكن هذا صحيح أيضًا من منظور الأداء ، ولكن أيضًا من منظور مواصفات الكود. لكن يجب أن أعترف أننا سنضيف بعض المرات التي نضيف فيها بعض التعليمات البرمجية مكررة لأن الرسم البياني سريع. ربما يمكن لإطار عمل CSS الموحد وإطار JS حل مشاكلنا بشكل أفضل. وجهة نظر Xiaozhu صحيحة ، ليس فقط أن تكون غير قابلة للتكرار ، ولكن أيضًا لتكون قابلة لإعادة الاستخدام.

المادة 13: تكوين علامات الكيان (etags) (تكوين etags)

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

المادة 14: اجعل Ajax قابلة للتخطيط

أياكس لا يزال بحاجة إلى تخزين مؤقت؟ عند تقديم طلبات AJAX ، غالبًا ما تحتاج إلى إضافة طابع زمني لتجنب ذاكرة التخزين المؤقت. من المهم أن تتذكر أن غير المتزامن لا يعني فوريًا. تذكر ، حتى لو تم إنشاء Ajax ديناميكيًا ولا يعمل إلا لمستخدم واحد ، فلا يزال من الممكن تخزينه مؤقتًا.