أعترف أنني لا أفكر كثيرًا في هذا السؤال... ما مدى كفاءة CSS التي نكتبها، وما مدى سرعة عرض المتصفح؟
هذا ما يجب أن يهتم به مطورو المتصفح (يتم تحميل الصفحات بشكل أسرع، وسيكون المستخدمون أكثر سعادة). لدى موزيلا مقالة: حول أفضل الممارسات . بالطبع، تشعر Google أيضًا بقلق بالغ بشأن هذه المشكلة، ولديها أيضًا مقالة مثل: تحسين عرض المتصفح .
دعونا نلقي نظرة على ما يدعون إليه بشكل أساسي، ثم نناقش مدى تطبيقه العملي.
من اليمين إلى اليسار
أحد المبادئ المهمة لكيفية قراءة المتصفحات لمحددات CSS الخاصة بك هو أنها تقرأها من اليمين إلى اليسار. هذا يعني أنه بالنسبة لمحدد مثل ul > li a[title="home"]، سيتم قراءة a[title="home"] أولاً. يُطلق على هذا الجزء عادةً اسم "محدد المفاتيح" (هل يمكن أن يطلق عليه "محدد الهدف" -_-!) الجزء الأخير من المحدد هو أيضًا التسمية المحددة.
معرفات الهوية هي الأكثر كفاءة، والعالمية هي الأبطأ
هناك أربعة محددات للهدف: المعرف والفئة والعلامة والشخصية العالمية. دعونا نلقي نظرة على كفاءة كل منهما:
#التنقل الرئيسي { } /* المعرف (الأسرع) */
body.home #page-wrap { } /* المعرف */
.التنقل الرئيسي { } /* الفئة */
ul li a.current { } /* الفئة *
ul { } /* العلامة */
ul li a { } /* العلامة */
* { } /* عالمي (الأبطأ) */
#content [title='home'] /* Universal */ ثم نجمع بين مفهومي المحددات من اليمين إلى اليسار والمحددات المستهدفة، ويمكننا أن نعرف أن المحدد التالي ليس فعالاً:
#main-nav > li { } /* يبدو سريعًا ولكنه في الواقع بطيء جدًا*/
على الرغم من أن هذا الأمر مربك بعض الشيء... نظرًا لأن المعرفات هي الأكثر كفاءة، يمكن للمتصفحات العثور بسرعة على li من خلال المعرفات. ولكن الحقيقة هي أن علامة li تتم قراءتها أولاً.
لا تقم بتعديله باستخدام العلامات
لا تفعل هذا حتى موتك:
ul# التنقل الرئيسي { }
تعتبر بطاقات الهوية فريدة من نوعها، لذا لا تحتاج إلى تزيينها بالعلامات، مما يجعلها أقل كفاءة.
لا تستخدمه لتعديل الفئات إذا كان بإمكانك تجنب ذلك. الفئة ليست فريدة من نوعها، لذلك من الناحية النظرية يمكنك استخدامها في علامات مختلفة. إذا أردت، يمكنك استخدام العلامات للتحكم في أنماط مختلفة، لذلك قد تحتاج إلى تعديلات على العلامات (على سبيل المثال: li.first)، لكن القليل من الأشخاص يفعلون ذلك، لذا لا تفعل ذلك.
لا يوجد شيء أسوأ على الإطلاق من استخدام المحدد السليل
ديفيد حياة:
المُحدِّد السليل هو المُحدِّد الأكثر تكلفة في CSS، وهو مكلف للغاية - خاصةً عند وضعه بعد العلامات والعالميات.
تمامًا مثل الأشياء التالية، فهو سرطان مطلق للكفاءة:
نص HTML ul li a { }
يعد فشل المحدد في العرض أكثر كفاءة من عرض المحدد
لست متأكدًا مما إذا كان هناك أي دليل أفضل على ذلك، لأنه إذا كان لديك الكثير من المحددات التي لا يمكن العثور عليها في ورقة أنماط CSS، فقد يبدو الأمر غريبًا، ولكن من المهم ملاحظة ذلك من اليمين إلى اليسار لإعادة صياغة المحدد وبمجرد عدم العثور عليه، يتوقف عن المحاولة. ومع ذلك، إذا تم العثور عليه، فسوف يستغرق الأمر المزيد من الجهد لشرحه.
فقط فكر في سبب كتابة المحدد بهذه الطريقة
فكر في هذا:
#main-navigation li a {font-family: Georgia, Serif }
ربما لا تحتاج إلى البدء باستخدام محدد (إذا كنت تريد تغيير الخط فقط). قد يكون هذا أكثر كفاءة:
#main-navigation {font-family: Georgia, Serif }
التطبيق العملي
هل نقشت أيضًا مقالة Mozilla المذكورة سابقًا؟ لقد مرت عشر سنوات. الحقيقة هي أن أجهزة الكمبيوتر أصبحت أبطأ مما كانت عليه قبل عشر سنوات (لا يعني ذلك أنني أسيء فهمها، أو أن المؤلف يريد أن يقول إن الويب الحالي أصبح أكثر تعقيدًا). أشعر أن هذه الأشياء كانت تؤخذ على محمل الجد في ذلك الوقت. قبل عشر سنوات، كنت فتى وسيمًا يبلغ من العمر 21 عامًا، بالطبع، لم أكن أعتقد أنني سأعرف أي شيء عن CSS هناك. لذلك لا أستطيع أن أخبركم عن الوضع السابق... ولكن أعتقد أن السبب وراء عدم أخذ مسألة تقديم الكفاءة على محمل الجد هو أنها لم تكن مشكلة كبيرة على الإطلاق.
إليك بعض آرائي: بغض النظر عن الأمر، فإن الأشياء المذكورة أعلاه منطقية، ويمكنك القيام بذلك وفقًا للطريقة المذكورة أعلاه، لأنها لا تحد من إنتاج CSS الخاص بك. لكن ليس عليك أن تكون دوغمائيًا جدًا. إذا كنت تسعى إلى الكمال ولم تفكر في هذه الأشياء من قبل، فقد حان الوقت لإعادة النظر في بعض الأساليب التي كتبتها من قبل لمعرفة ما إذا كان هناك مجال للتحسين. إذا لم تجد أن عرض موقع الويب الخاص بك بطيء بشكل واضح، فلا توليه الكثير من الاهتمام، فقط انتبه إليه أكثر في العمل المستقبلي.
بسرعة فائقة والتطبيق العملي صفر
نحن نعلم أن المعرفات هي أدوات التحديد الأكثر كفاءة. عندما تريد زيادة سرعة العرض إلى الحد الأقصى، يمكنك تكوين معرف لكل علامة فردية ثم استخدام هذه المعرفات لكتابة الأنماط. سيكون ذلك سريعًا للغاية ومثير للسخرية للغاية. والنتيجة هي دلالات سيئة للغاية ويصعب للغاية الحفاظ عليها. لا يجب أن ترى هذا يتم حتى في القلب. أعتقد أن هذا بمثابة تذكير بعدم التخلي عن الدلالات وقابلية الصيانة من أجل CSS الفعال.
شكرًا لجيسون بودوين على مراسلتي عبر البريد الإلكتروني بخصوص هذه الفكرة، إذا كان أي شخص يعرف المزيد عن هذه الأشياء، أو إذا كان لديك نصائح إضافية تستخدمها في نفس السياق، فلنسمعها.
بالمناسبة، نظرًا لاستخدام محددات CSS بواسطة العديد من مكتبات JavaScript، فإن العناصر المذكورة أعلاه لا تزال سارية، ولا يزال محدد المعرف هو الأسرع، والمحددات التابعة والأشياء المشابهة تكون أبطأ.
ملاحظة : دعونا نرى من يجرؤ على استخدام أكثر من محددات السلالة N. . . هناك أيضًا أشخاص يعترضون على استخدامي لبطاقة الهوية. . . واو هاها. . .