لخص بعض تجارب كتابة CSS التي تعلمتها واستمعت إليها وشاهدتها وطلبتها وكتبت CSS بكفاءة - تحدث عن كفاءة عرض CSS، والتي ترتبط بكفاءة العرض والموارد المستهلكة. جزء منه مكتوب بناءً على فهمي الخاص، ولا يستبعد احتمال وجود أخطاء وسهو، فنحن نرحب بك لتقديم آراء أفضل.
1. إقران قيمة اللون السداسي العشري بالأرقام والحالة
عند كتابة قيم الألوان السداسية العشرية، يمكنك استخدام أحرف صغيرة أو حذفها في 3 أرقام. لا توجد بيانات قاطعة لإثبات ما إذا كانت طريقة الكتابة هذه لها تأثير على كفاءة عرض المتصفح، ولكن المعيار الافتراضي لقيم الألوان السداسية العشرية. هو حرف كبير ورقم مكون من 6 أرقام. إن عدم الرغبة في المخاطرة في المواقف غير المعروفة يقلل من كفاءة العرض.
* مرفوض - اللون:#f3a؛
* يوصى باستخدامه - اللون:#FF33AA؛
2. الفرق بين العرض والرؤية
يتم استخدامها لتعيين أو استرداد ما إذا كان الكائن معروضًا أم لا. عرض الكائنات المخفية لا يحتفظ بالمساحة المادية، كما تحتفظ الرؤية بالمساحة المادية التي تشغلها الكائنات المخفية. عندما يعرض المتصفح المساحة الفعلية المحتلة، يتم استهلاك الموارد.
* مهمل - الرؤية: مخفي؛
* يوصى باستخدام - العرض: لا شيء؛
3. الفرق بين الحدود: لا شيء والحدود: 0؛
على غرار العلاقة بين العرض والرؤية، المساحة ليست محجوزة ومحفوظة على التوالي. المزيد عن border:0; على الرغم من إمكانية إخفاء الحدود، إلا أنها ستحتفظ باستخدام لون الحدود/نمط الحدود لك.
* مرفوض - الحدود:0؛
* يوصى باستخدام - border:none;
4. لا ينبغي تجانب صور الخلفية الصغيرة جدًا.
على الرغم من أن حجم ملف صورة الخلفية بعرض وارتفاع 1 بكسل صغير جدًا، إلا أن عرض لوحة بعرض وارتفاع 500 بكسل يتطلب تكرار التبليط 2500 مرة. يرتبط تحسين كفاءة عرض الصور الخلفية بحجم الصورة وحجمها، ويظل الحجم الأكبر لملف الصورة حوالي 70 كيلو بايت.
* مرفوض - قم بتجانب صور الخلفية التي يقل عرضها وارتفاعها عن 8 بكسل
* يوصى باستخدامه - صورة خلفية ذات حجم وحجم متوسطين
5. مرشحات آي إي
بالإضافة إلى استهلاك الموارد، تواجه مرشحات IE أيضًا مشكلات في التوافق. يوجد فلتر يجعل PNG شفافًا، يمكنك تجنب استخدام هذا الفلتر عن طريق جعل GIF أو JPG يظهران بشكل شفاف. يوصى باستخدام شفافية GIF فقط في IE6، لأن IE7 وما فوق يدعم بالفعل شفافية PNG.
* الرفض، وإساءة استخدام مرشحات IE لا تستهلك الموارد فحسب، بل تسبب أيضًا مشكلات في التوافق.
* يوصى، من الأفضل اختيار طرق أخرى لتجنب استخدام المرشحات.
6. *{margin:0; padding:0;} لتجنب اختلافات نمط المتصفح
يقوم حرف البدل * بتهيئة جميع العلامات، ويستهلك عرض المتصفح موارد معينة. بعض العلامات متماثلة تقريبًا في المتصفحات المختلفة، أو لم يعد يوصى باستخدام بعض العلامات (لأنك لن تستخدمها).
* مهمل، استخدم * حرف البدل
* مرفوض، يجب تضمين جدول زر divspan b والعلامات الأخرى في أحرف البدل للتحكم في أنماط التعبئة الداخلية والخارجية
* يوصى باستخدام أحرف البدل بشكل انتقائي للتحكم في أنماط التعبئة الداخلية والخارجية.
7. لا تقم بإضافة علامات إضافية لوصف الفئة أو المعرف
إذا كان لديك محدد يستخدم المعرف كمحدد مفتاح، فيرجى عدم إضافة أسماء علامات إضافية. نظرًا لأن المعرف فريد، فلا يجب تقليل كفاءة المطابقة لسبب غير موجود.
* مهمل - زر#backButton { }
* مهمل - .menu-left #newMenuIcon { }
* يوصى باستخدام - #backButton { }
* يوصى باستخدام - #newMenuIcon { }
8. حاول اختيار الفئة الأكثر خصوصية لتخزين المحدد
أحد أكبر أسباب تقليل كفاءة النظام هو أننا نستخدم عددًا كبيرًا جدًا من المحددات في فئات العلامات. من خلال إضافة فئات إلى العناصر، يمكننا تقسيم الفئات إلى فئات بحيث لا نضطر إلى إضاعة الوقت في مطابقة عدد كبير جدًا من المحددات لعلامة واحدة.
* مهمل - Treeitem[mailfolder="true"] > Treerow > Treecell { }
* يوصى باستخدام - .treecell-mailfolder { }
9. تجنب المحددات السليلة
المحدد السليل هو المحدد الأكثر استهلاكًا للموارد في CSS. إنها حقًا كثيفة الاستخدام للموارد، خاصة عندما يستخدم المحدد فئة تسمية أو فئة عامة. في كثير من الحالات، ما نريده حقًا هو محدد فرعي. ما لم يُنص على ذلك صراحةً، يُحظر تمامًا استخدام المحددات التابعة في UI CSS.
* مهمل - شجرة رأس الشجرة، شجرة الصف، خلية { }
* أفضل، ولكن لا يزال لا يعمل (راجع المقالة التالية) - Treehead > Treerow > Treecell { }
10. لا تقم بتضمين محددات فرعية في فئات التسمية
لا تستخدم المحددات الفرعية في فئات التصنيف. وبخلاف ذلك، سيؤدي كل ظهور لعنصر إلى زيادة وقت المطابقة. (خاصة إذا كان من المرجح أن يكون المحدد متطابقًا)
* مهمل - رأس الشجرة > صف الشجرة > خلية الشجرة { }
* يوصى باستخدام - .treecell-header { }
11. انتبه إلى استخدام كافة المحددات الفرعية
استخدم المحددات الفرعية بعناية. إذا كان بإمكانك التفكير في طريقة لعدم استخدامه، فلا تستخدمه. على وجه الخصوص، تستخدم أشجار وقوائم RDF بشكل متكرر محددات فرعية، مثل هذه.
* مهمل - Treeitem[IsImapServer="true"] > Treerow > .tree-folderpane-icon { }
تذكر أنه يمكن نسخ خصائص RDF في القوالب! باستخدام هذا، يمكننا نسخ سمات RDF على عناصر XUL الفرعية التي نريد تغييرها بناءً على تلك السمة.
* يوصى باستخدام - .tree-folderpane-icon[IsImapServer="true"] { }