تصوير جانتين دورنبوس في أنسبلاشهذا ليس بأي حال من الأحوال نقدًا للزملاء ، ولكنه مجرد قائمة قصيرة بالأشياء المهمة التي تعلمتها بنفسي حول CSS مؤخرًا.ليس سراً أن العديد من المطورين لا يفكرون في CSS. من السهل ملاحظة ذلك من خلال المناقشات على الإنترنت وفي المحادثات مع الأصدقاء والزملاء. ومع ذلك ، نحصل على الكثير من المعرفة على وجه التحديد من الزملاء ، وأحيانًا أفهم أنه لم يخبرني أحد عن بعض الفروق الدقيقة في CSS ، لأن الناس ببساطة لا يقضون وقتًا في دراسة هذا الموضوع.
لإصلاح ذلك ، قمت ببعض الأبحاث وأعدت قائمة قصيرة من المفاهيم التي أجدها مفيدة ومفيدة لفهم أفضل لكتابة CSS وكتابتها.
هذه القائمة هي بالتأكيد ليست شاملة. أنه يحتوي فقط على الجديد الذي تعلمته في الأيام القليلة الماضية وما أريد مشاركته ، وفجأة سيساعد شخص آخر.مصطلحات
كما هو الحال مع أي لغة برمجة ، يتم استخدام مصطلحات معينة لوصف المفاهيم. كونها لغة برمجة ، لا يختلف CSS ، لذلك من المهم أن تتعلم بعض المصطلحات من أجل تبسيط الاتصال والتطور الشخصي فقط.
السليل الموحد
هل رأيت الفجوة بين المحددات في طريقتك؟ في الواقع ، له اسم ، إنه
مُجمع تنازلي.
السليل الموحدتخطيط ، تقديم والتكوين
ترتبط هذه المصطلحات بالعرض في المتصفح ، لكنها مهمة لأن بعض خصائص CSS تؤثر على الخطوات المختلفة لخط أنابيب العرض.
1. تخطيط
خطوة التصميم هي حساب مقدار المساحة التي يشغلها عنصر ما على الشاشة. يعني تغيير خاصية "التنسيق" في CSS (على سبيل المثال ، العرض والارتفاع) أنه سيتعين على المتصفح التحقق من جميع العناصر الأخرى وإعادة رسم الصفحة ، أي إعادة رسم المناطق المتأثرة وتداخلها.
2. الرسم (الطلاء)
تملأ هذه العملية بالبكسل جميع الأجزاء المرئية للعناصر (الألوان والحدود وما إلى ذلك). يتم رسم العناصر عادة على طبقات متعددة.
لا يؤثر تغيير خاصية "الطلاء" على التخطيط ، لذلك يتخطى المستعرض خطوة التخطيط ، ولكن لا يعرضها على أي حال.
غالبًا ما يستغرق التقديم معظم الوقت عند التقديم.
3. التكوين (مركب)
التكوين هو الخطوة التي يجب على المستعرض بها رسم الطبقات بالترتيب الصحيح. نظرًا لأن بعض العناصر قد تتداخل ، في هذه المرحلة ، يتحقق المستعرض من أن العناصر معروضة بهذا الترتيب.
إذا قمت بتغيير خاصية CSS ، والتي لا تؤثر على التخطيط أو التقديم ، فلابد وأن يقوم المتصفح بإجراء التكوين فقط.
لمزيد من المعلومات حول العمليات التي تشغل العديد من خصائص CSS ، راجع
مشغلات CSS .
أداء CSS
محدد النسل يمكن أن يكون مكلفا
اعتمادًا على حجم التطبيق الخاص بك ، يمكن فقط استخدام محدد السليل دون تعليمات محددة ضرب الموارد بشدة. سيقوم المتصفح بالتحقق من الامتثال لكل عنصر من عناصر السليل ، لأن العلاقة لا تقتصر على العنصر الأصل والطفل.
على سبيل المثال:
مثال محدد السليلسيتعين على المتصفح تقييم جميع الروابط على الصفحة قبل الانتقال إلى تلك الموجودة داخل قسم #
#nav .
هناك طريقة أكثر فعالية تتمثل في إضافة محدد محدد
.navigation-link لكل
<a> رابط داخل قسم
#nav .
المتصفح يقرأ محددات من اليمين إلى اليسار
يبدو أنه كان عليّ أن أعرف هذا الشيء المهم من قبل ، لكنني لم أعرف ... عند تحليل CSS ، يقوم المتصفح بتحليل المحددات من اليمين إلى اليسار.
النظر في المثال التالي:
يقرأ المتصفح من اليمين إلى اليسارالخطوات التالية:
- مطابقة الكل
<a> على الصفحة ؛
- العثور على جميع
<a> المضمنة في <li> ؛
- خذ مباريات وتضييقها إلى تلك الموجودة في
<ul> ؛
- أخيرًا ، قم بتصفية التحديد أعلاه إلى تلك الموجودة في العنصر مع الفئة
.container .
بالنظر إلى هذه الخطوات ، نرى أنه كلما كان المحدد الصحيح أكثر تحديدًا ، كلما كان المستعرض أكثر فاعلية قادراً على تصفية وتطبيق خصائص CSS.
لتحسين أداء المثال أعلاه ، يمكننا استبدال
.container ul li a بإضافة شيء مثل
.container-link-style على
<a> العلامة نفسها.
إذا كان ذلك ممكنًا ، لا تقم بتغيير التنسيق.
تتطلب التغييرات في بعض خصائص CSS تحديث التصميم بأكمله.
على سبيل المثال ، تتطلب الخصائص الهندسية
width height top left إعادة حساب التخطيط وتحديث شجرة العرض.
إذا قمت بتغيير هذه الخصائص على العديد من العناصر ، فسيستغرق الأمر وقتًا طويلاً لحساب وتحديث موضعها / حجمها.
كن حذرا مع تقديم التعقيد
تعد بعض خصائص CSS (مثل عدم وضوح) أغلى من غيرها عندما يتعلق الأمر بالعرض. فكر في طرق أكثر فعالية لتحقيق نفس النتيجة.
خصائص CSS باهظة الثمن
بعض خصائص CSS أغلى من غيرها. هذا يعني أن التقديم يستغرق وقتًا أطول.
بعض الخصائص باهظة الثمن:
border-radiusbox-shadowfilter:nth-childposition: fixed
هذا لا يعني أنه لا يمكن استخدامها على الإطلاق ، ولكن عليك أن تفهم أنه إذا كان عنصر ما يستخدم بعض هذه الخصائص وتم تقديمه مئات المرات ، فسيؤثر ذلك على الأداء.
ترتيب (ترتيب)
ترتيب الأمور
دعونا نلقي نظرة على مثل CSS:
ثم انظر إلى كود HTML:
لا يهم ترتيب محددات HTML ، لكن في CSS.
طريقة جيدة لتقييم أداء CSS هي استخدام أدوات المطور في المستعرض.
في Chrome أو Firefox ، يمكنك فتح أدوات مطور البرامج ، والانتقال إلى علامة تبويب الأداء وتسجيل ما يحدث عند تحميل صفحتك أو تفاعلك معها.
أداء علامة التبويب لقطة شاشة في Chromeموارد
استكشاف الموضوع لهذا المقال ، صادفت بعض الأدوات مثيرة للاهتمام حقا ، المدرجة أدناه:
CSS Triggers هو موقع ويب يعرض بعض ميزات CSS وكيف تؤثر على الأداء.
Uncss هي أداة لإزالة الأنماط غير المستخدمة من CSS.
Css -شرح هي أداة صغيرة تشرح محددات CSS.
Fastdom عبارة عن أداة قراءة / كتابة لمجموعة DOM لتسريع أداء التصميم.
هذا كل شيء الآن! آمل أن يكون هذا منطقي!