sunnybear 14 мая 2008 в 17:38

Разгоняем CSS-селекторы: id против class, раунд второй

1 мин

5.3K

Клиентская оптимизация*

+37

Комментарии 31

westfild 14 мая 2008 в 19:13

Мне приходилось как-то работать над одним проектом, где достаточно остро вставал вопрос о оптимизации кода для снижения нагрузки на систему пользователя, так вот почему-то до такого казалось бы простого метода наши спецы не додумались..
Жалко, что только сейчас об этом методе узнал.
Спасибо за статью.

not_ice 14 мая 2008 в 19:42

бороться за 8мс? увольте)

westfild 14 мая 2008 в 19:53

Когда вопрос о нагрузке на машину стоит остро, то использование этого метода в купе с другими может дать вполне ощутимые результаты.

westfild 15 мая 2008 в 00:13

Минуснул кто-то)
Простите меня великодушно, видимо такую глупость несусветную сморозил. Самому стыдно..

pvasili 12 июн 2008 в 15:21

В куппе с другими(аналогичными) будет 12-15mс. И что? Если бы 5-10 сек - тогда да

sunnybear 12 июн 2008 в 15:25

какими именно "аналогичными"? Речь идет о подходе, а даже не о преимуществах семантической верстке перед табличной

pvasili 12 июн 2008 в 20:25

я поддержал not_ice, хабр глучно не туда вставил....
я не о преимуществах,а о подходе. Если выигрыш на нескольких тысячах ID получается 8мс. То овчинка(даже в купе с другими ухищрениями) абсолютно не стоит выделки. Хотя опыт занятный :)

sunnybear 12 июн 2008 в 20:39

в данной статье приводятся общие рекомендации для создания высокопроизводительных страниц. Если насобирать эти "8мс на тысячах", получается вполне заметное время. А трудности в использовании class вместо ID никакой только дело привычки

LFK 14 мая 2008 в 19:50

Это знаете, как разогнать процессор на 10 процентов и получить выигрыш в колчисетве 1 FPS в игре — роли не играет. А за статью спасибо, труд познавательный! :)

sunnybear 14 мая 2008 в 19:55

а если таких разгонов будет 10 штук? а если 20? речь, собственно, о том, чтобы все эти разгоны найти и, по возможности, как-то автоматизировать :)

bmc 15 мая 2008 в 11:05

А если бы он вместо макарон патроны вёз?!

phantasm 14 мая 2008 в 20:26

один из побочных выводов исследования - то, что Safari - адски быстрый браузер, а IE - адски медленный (хоть это и не новость). и, кстати, жаль, что нет FF3, а ведь его релиз-кандидат уже совсем скоро

sunnybear 14 мая 2008 в 21:30

он у меня "убил" кеширование в Лисе, пришлось все переставлять. Поэтому я пока к нему с недоверием. Выйдет опробуем по-нормальному.

И пока еще зреет мысль о создании независимого теста производительности браузеров на основе текущих тестов, будет довольно интересно.

BaBL 14 мая 2008 в 20:40

До первого теста, к сожалению, еще не добрался, но вот то, что ID работает медленнее, чем class для меня стало новостью. Спасибо. Вообще странно, учитывая что для элемента присущ уникальный идентификатор ID и может быть целый набор классов, а сами классы могут объединять сколь угодно много элементов, выборка ID, по идее, должна бы происходить существенно быстрее.

sunnybear 14 мая 2008 в 21:28

в этом-то и загвоздка: браузеры создают хеш этих самых ID, чтобы к ним быстро обращаться, а на создание хеша и проверку его целостности уходят драгоценные ресурсы. Изначально такой вывод не предполагался, однако, результаты говорят сами за себя

oknechirik 14 мая 2008 в 21:32

интересно

3hrek 14 мая 2008 в 21:51

Интересно, но бесполезно. То, что class быстрее, чем id - давно известно (еще где-то на w3c читал)..
Кстати почитайте http://www.artlebedev.ru/tools/technogrette/js/lookup-tables/
действительно хорошая заметка, я этим способом часто пользуюсь.

sunnybear 14 мая 2008 в 22:12

здесь
http://webo.in/articles/habrahabr/23-hig…
написано больше, и не только об этом. Кеш да, он спасает, но не всегда... Есть, в частности, грабли при кешировании сложных объектов

denver 15 мая 2008 в 00:42

Исследование вкупе с выводами потрясают:

основных советов пока два: уменьшайте DOM-дерево

Не ешьте на ночь сырых помидоров..

используйте id только в случае действительной необходимости.

Избегайте id чтобы для среднего html выиграть 0.0085 секунды на клиентском тазике.
Это что, такая шутка?

sunnybear 15 мая 2008 в 00:43

боюсь, Ваш сарказм здесь не очень уместен

denver 15 мая 2008 в 01:02

А я серьезно. Если статья для тех верстальщиков которые используют кучу id вместо классов, то надо было так и написать (хотя скорее всего js-программер их уже попросил не ставить больше одного id="item" на документ). А то ведь найдутся такие веб-мастерки, которые увидя ваши графики и выводы действительно подумают что id нынче дорог. В итоге, браузеры оптимизируют getElementById, тратят на это 8,5мс, а мы раскусив это будем избегать id, и в конце концов кто-нибудь напишет getElementByClass и будет, не дай бог, еще его юзать.

sunnybear 15 мая 2008 в 09:16

эта статья для тех, кто думает :)

Postum 15 мая 2008 в 13:15

Для типичных страниц типичных сайтов борьба class VS id неуместна.

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

lifestar 15 мая 2008 в 09:55

Для контейнеров и оболочек я использую ID, для внутренностей уже class. Дело в том, что я использую jQuery и мне удобнее обращаться к элементам именно по ID

127 15 мая 2008 в 11:00

жжошь,
удивлен что никто не затеял холивора на тему, что id & class для разных целей

Olegbl4 15 мая 2008 в 13:09

Заголовок "Влияние на getElementsById" поменяйте на "Влияние на getElementById"... очепятко!

vini 15 мая 2008 в 13:32

не знал что class быстрее id

XXXVII 15 мая 2008 в 16:30

У меня такой вопрос: я использую id для обозначения узлов дерева, к листьям добираюсь таким способом (утрированно): #id ul li span. Классы я использую только в том случае, когда необходимо один и тот же стиль применить к нескольким элементам.
И я считаю, что поступаю правильно, создавая такую разметку. Я прав?,)