id vs class

oleglerh · 28.04.2013

Subject сказав(ла):
А в чем вообще суть всего этого? Просто поменять бг у всех ячеек? Доказать то, что и так все знают (ID быстрее ClassName),

Суть в том что мне посоветовали не использовать id для идентификации элементов в таблице - даже если я этот через этот id не буду задавать стили.
И судя по тому что я читал, многие вообще никогда не используют id, вместо него задают уникальный идентификатор класса.

Единственное преимущество класса - то что их может быть несколько на странице, работают при этом в среднем более чем в 100 раз медленнее чем id.

Изменения background - это только для тестирования, может быть любое другое применение.

Но если на странице большое количество элементов и предвидится многократное обращение к ним из JavaScript - то замена class на id может существенно ускорить работу скриптов.

Даже если для нескольких объектов нужно изменить стиль, то со стороны производительности выгоднее к каждому из них индивидуально обратится по id чем однократным обращением по классу изменить их общий стиль.

Subject · 28.04.2013

А зачем вам id или class для обращения к ячейке? Просто, не понятно для чего все это. Что нужно сделать?

oleglerh · 28.04.2013

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

Тесты что я написал - просто интересно стало насколько быстро работают id и class.

Кстати, если элементов на странице немного, то разница в скорости не такая разительная - не более чем в 10 быстрее работает id, реальные тормоза начинаются когда классов на странице больше тысячи.

Subject · 28.04.2013

Какой именно доступ? Повесить обработчик для клика?

oleglerh · 29.04.2013

У меня в каждой ячейке таблицы может быть два слоя текста и несколько изображений - все перекрывающиеся.
Что именно в ячейке будет зависит от различных событий.
Реализовал так:

Код:

<td>
  <div style="position: relative; z-index:1">
     <div id="1" style="position: absolute; z-index:3"><img src=circle.gif alt=""></div>
     <div id="2" style="position: absolute; z-index:2; left: 27px; top: -13px;"><img src=diamond.gif alt=""></div>
     <div id="3" style="position: absolute; z-index:5"><br>вывод через div с перекрытием</div>
  </div>
background text
</td>

Во вложении - схема того как это будет выглядить.

AS0kol · 29.04.2013

Для Del. Ситуация, когда нет элементов на странице ни с нужным id, ни с классом.

Наоборот.

Итого, ты либо балабол и баран, либо тролль. В любом случае выпей йаду.

Del · 29.04.2013

oleozy сказав(ла):
Если классов на странице больше 5 тысяч - getElementsByClassName более чем в 100 раз медленнее.

>5000 div на странице встречается очень редко. Обычно их раз в 10 меньше.
А в каком браузере вы получили разницу в 100 раз?

oleozy сказав(ла):
Но если на странице большое количество элементов и предвидится многократное обращение к ним из JavaScript - то замена class на id может существенно ускорить работу скриптов.
Даже если для нескольких объектов нужно изменить стиль, то со стороны производительности выгоднее к каждому из них индивидуально обратится по id чем однократным обращением по классу изменить их общий стиль.

Надо проверять.
У вас же по-идее одиночные изменения - взяли какой-то блок, поменяли. Потом через время - опять взяли какой-то, поменяли. Т.е. не все сразу. А если все сразу - опять-таки надо делать тесты, смотреть что будет быстрее.

AS0kol сказав(ла):
Для Del. Ситуация, когда нет элементов на странице ни с нужным id, ни с классом.
Наоборот.
Итого, ты либо балабол и баран, либо тролль. В любом случае выпей йаду.

Водички попей, успокойся

Что ты мне хочешь доказать показывая разницу в 0.1 миллисекунды?

Давайте писать реальные тесты и проверять, раз не верите.

AS0kol · 29.04.2013

Del сказав(ла):
>5000 div на странице встречается очень редко. Обычно их раз в 10 меньше.
А в каком браузере вы получили разницу в 100 раз?

В предыдущем посте я показывал "пересiчну" страницу из реального продукта, где в DOM обычной страницы находится более 2000 элементов.

Del сказав(ла):
Водички попей, успокойся
Что ты мне хочешь доказать показывая разницу в 0.1 миллисекунды?

Давайте писать реальные тесты и проверять, раз не верите.

Разница кагбэ в 5-10 раз. Кстати, анальный секс появился так же - разница ж небольшая по расстоянию.

Тест я уже показал в реальном проекте. Да и не вижу смысла тратить время на споры о дурацких вещах. Еще могу согласиться, что в "наколеночных интернет магазинах за бутылку пива" можно втулить идентификатор в class и забыть о нем или разглагольствовать как это круто и правильно.

oleglerh · 29.04.2013

Я тестировал в специально созданном тесте.
До 100 классов на странице - разница с id символическая.
500 - раз в 7 быстрее id
5000 - более чем в 100 раз быстрее id
проверял в файер фокс, опера и хром.
В Хроме все операции в среднем в 2 раза быстрее чем в других браузерах, и в тесте в котором получается элемент по классу и тут же меняется стиль разница незначительная, а если сохранить референс в массив - раз в 60 быстрее получение через id (в том тесте где 5000 классов).

Del · 29.04.2013

oleozy сказав(ла):
Я тестировал в специально созданном тесте.
До 100 классов на странице - разница с id символическая.
500 - раз в 7 быстрее id
5000 - более чем в 100 раз быстрее id
проверял в файер фокс, опера и хром.
В Хроме все операции в среднем в 2 раза быстрее чем в других браузерах, и в тесте в котором получается элемент по классу и тут же меняется стиль разница незначительная, а если сохранить референс в массив - раз в 60 быстрее получение через id (в том тесте где 5000 классов).

Я видел ваш тест на прошлой странице. В нём страница была в quirks mode (без doctype) и у блоков были некорректные значения id (начинались с цифры).

Я исправил его и чуть доработал: добавил нормализацию стилей, упростил сами стили и js, добавил jquery выборку и вариацию с div а не td.

Вот 4 теста:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Результаты:

Код:

