#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 والعمليات الحسابية للأنماط والطلاء والإنشاء.
- الطلاء باهظ الثمن جدًا. لعبة Paint Storm هي المكان الذي تكرر فيه أعمال الطلاء الباهظة الثمن بدون داعٍ.
- يتم استخدام الطبقات لتخزين العناصر المرسومة مؤقتًا.
- يمكن أن تؤدي معالِجات الإدخال (أدوات معالجة اللمس وعجلة الماوس) إلى إيقاف سرعة الاستجابة. يجب تجنبها إذا أمكن. الحالات التي لا يمكنك فيها الإبقاء عليها إلى الحد الأدنى.
#perfmatters: تطبيقات الويب الفورية للجوّال
يشير مسار العرض الحرج إلى أي شيء (JavaScript أو HTML أو CSS أو الصور) يحتاجه المتصفّح قبل أن يتمكن من بدء عرض الصفحة. إنّ إعطاء الأولوية لتسليم مواد العرض على مسار العرض الحرج أمر لا بد منه، وخاصةً بالنسبة إلى المستخدمين الذين يستخدمون أجهزة مقيَّدة بالشبكة، مثل الهواتف الذكية على شبكات الجوّال. تحدّث "براين" عن الخطوات التي اتّبعها الفريق في Google لتحديد مواد العرض لموقع "إحصاءات PageSpeed" الإلكتروني وتحديد أولوياتها، ما ساهم في زيادة وقت التحميل من 20 ثانية إلى أكثر من ثانية واحدة.
- التخلص من ملفات JavaScript وCSS التي تحظر العرض
- أولوية المحتوى المرئي
- حمِّل النصوص البرمجية بشكل غير متزامن.
- عرض طريقة العرض الأولية من جانب الخادم بتنسيق HTML ومضاعفتها باستخدام JavaScript
- الحدّ من محتوى CSS الذي تحظر العرض وتقديم الأنماط اللازمة فقط لعرض إطار العرض الأولي، ثم عرض الباقي.
- إنّ معرّفات الموارد المنتظمة (URI) للبيانات الكبيرة المضمّنة في CSS التي تحظر العرض تكون ضارة لأداء العرض. تحظر الوصول إلى الموارد حيث لا تؤدي عناوين URL للصور إلى حظر.