بهبود کارایی انتخابگرها

چطور انتخابگر زیر را می خوانید؟

 

nav menu li a {
  /* ...اول یه نفس عمیق, خوب تمرکز کنید */
}

 

حال فکر می کنید مرورگر که وظیفه تجزیه (parse) کردن فایل CSS را دارد چطور انتخابگر بالا را می خواند؟

اکثر ما این انتخابگر را بصورت زیر تحلیل می کنیم:

همه عناصر nav پیدا می شود سپس داخل هر کدام همه عناصر menu و داخل همه آنها هر چه عنصر li هست و بعد از آن تمام عناصر a داخل آنها انتخاب می شوند. صحیح؟

 
 

 

سوال بعد: از بین دو انتخابگر زیر کدامیک مرورگر را بیشتر به زحمت می اندازد؟

 

.navigation a {
  /* 1 */
}

header nav menu li .nav__item {
  /* 2 */
}

 

اگر دوباره مثل قبل تحلیل کنیم جواب شما انتخابگر شماره دو خواهد بود. اما باز هم…

 

 

نحوه خواندن انتخابگرها توسط مرورگرها

در واقع مرورگرها شبیه ما فارسی زبان ها عمل می کنند و انتخابگر ها را از راست به چپ می خوانند و نه از چپ به راست!

حال دو مورد قبل را به این روش یعنی راست به چپ بررسی کنید. خواهید دید که گزینه اول هزینه بیشتری برای مرورگر دارد, چرا که مرورگر مجبور است تمام عناصر a را در مرحله اول پیدا کند سپس بررسی کند که آیا آنها پدر یا اجدادی دارند که کلاس navigation داشته باشد یا نه. ولی در مورد دوم در مرحله اول کافی است فقط دنبال کلاس nav__item باشد سپس بررسی را در مورد اجدادش انجام دهد. که به مراتب تعداد انتخاب های کمتری وجود خواهد داشت. (البته یک حالت عمومی را در نظر داریم)

انواع انتخابگرها

در زیر انواع انتخابگرها به ترتیب کارایی آنها آمده است. به عنوان مثال انتخابگر id سریع تر از همه انتخابگرها عمل می کند. (لطفا از id استفاده نکنید در مطالب بعدی بطور کامل شرح میدم.)

1. ID: #header
2. Class: .promo
3. Type: div
4. Adjacent sibling: h2 + p
5. Child: li > ul
6. Descendant: ul a
7. Universal: *
8. Attribute: [type="text"]
9. Pseudo-classes/-elements: a:hover

انتخابگر کلیدی

در قسمت نوشتن انتخابگرها آخرین قسمتی که نوشته می شود انتخابگر کلیدی نام دارد.

 

nav a {}

 

در بالا a انتخابگر کلیدی است. یا در مثال زیر img, p و title. نیز انتخابگرهای کلیدی هستند:

 

a img,
div > p,
h1 + .title {
  
}

 

با توجه به نحوه خواندن انتخابگرها توسط مرورگر که از سمت راست به چپ می باشد باید در نوشتن انتخابگر کلیدی دقت کافی را داشته باشیم.

چند توصیه جیبی

♦ کلا از id در سی اس اس استفاده نکنید.

♦ از نوشتن انتخابگرهای تو در تو در حد امکان اجتناب کنید. بیشتر از دو سطح ننویسید:

 

.level-one .level-two {
/* بیشتر نه دیگه خواهشا */  
}

 

♦ از ریست کردن به روش زیر خودداری کنید:

 

* {
  margin: 0;
  padding: 0;
}

 

♦ و در کل استفاده از normalize.css به جای ریست کردن توصیه می شود.

برای بررسی نکات ریز این بحث و توصیه های اینگونه به مطالب قسمت بیشتر بخوانید رجوع کنید. اما در نهایت یک توصیه کلی وجود دارد که می تواند بسیار به کار آید و آن هم این است که سعی کنید از کلاس ها استفاده کنید.

مثلا بجای اینکه بنوسید:

 

nav > menu > li { }

 

از یک کلاس ساده استفاده کنید که به مراتب سرعت اجرایی بهتری دارد:

 

.nav-item { }

 

توجه داشته باشید که تاکید بنده بر استفاده از کلاس ها دو جنبه دارد. یک جنبه بحث کارایی است که در این مطلب بررسی شد.

جنبه دوم و مهم تر نوشتن کدی که قابل توسعه و نگهداری است می باشد که در مطالب بعدی به طور کامل مورد بحث قرار می دهیم.

نکته اخلاقی

دفعه بعدی که همکار شما CSSی شبیه به مورد پایین نوشت و با یک غرور خاصی که حاکی از خود حرفه ای بینی بود به شما نگاه کرد, لطفا بدون هیچگونه حرکت فیزیکی همکار عزیزتان را به این مطلب راهنمایی کنید :)

 

input[name="tabs"]:nth-of-types(1):checked ~ .tabs > div:nth-child(1) {}

div:nth-of-type(3) ul:last-child li:nth-of-type(odd) * {}

 

نکته دیگر اینکه دغدغه اصلی سریع بودن انتخابگرها بر عهده مهندسین پیاده سازی مرورگرها می باشد اما ما هم به عنوان طراح باید دقت نظر لازم را در این موضوع داشته باشیم.

سرعت انتخابگرها در گذشته خیلی مطرح بود اما به مرور زمان مرورگرها بهبود پیدا کردند و دیگر خیلی این بحث مطرح نمی شود. ولی با بوجود این در سایت های خیلی بزرگ باید مراقب انتخابگر ها باشیم.

یک ابزار جالب برای بررسی انتخابگرهای اعمال شده بر روی یک صفحه وب طراحی شده است که بررسی آن خالی از لطف نیست:

در مطالب قسمت بیشتر بخوانید می توانید آمار آزمایش های انجام شده بر روی انتخابگرها و سرعت عملکرد آنها را بررسی کنید.

بیشتر بخوانید

• Optimizing CSS: ID Selectors And Other Myths
• selectors bloat and expensive styles