Chrome
-------------------------------------------
td#id Paint:    74+54+59+55+54+52+55+54+55+58
[B]getElementById:[/B] 10+9+8+7+10+11+8+8+7+9 /10 = [B]8.7[/B]
$(#id):         27+24+19+19+18+18+18+20+17+19
[B]getElementById & change style:[/B] 59+42+45+49+41+42+42+47+41+47 /10 = [B]45[/B]
$(#id) & change style:         84+82+82+89+79+77+76+74+78+89 

td.class Paint:         73+59+56+57+55+57+66+57+56+55
[B]getElementsByClassName:[/B] 15+16+13+11+11+12+12+13+13+10 /10 = [B]12.6[/B]
$(.class):              4985+5378+5223+5262+4850+5061+5000+5072+4927+5028
[B]getElementsByClassName & change style:[/B] 44+43+49+45+40+42+42+43+41+43 /10 = [B]43.2[/B]
$(.class) & change style:              87+86+84+83+85+97+83+87+84+86

div#id Paint:   102+56+57+58+59+61+57+60+57+58
[B]getElementById:[/B] 8+9+8+9+7+7+10+8+7+7 /10 = [B]8[/B]
$(#id):         23+18+19+18+19+19+20+18+19+18
[B]getElementById & change style:[/B] 42+49+46+48+42+46+41+48+43+46 /10 = [B]45.1[/B]
$(#id) & change style:         80+81+83+73+75+77+75+75+75+77

div.class Paint:        74+58+61+59+58+59+58+58+60+63
[B]getElementsByClassName:[/B] 12+11+13+11+12+11+13+13+14+13 /10 = [B]12.3[/B]
$(.class):              4649+5148+5033+5053+4703+4990+4739+4913+5023+4931
[B]getElementsByClassName & change style:[/B] 41+43+43+41+40+42+41+41+46+42 /10 = [B]42[/B]
$(.class) & change style:              84+90+85+84+85+85+87+87+86+85

Firefox
-------------------------------------------
td#id Paint:    46+46+18+44+45+45+18+44+24+44
[B]getElementById:[/B] 3+3+3+3+4+4+4+3+5+4 /10 = [B]3.6[/B]
$(#id):         30+30+30+30+29+29+29+30+38+29
getElementById & change style: 256+256+254+258+260+268+260+262+263+259
$(#id) & change style:         118+122+125+119+122+139+123+120+117+118

td.class Paint:         42+43+41+16+42+43+43+42+42+42
[B]getElementsByClassName:[/B] 9+9+9+9+8+9+9+9+9+9 /10 = [B]8.9[/B]
$(.class):              2772+2596+2775+2569+2829+2421+2925+2431+2934+2436
getElementsByClassName & change style: 3153+3721+3112+3165+3070+3118+3103+3019+3093+3004
$(.class) & change style:              711+979+598+750+539+767+721+619+639+587

div#id Paint:   45+45+46+43+44+45+46+46+44+45
[B]getElementById:[/B] 4+4+4+4+3+4+4+3+4+4 /10 = [B]3.8[/B]
$(#id):         31+30+30+29+29+29+29+29+29+29
getElementById & change style: 255+273+277+255+253+254+259+258+252+260
$(#id) & change style:         118+118+123+116+117+120+121+118+117+133

div.class Paint:        43+45+42+41+43+41+41+44+42+42
[B]getElementsByClassName:[/B] 10+12+8+10+9+11+9+9+9+9 /10 = [B]9.6[/B]
$(.class):              2976+3549+2477+3099+3086+3082+3098+3073+3078+3105
getElementsByClassName & change style: 3165+3199+4105+3653+3248+3215+3188+3275+3148+3102
$(.class) & change style:              762+404+654+859+735+803+696+729+656+682

Надо ещё потестировать для адекватного (~500) блоков и прогнать во всех браузерах, но предварительно мы видим следующее:
1. Абсолютная разница по времени, при обращении что по уникальному id, что по уникальному классу, даже при огромном количестве блоков обходимых за раз - невелика.
2. Относительная разница тоже невелика, ни о каких "в 10 раз" речь даже не идёт.
3. Смена стилей по .class в Chrome происходит даже быстрее чем по id

Теперь стоит потестировать при реальном кол-ве блоков (~500), изменить скорости смены стилей заменой класса, добавлением класса-модификатора и т.д.

AS0kol сказав(ла):
Да и не вижу смысла тратить время на споры о дурацких вещах. Еще могу согласиться, что в "наколеночных интернет магазинах за бутылку пива" можно втулить идентификатор в class и забыть о нем или разглагольствовать как это круто и правильно.

Ещё раз, для тех кто в танке: речь о недопустимости использования #id для навешивания стилей и о том что производительности .class достаточно для того чтобы в общем случае использовать .class и в js ради удобства разработки, поддержки и развития.
В "наколеночных интернет магазинах за бутылку пива" как раз можно и #id везде тулить и каскады до неба писать. Я рассказываю как нужно делать по-нормальному.

oleglerh · 29.04.2013

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

BAV_Lug · 30.04.2013

Очень часто приходится вешать обработчики на конкретные элементы которые имеют общие классы (например те-же кнопки в одном стиле). Добавляю id и точно знаю на каком элементе висит обработчик. Можно конечно добавлять к каждому такому элементу свой класс, но ИМХО потеряется красота и читаемость кода. Потому как прийдется каждый раз вспоминать нахрена тут этот класс, и что он не оказывает накакого видимого воздействия на элемент.

AS0kol · 30.04.2013

Del сказав(ла):
Ещё раз, для тех кто в танке: речь о недопустимости использования #id для навешивания стилей и о том что производительности .class достаточно для того чтобы в общем случае использовать .class и в js ради удобства разработки, поддержки и развития.
В "наколеночных интернет магазинах за бутылку пива" как раз можно и #id везде тулить и каскады до неба писать. Я рассказываю как нужно делать по-нормальному.

AS0kol сказав(ла):
А причем вес селектора к id? (в контексте того, что к элементу не подвязывается никакой css посредством #id)

У нормальных людей, к коим я себя причисляю, даже и мыслей не возникает о прикручивании стилей через id.

AS0kol сказав(ла):
Я не понимаю зачем нужно использовать class не по назначению, когда для этого есть id. Более того, есть id, который для этого и предназначен и за уникальностью, которого следит браузер и другие инструменты, если используются (у меня, например, IDE и фреймворк ругаются). Опять таки они работают как раз с id, но не class.

И это ты называешь "делать по-нормальному"?

За такой код я бы уе..ал, если бы кто-то у нас коммитил такое в svn.

Del · 30.04.2013

BAV_Lug сказав(ла):
Очень часто приходится вешать обработчики на конкретные элементы которые имеют общие классы (например те-же кнопки в одном стиле). Добавляю id и точно знаю на каком элементе висит обработчик. Можно конечно добавлять к каждому такому элементу свой класс, но ИМХО потеряется красота и читаемость кода. Потому как прийдется каждый раз вспоминать нахрена тут этот класс, и что он не оказывает накакого видимого воздействия на элемент.

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

AS0kol сказав(ла):
У нормальных людей, к коим я себя причисляю, даже и мыслей не возникает о прикручивании стилей через id.

Расскажите, как вы навешиваете стили для одного, конкретного блока на странице.

AS0kol сказав(ла):
Я не понимаю зачем нужно использовать class не по назначению, когда для этого есть id.

Я уже объяснял выше и на предыдущей странице.

AS0kol сказав(ла):
И это ты называешь "делать по-нормальному"?
За такой код я бы уе..ал, если бы кто-то у нас коммитил такое в svn.

Аргументы?

AS0kol · 30.04.2013

Del сказав(ла):
Аргументы?

Ок. На скриншоте смотрим первую же строку.

Код:

var b = Date.now(); console.log("td#id Paint - " + (b - a)+ "ms");

Что такое "a"?
Форматирование кода? Не, не слышал.
Несколько statement'ов на одной строке. Очень читаемо, а отлаживать так ваще.
Понятные имена переменных?

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Разбитие когда на функции? Смысл уважать людей, которые это будут читать, пускай ломают глаза и моск.
$('#el'+i); Это я так подозреваю jQuery? Но мы ж не за него рассуждаем. Более того, я им не пользовался и не собираюсь. И ковыряться в обфусцированной каше для того, чтоб понять, что стоит за $() не собираюсь. Вроде ж речь шла за document.getElementById vs document.document.getElementsByClassName.

Не удивлюсь, что в резюме ты пишешь "

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

".

Del · 30.04.2013

AS0kol сказав(ла):
Что такое "a"?
Форматирование кода? Не, не слышал.
Несколько statement'ов на одной строке. Очень читаемо, а отлаживать так ваще.
Понятные имена переменных? А зачем, браузер и так поймет.
Разбитие когда на функции? Смысл уважать людей, которые это будут читать, пускай ломают глаза и моск.

Это testcase. Ты понимаешь в чём разница между кодом для тестирования и реальной разработкой? Какие функции? Может мне надо было ещё css и js отдельно вынести, а jQuery через CDN подключить? По-делу сказать нечего, начинаем придираться к пробелам и именам временных тестовых переменных?

Мне нужен был testcase замерить производительность. На прошлой странице oleozy выложил написанный им. Я исправил в нём ошибки, подрехтовал. Переписывать там имена переменных на t1,t2 или timeStart,timeEnd не стал, это временные тестовые переменные.

AS0kol сказав(ла):
$('#el'+i); Это я так подозреваю jQuery? Но мы ж не за него рассуждаем. Более того, я им не пользовался и не собираюсь. И ковыряться в обфусцированной каше для того, чтоб понять, что стоит за $() не собираюсь. Вроде ж речь шла за document.getElementById vs document.document.getElementsByClassName.

Не удивлюсь, что в резюме ты пишешь "хорошо разбираюсь в чужом коде".

Не пишу, но могу

У тебя видно не получилось, я поясню:
Да, это jQuery. $() - это алиас для jQuery(). Возвращает коллекцию элементов по css-селектору. Код не обфусцирован. Вот тут азы объясняются:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

И я не увидел ответов на обсуждение по-теме:

Del сказав(ла):
Надо ещё потестировать для адекватного (~500) блоков и прогнать во всех браузерах, но предварительно мы видим следующее:
1. Абсолютная разница по времени, при обращении что по уникальному id, что по уникальному классу, даже при огромном количестве блоков обходимых за раз - невелика.
2. Относительная разница тоже невелика, ни о каких "в 10 раз" речь даже не идёт.
3. Смена стилей по .class в Chrome происходит даже быстрее чем по id

Del сказав(ла):
Расскажите, как вы навешиваете стили для одного, конкретного блока на странице.

AS0kol · 30.04.2013

id vs class

Вкладення