كيفية كتابة CSS أفضل مع الأداء في الاعتبار
في منشور اليوم ، سوف نفكر في اختيارات الكود التي يمكننا اتخاذها في CSS لتحسين أداء الموقع. ولكن ، قبل أن نتعمق في هذه الخيارات ، دعونا أولاً نلقي نظرة سريعة وموجزة على صفحة الويب التي تقدم سير العمل من أجل التركيز علىالمناطق الإشكالية (الأداء الحكيم) التي يمكن حلها عبر CSS.
فيما يلي التدفق التقريبي للعمليات التي أجراها المستعرض بعد إنشاء شجرة DOM:
- إعادة حساب النمط (وجعل إنشاء شجرة). يقوم المستعرض بحساب الأنماط التي سيتم تطبيقها على العناصر الموجودة في شجرة DOM. يتم إنشاء شجرة التجسيد فيما بعد أثناء تجاهل العقد (العناصر) من شجرة DOM التي لن يتم تقديمها (العناصر ذات
عرض لا شيءوتلك التي (العناصر الزائفة). - تخطيط (ويعرف أيضًا باسم Reflow). باستخدام النمط المحسوب من قبل ، يحسب المستعرض موضع وهندسة كل عنصر في الصفحة.
- إعادة رسم. بمجرد تعيين التخطيط ، يتم رسم وحدات البكسل على الشاشة.
- طبقات مركبة. أثناء إعادة الطلاء ، قد تتم اللوحة في طبقات مختلفة بشكل مستقل ؛ ثم يتم دمج هذه الطبقات في النهاية معًا.
الآن ، دعنا ننتقل إلى ما يمكننا القيام به في المراحل الثلاث الأولى من العملية لكتابة أكواد CSS ذات الأداء الأفضل.
1. تقليل أسلوب الحسابات
كما ذُكر سابقًا ، في مرحلة "إعادة حساب النمط" ، يقوم المتصفح بحساب الأنماط التي سيتم تطبيقها على العناصر. للقيام بذلك ، يقوم المستعرض أولاً باكتشاف جميع المحددات في CSS التي تشير إلى عقدة عنصر محدد في شجرة DOM. بعد ذلك ، يمر كل قواعد النمط في تلك المحددات ويقرر القواعد التي سيتم تطبيقها فعليًا على العنصر.
لتجنب حسابات أسلوب مكلفة, تقليل محددات معقدة ومتداخلة بعمق بحيث يسهل على المتصفح معرفة العنصر الذي يشير إليه المحدد. هذا يقلل من الوقت الحسابي.
طرق أخرى لاستخدام تشمل تقليل عدد قواعد النمط (حيثما كان ذلك ممكنا), إزالة CSS غير المستخدمة وتجنب التكرار و التجاوزات, حتى لا يضطر المستعرض إلى المرور بنفس النمط مرارًا وتكرارًا خلال عمليات حساب النمط.
2. الحد من التدفقات
عمليات إعادة التدفق أو التخطيط في عنصر ما هي عمليات "باهظة الثمن" للغاية ، ويمكن أن تكون مشكلة أكبر عندما يكون للعنصر الذي مر بتغييرات التخطيط عدد كبير من الأطفال (منذ تتدفق التدفقات إلى أسفل التسلسل الهرمي).
يتم تشغيل عمليات إعادة التدفق عن طريق تغييرات التخطيط على عنصر ما ، مثل التغييرات في الخصائص الهندسية مثل الطول أو حجم الخط ، إضافة أو إزالة الفئات إلى العناصر ، تغيير حجم النافذة ، تفعيلها :يحوم, يتغير DOM بواسطة JavaScript ، إلخ.
مثلما هو الحال في حساب النمط ، لتقليل التدفقات, تجنب محددات معقدة و أشجار دوم العميقة (مرة أخرى ، هذا لمنع الإفراط في المتتالية من التدفق).
إذا كان عليك تغيير أنماط تخطيط مكون في صفحتك, استهداف أنماط العنصر في أدنى مستوى في التسلسل الهرمي للعناصر أن المكون مصنوع من. هذا بحيث لا تؤدي تغييرات التخطيط (تقريبًا) إلى أي تدفقات أخرى.
إذا كنت تقوم بتنشيط عنصر يمر بتغييرات التخطيط, أخرجه من تدفق الصفحة بواسطة وضعه بشكل سخيف, حيث إن إعادة التدفق في العناصر ذات الموضع المطلق لن يؤثر على بقية العناصر في الصفحة.
لتلخيص:
- العناصر المستهدفة الأقل في شجرة DOM عند إجراء تغييرات التخطيط
- اختر عناصر ذات وضع مطلق للتخطيط لتغيير الرسوم المتحركة
- تجنب تنشيط خصائص التخطيط كلما أمكن ذلك
3. تقليل إعادة الطلاء
يشير إعادة الرسم إلى رسم وحدات البكسل على الشاشة ، وهي عملية مكلفة تمامًا مثل Reflow. يمكن تشغيل إعادة الطلاء عن طريق "إعادة التدفق" و "تمرير الصفحة" والتغييرات في الخصائص مثل اللون والرؤية والتعتيم.
لتجنب الدهانات المتكررة والضخمة, استخدام أقل من الخصائص التي تسبب إعادة الطلاء مكلفة مثل الظلال.
إذا كنت تقوم بتنشيط خصائص عنصر يمكنه تشغيل Repaint بشكل مباشر أو غير مباشر ، فسيكون ذلك ذا فائدة كبيرة إذا كان هذا العنصر في طبقته الخاصة منع prcoess اللوحة من التأثير على بقية الصفحة والتسبب في تسريع الأجهزة. في تسريع الأجهزة ، سيتولى GPU مهمة إجراء تغييرات الحركة في الطبقة ، مما يوفر وحدة المعالجة المركزية للعمل الإضافي أثناء تسريع العملية.
في بعض المتصفحات, غموض (بقيمة أقل من 1) و تحول (قيمة أخرى غير لا شيء) يتم ترقيتها تلقائيًا إلى طبقات جديدة ، ويتم تطبيق تسريع الأجهزة للرسوم المتحركة والانتقالات. تفضيل هذه الخصائص للرسوم المتحركة هو جيد بالتالي.
بقوة تعزيز عنصر لطبقة جديدة والدخول في تسريع الأجهزة للرسوم المتحركة ، هناك نوعان من التقنيات:
- إضافة
convert: translate3d (0، 0، 0)؛إلى العنصر ، خداع المستعرض لتحريك تسريع الأجهزة للرسوم المتحركة والانتقالات. - أضف ال
سوف يتغيرخاصية للعنصر ، والتي تُعلم المستعرض بالخصائص التي من المحتمل أن تتغير في العنصر في المستقبل. ملحوظة: لدى سارة سويدان مقالة متعمقة ومفيدة للغاية حول هذا الموضوع في موقع Dev.Opera.
لتلخيص:
- تجنب الأساليب باهظة الثمن التي تسبب Repaints
- تسعى إلى تعزيز طبقة وتسريع الأجهزة للرسوم المتحركة والتحولات الضخمة.
خذ ملاحظة
(1) حتى الآن ، لم نلمس تخفيض حجم ملف CSS. لقد ذكرنا أن تقليل قواعد النمط (وعناصر DOM) يؤدي إلى تحسن كبير في الأداء بسبب كم سيكون على المتصفح العمل أقل على عملية حساب الأنماط. نتيجة لتخفيض هذا الرمز ، قم بكتابة محددات أفضل وحذف CSS غير المستخدم, حجم الملف سوف ينخفض تلقائيا.
(2) من المستحسن أيضا أن عدم إجراء الكثير من التغييرات التبعية على أنماط العنصر في JavaScript. بدلاً من ذلك ، أضف فئة إلى العنصر (باستخدام جافا سكريبت) الذي يحتفظ بالأنماط الجديدة لإجراء هذه التغييرات - وهذا يمنع التدفقات غير الضرورية.
(3) سوف ترغب في ذلك تجنب تخطيط سحق كذلك (عمليات إعادة التدفق القسرية المتزامنة) التي تنشأ بسبب الوصول إلى وتعديل خصائص تخطيط العناصر التي تستخدم JavaScript. اقرأ المزيد حول كيفية قتل هذا الأداء هنا.
