Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Тестируем скорость выборки css селекторов

Каждый раз как говорю о том, что нужно оптимизировать css селекторы, не использовать каскады, то слышу в ответ – “так и так быстро работает, тем более на небольшом количестве элементов”. И тут сложно не согласиться – действительно быстро, если немного элементов, более того вы скорее всего и не сталкивались толком с проблемами медлительности из-за кривых стилей.

Ребята, но это же не значит, что можно на это забить 🙂 Проблемы со стилями не приходят внезапно – они накапливаются и нужно заботиться об оптимизации всегда. Разумеется я не призываю делать измерять какой цикл работает быстрее for или while, это, наверное, через чур, но css же у вас будет до фиг. Потом вам его не исправить, проще будет выкинуть и написать заново.

Вы не забывайте, что то что ваш сайт нормально работает на десктопе, то смартфоны его так же потянут. Кстати, вы сайты на смартфонах не забываете тестировать? Я не про эмуляцию хрома, а про реальные устройства, не жульничайте.

Я не сомневаюсь, что каждый поступит так как сам считает нужным, мы же все красавчики 😉

В конце покажу вам разницу во времени выборки. Тестировать будем 3 каскадных селектора:

За выводами прошу вот сюда (откройте консольку для результатов): Тест выборки селекторов

css-cascade-test

Поделиться:
comments powered by Disqus