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