#perfmatters: أساليب استخدام الأدوات الخاصة بفناني النينجا
إنّ معرفة طريقك حول أدوات التطوير هي مفتاح أن تصبح خبيرًا في الأداء. لقد تطرق كولت خلال الركائز الثلاث للأداء: الشبكة والحوسبة والاستعراض، وقدّم جولة حول المشكلة الرئيسية في كل منطقة والأدوات المتوفرة للعثور عليها والقضاء عليها.
- يمكنك الآن إنشاء ملف شخصي لمتصفِّح Chrome على جهاز Android باستخدام "أدوات مطوّري البرامج" التي تعرفها وتفضّلها من الكمبيوتر المكتبي.
- حلقة التكرار هي: جمع البيانات، وتحقيق الرؤية، واتخاذ الإجراءات.
- امنح الأولوية لمواد العرض التي تكون على مسار العرض الحرج في صفحاتك.
- تجنب الطلاء؛ إنها باهظة الثمن.
- تجنَّب اضطراب الذاكرة وتنفيذ الرموز البرمجية خلال الأوقات الحرجة في تطبيقك.
#perfmatters: تحسين أداء الشبكة
يمثل الشبكة ووقت الاستجابة 70% من إجمالي وقت تحميل صفحة الموقع. وهذه نسبة كبيرة، ولكنها تعني أيضًا أن أي تحسينات تجريها هناك ستحقق فوائد كبيرة للمستخدمين. في هذا الحديث، استعرضت إيليا التغييرات الأخيرة في Chrome التي من شأنها تحسين وقت التحميل، بالإضافة إلى بعض التغييرات التي يمكنك إجراؤها في بيئتك للمساعدة في الحفاظ على الحد الأدنى من تحميل الشبكة.
- يتضمّن Chrome M27 برنامجًا جديدًا ومحسّنًا لجدولة الموارد.
- لقد أصبح Chrome M28 أسرع في مواقع SPDY.
- تم إجراء إصلاح شامل على ذاكرة التخزين المؤقت البسيطة في Chrome.
- يوفّر SPDY / HTTP/2.0 تحسينات كبيرة في سرعة النقل. هناك وحدات SPDY للبالغين متاحة لأنظمة nginx وApache وJetty (إلى ثلاث وحدات فقط).
- بروتوكول QUIC هو بروتوكول جديد وتجريبي تم تطويره استنادًا إلى بروتوكول UDP. ولا يزال هذا البروتوكول متاحًا، ولكنه يعمل على تحقيق الفوز للمستخدمين.
#perfmatters: تنسيق وعرض 60 لقطة في الثانية
إنّ تسجيل 60 لقطة في الثانية في مشاريعك يرتبط مباشرةً بتفاعل المستخدمين وهو أمر بالغ الأهمية لنجاحها. في هذا الحديث، تحدثت نات وتوم عن عملية العرض في Chrome، وبعض الأسباب الشائعة لإسقاط الإطارات وكيفية تفاديها.
- يبلغ طول الإطار 16 ملي ثانية. يحتوي على JavaScript وحسابات الأنماط والتلوين والإنشاء.
- الرسم extremely. هجوم الطلاء هو المكان الذي تكرر فيه أعمال الطلاء باهظة الثمن بدون داعٍ.
- يتم استخدام الطبقات لتخزين العناصر المرسومة مؤقتًا.
- يمكن أن تؤدي معالِجات الإدخال (أدوات معالجة عجلة اللمس وعجلة الماوس) إلى إيقاف الاستجابة، لذا تجنَّبها إن أمكن. حيث لا يمكنك الاحتفاظ بها إلى الحد الأدنى.
#perfmatters: تطبيقات الويب الفورية على الأجهزة الجوّالة
يشير مسار العرض الحرج إلى أي شيء (JavaScript وHTML وCSS والصور) يتطلبه المتصفح قبل أن يتمكن من بدء طلاء الصفحة. إنّ إعطاء الأولوية لتسليم الأصول على مسار العرض الحرج أمر لا بد منه، لا سيّما بالنسبة إلى مستخدمي الأجهزة المحدودة الشبكة، مثل الهواتف الذكية على الشبكات الخلوية. وتحدّث "براين" عن تجربة الفريق في Google لتحديد مواد العرض على الموقع الإلكتروني "إحصاءات PageSpeed" وترتيبها حسب الأولوية، حيث تم نقلها من وقت تحميل يبلغ 20 ثانية إلى ما يزيد قليلاً عن ثانية واحدة.
- يمكنك إزالة عناصر JavaScript وCSS التي تحظر العرض.
- امنح الأولوية للمحتوى المرئي.
- تحميل النصوص البرمجية بشكل غير متزامن
- يمكنك تقديم العرض الأولي من جهة الخادم بتنسيق HTML وتعزيزه باستخدام JavaScript.
- قلل من محتوى CSS الذي تحظر العرض، بحيث يتم عرض الأنماط المطلوبة فقط لعرض إطار العرض الأولي، ثم عرض الباقي.
- تُعدّ معرّفات الموارد المنتظمة (URI) للبيانات الكبيرة المضمّنة في لغة CSS لحظر العرض ضارة لأداء العرض، لأنّها تحظّر الموارد التي لا تؤدي فيها عناوين URL للصور إلى الحظر.