Разгоняем CSS-селекторы. Часть 2: транзитивность

[@ega]

Если кто то и тут напишет: "Спасибо, очень полезная статья" (с) — буду очень сильно ржать.

[@sunnybear]

:) была ведь статья про спам в комментариях недавно.

Тут исследование для продвинутых разработчиков, для них и полезное. А для горе-верстальщиков, которым что div'ами наворачивать, что таблицами с распорками — все едино, тут, естественно, ничего интересного нет.

[@neuotq]

http://habrahabr.ru/blog/webdev/37922.ht… Дальше еще смешнее.: http://habrahabr.ru/blog/webdev/37922.ht…

[@Over]

Далее выяснялось, насколько в браузерах оптимизирована транзитивность по идентификаторам:
#id1
#id2 #id1
#id3 #id1
#id3 #id2 #id1

совершенно глупый тест. идентификатор должен на странице быть уникален, поэтому такие конструкции никогда неприменимы

[@sunnybear]

вы знаете, есть примеры, когда их нужно применить, например, чтобы переписать правило
#id1 div
нужно будет воспользоваться
#id1 div#id2
как это ни странно

[@Over]

продемонстрируйте примерчик, когда #id1 div не работает.

[@sunnybear]

обменялись минусами? :) соглашусь, изначально приведенный пример, скорее всего, неверен. Однако, есть такой случай

#test1 .div

.div#test2

#test1 #test2

третье правило переписывает второе, а работает, в целом, быстрее (если смотреть на результаты тестов относительно выборки по классами и идентификаторам для каждого брузера).

Пример здесь

Могу предположить, что выборка по двум-трем идентификаторам в некоторых случаях будет побыстрее, чем по дереву тегов/классов

[@z6Dabrata]

Допустим у нас есть два дива #container1 и #container2 и див #element1 можно перекидывать в любой из них драг-н-дропом. И в зависимости от того, где находится #element1 надо его подкрасить поразному )

[@vithar]

Применимы. Например #id2 #id1 это #about-page #footer против #footer на остальных страницах.

[@vithar]

Спасибо за проделаный труд, очень полезная статья.

[@sunnybear]

рад, что на этот раз без дополнительных комментариев :)

[@vithar]

Я ещё не прочитал до конца и не осмыслил всё, может и будут комментарии.

[@Urevic]

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

За цифры спасибо, но выводы у вас странные.

[@sunnybear]

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

[@klierik]

2sunnybear
скажите,п ожалуйста, почему, к примеру, строка

>>div a#id1 1506 10572 341 156 116

имеет 4и выделеных значения?

[@sunnybear]

потому что этот селектор в Opera, Safari и IE отрабатывает быстрее аналогов

[@klierik]

тогда почему сдесь выделено жирным:
#id2 #id1 1559 33235 320 169 130
если это самое большое значение...
и что, в данном случае, несет в себе термин "аналог" ?

[@sunnybear]

там, где Вы указали, жирным не выделено.

Выделяется меньшее время для каждого браузера в группе из 4 селекторов. Всего для каждого браузера выделено 4 времени из 16, всего для каждой группы селекторов есть 5 выделенных значений.

Всего выделенных значений: 4 группы Х 5 браузеров = 20

[@klierik]

ага. понял. весьма благодарен.
далее такой вопрос: скажите, пожалуйста, как именно велся подсчет времени?

[@sunnybear]

об этом подробно написано в первой статье
http://webo.in/articles/habrahabr/19-css…
ставится метка времени до объявления стилей и засчитывается разница после окончания HTML-кода

[@LimeOrange]

Как бы не очень корректно ставить в одну линейку stable и beta версии браузеров, ага. Это я намекаю на Firefox 2 и Opera 9.5, которая всё ещё бета. Может тогда стоит подключить ещё Firefox 3-4, Safari 3.1 и IE8 ?

[@sunnybear]

Firefox 2 — бета? Вообще браузеры рассматривались исходя из их распространенности. Могу еще сказать, что IE8 сильно тормозил на идентификаторах (почти как Opera).

[@LimeOrange]

Если вы вдруг не в курсе, Opera 9.5 - сейчас пока ещё бета. :) А последняя stable версия Opera - 9.26
Было бы неплохо увидеть здесь ещё и результаты теста в stable версии Оперы, хотя бы post factum, просто ради интереса.

[@sunnybear]

9.5 бета, но прогонять тесты еще раз в течение получаса мне не очень хочется. Мои внутренние ощущения подсказывают, что ситуация не изменится кардинально :)

[@vithar]

Изменится.

[@sunnybear]

ключевое слово "кардинально". У меня просто не стоит 9.26. Кто-то прогнал вроде под Оперой тесты (судя по задержкам в логах :) — может выложит сюда результаты?

[@scorp13]

Скорость CSS-селекторов — существенна ли разница в их эффективности?. В 2018 году для браузеров разница в скорости обработки несущественна.