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

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

 


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) * {}

 

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

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

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

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

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

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

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

      بیشتر معرفیش جنبه فان داشت.

  1. سلام چنتا سوال
    چرا ؟! کلا از id در سی اس اس استفاده نکنید.
    بخاطر همون کارایی!

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

    1. دلیل استفاده نکردن از id اینه که فقط میشه برای یک عنصر سی اس اس نوشت انطوری ولی کلاس می تونه مطعلق به چندتا عنصر باشه. که این باعث میشه کدها تکرار نشن. و توی پروژها، مخصوصا پروژه های بزرگ به مشکل نخوریم.

      – بله به اون باید کلاس بدید.

      در کل همه این بحث ها بیشتر در مورد پروژه های بزرگ و نگهداری پروژه ها مطرح میشه. یک سایت کوچیک و یک صفحه ساده رو هرطور دوست دارید بزنید.

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

  3. راستی. چرا توصیه میکنید از آی دی استفاده نکنیم؟ مقاله ای در این مورد معرفی میکنید؟
    درمورد انتخواب گر * هم مقاله ای معرفی میکنید؟ چرا استفاده نکنیم و دقیقا چه خصوصیاتی داره؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *