class или id? Полезно для разработчиков.

Тема в разделе "Веб-дизайн", создана пользователем bork75, 20 май 2011.

Модераторы: zek24
  1. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Из статьи:

    Создание документа с class обходится меньшей кровью, чем с id (в общем случае, от 2 до 10% выигрыша). Если принять во внимание, что element.class-селекторы отрабатывают быстрее, чем #id на те же 10%, то общий выигрыш при использовании в документе классов перед идентификаторами составит порядка 15%. В абсолютном значении эти цифры не так велики: для Centrino Duo 1.7 получается цифра примерно в 0,0085мс на 1 идентификатор (в среднем, 3 CSS-правила и 1 употребление).

    Для документа со 100 элементами выигрыш может составить почти 1мс, для документа с 1000 — 8,5мс! Замечу, что средняя страница в интернете имеет 500–1000 элементов (проверить, сколько элементов на странице, можно просто запустив javascript:alert(document.getElementsByTagName('*').length) в адресной строке браузера на какой-либо открытой странице), поэтому это уже то, за что можно побороться.

    Полный текст статьи:
    http://webo.in/articles/habrahabr/38-css-efficiency-tests-3/
     
  2. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    Данные трех летней давности, так что сейчас, с современными технологиями (подпиленные браузеры и мощные сервера), это не актуально. ИМХО.
    Да и что такое 8,5мс? Это же меньше мгновения.
     
  3. porsche2

    porsche2

    Регистр.:
    18 ноя 2007
    Сообщения:
    667
    Симпатии:
    210
    Для увлекающихся оптимизацией всего, что под руку попадется, мгновения очень важны :) на webo.in даже фавикон оптимизировали (сжимали), несмотря на то, что он обычно кэшируется по максимуму.

    Оптимизация - это всегда хорошо, если при полной автоматизации и без фанатизма. Клиентская оптимизация мало относится к мощным серверам, а допиленные браузеры - это бабушка надвое сказала, для браузера важно только правильно понимать и обрабатывать HTTP заголовки, сейчас же браузеры кэшируют все что видят, а это не всегда нужно и ВМ вынуждены делать костыли (например с JS, Ajax), только для новых браузеров - это новые костыли :)

    Если есть вариант с выигрышем в 8,5 мс, его и нужно использовать, т.к. это может компенсировать проигрыш в чем-нибудь другом, на что повлиять нет возможности, например в скорости подгрузки рекламных кодов и их обработке.

    P.S. Информация хоть и старая, но актуальная
     
  4. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    забудьте про оптимизацию селекторов, она совершенно не нужна (однако здравый смысл никто не отменял и это не говорит о том, что можно использовать * в больших количествах).

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

    zzzkabanzzz Создатель

    Регистр.:
    15 июн 2011
    Сообщения:
    56
    Симпатии:
    4
    Полмилисикунды дела не решат! И вообще при верстке id и class играют совершенно разную роль, так что выбирайте, то что вам надо!
     
  6. mcdir

    mcdir

    Регистр.:
    6 ноя 2007
    Сообщения:
    202
    Симпатии:
    37
    ...Firefox2, IE6, IE7, Opera 9.5 ... против Firefox, IE9 (10), Opera 11 и т.д. + сравнивать кроссовки с ботинками это сильно


    короче 1 не актуально + ни какого прироста + будет доп проблемы при кодинге js которая съест весь мииииизерный выйгришь даже если он будет
     
  7. stogov

    stogov

    Регистр.:
    21 авг 2007
    Сообщения:
    255
    Симпатии:
    91
    А всё так, потому что:


    Id
    1. Элемент может иметь только один id.
    2. Определённый id может присутствовать на странице только один раз.

    Class
    1.Можно применять один и тот класс к разным элементам.
    2.Элемент может иметь несколько классов.
     
  8. Miraage

    Miraage Angular/Laravel

    Регистр.:
    3 июн 2008
    Сообщения:
    230
    Симпатии:
    51
    вы параноики. еще сделайте оптимизацию, уменьшив названия классов и идентификаторов.

    лучше вот чем займитесь:
    -иконки для соц.сетей(и т.п.) склеивайте в спрайты и юзайте map/area
    -склеивание js/css (библиотека Minify, см. кодегуглком)
    -тег script(если он у вас один - жму руку) суейте перед </body>
    -не сжимайте картинки средствами html(т.е. если у картинки размеры 200x100, а вы в теге img сжимаете в 150x75), это замедляет загрузку страницы.

    вот это даст видимую скорость при загрузке страницы
     
  9. stogov

    stogov

    Регистр.:
    21 авг 2007
    Сообщения:
    255
    Симпатии:
    91
    Кстати, автору вопроса будет любознательно это прочитать!!!

    http://www.alexilin.ru/difference-between-id-and-class/

    Полностью раскрывается разница между ID и Классом
     
  10. rombikr

    rombikr Постоялец

    Регистр.:
    9 июн 2011
    Сообщения:
    50
    Симпатии:
    4
    Вынести все картинки, js, css на другой сервер и все проблем не будет. Как бы разделить, php исполняемые скрипты на одном серваке, а все стольное (картинки, js, css и прочая подгружаемая хрень) на другом. Так мы уменьшаем количество обращений к основному серверу и снижаем нагрузку.