14 мая 2008 в 17:38

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

В первой статье цикла я уже рассматривал скорость работы движка, ответственного за создание и отображение HTML-страницы на экране. Однако, сейчас речь пойдет о несколько другом аспекте, нежели движок CSS-селекторов. Данная серия тестов была посвящена скорости создания отдельного HTML-документа.

Методика



Если в первых двух исследованиях ставилась под вопрос скорость распознавания браузером CSS-правил и их применение, то сейчас интересовал другой вопрос, а именно: как быстро браузер создает DOM-дерево в зависимости от наличия в нем элементов с id или class?

Для этого было подготовлено 3 набора HTML-файлов. Первый содержал 10000 элементов, у которых часть имеет id (количество именованных элементов варьировалось от 50 до 10000). Во втором HTML-файлы были, практически, идентичными, только вместо id имели атрибут class. В третьем наборе в DOM-дереве были только элементы с id (т.е. варьировалось само число элементов). Соответственно, все измерения проводились в скрытом iframe, чтобы избежать отрисовки загружаемой страницы на экране.

читать дальше на webo.in →
Николай Мациевский @sunnybear
карма
331,0
рейтинг 28,0
Технический директор, Айри.рф
Похожие публикации
Самое читаемое Разработка

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

  • 0
    Мне приходилось как-то работать над одним проектом, где достаточно остро вставал вопрос о оптимизации кода для снижения нагрузки на систему пользователя, так вот почему-то до такого казалось бы простого метода наши спецы не додумались..
    Жалко, что только сейчас об этом методе узнал.
    Спасибо за статью.
  • +9
    бороться за 8мс? увольте)
    • 0
      Когда вопрос о нагрузке на машину стоит остро, то использование этого метода в купе с другими может дать вполне ощутимые результаты.
      • 0
        Минуснул кто-то)
        Простите меня великодушно, видимо такую глупость несусветную сморозил. Самому стыдно..
      • 0
        В куппе с другими(аналогичными) будет 12-15mс. И что? Если бы 5-10 сек - тогда да
        • 0
          какими именно "аналогичными"? Речь идет о подходе, а даже не о преимуществах семантической верстке перед табличной
          • 0
            я поддержал not_ice, хабр глучно не туда вставил....
            я не о преимуществах,а о подходе. Если выигрыш на нескольких тысячах ID получается 8мс. То овчинка(даже в купе с другими ухищрениями) абсолютно не стоит выделки. Хотя опыт занятный :)
            • 0
              в данной статье приводятся общие рекомендации для создания высокопроизводительных страниц. Если насобирать эти "8мс на тысячах", получается вполне заметное время. А трудности в использовании class вместо ID никакой — только дело привычки
  • +1
    Это знаете, как разогнать процессор на 10 процентов и получить выигрыш в колчисетве 1 FPS в игре — роли не играет. А за статью спасибо, труд познавательный! :)
    • +1
      а если таких разгонов будет 10 штук? а если 20? речь, собственно, о том, чтобы все эти разгоны найти и, по возможности, как-то автоматизировать :)
      • 0
        А если бы он вместо макарон патроны вёз?!
  • 0
    один из побочных выводов исследования - то, что Safari - адски быстрый браузер, а IE - адски медленный (хоть это и не новость). и, кстати, жаль, что нет FF3, а ведь его релиз-кандидат уже совсем скоро
    • 0
      он у меня "убил" кеширование в Лисе, пришлось все переставлять. Поэтому я пока к нему с недоверием. Выйдет — опробуем по-нормальному.

      И пока еще зреет мысль о создании независимого теста производительности браузеров на основе текущих тестов, будет довольно интересно.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      в этом-то и загвоздка: браузеры создают хеш этих самых ID, чтобы к ним быстро обращаться, а на создание хеша и проверку его целостности уходят драгоценные ресурсы. Изначально такой вывод не предполагался, однако, результаты говорят сами за себя
  • 0
    интересно
  • 0
    Интересно, но бесполезно. То, что class быстрее, чем id - давно известно (еще где-то на w3c читал)..
    Кстати почитайте http://www.artlebedev.ru/tools/technogrette/js/lookup-tables/
    действительно хорошая заметка, я этим способом часто пользуюсь.
    • 0
      здесь
      http://webo.in/articles/habrahabr/23-hig…
      написано больше, и не только об этом. Кеш — да, он спасает, но не всегда... Есть, в частности, грабли при кешировании сложных объектов
  • +2
    Исследование вкупе с выводами потрясают:
    основных советов пока два: уменьшайте DOM-дерево
    Не ешьте на ночь сырых помидоров..
    используйте id только в случае действительной необходимости.
    Избегайте id чтобы для среднего html выиграть 0.0085 секунды на клиентском тазике.
    Это что, такая шутка?
    • 0
      боюсь, Ваш сарказм здесь не очень уместен
      • 0
        А я серьезно. Если статья для тех верстальщиков которые используют кучу id вместо классов, то надо было так и написать (хотя скорее всего js-программер их уже попросил не ставить больше одного id="item" на документ). А то ведь найдутся такие веб-мастерки, которые увидя ваши графики и выводы действительно подумают что id нынче дорог. В итоге, браузеры оптимизируют getElementById, тратят на это 8,5мс, а мы раскусив это будем избегать id, и в конце концов кто-нибудь напишет getElementByClass и будет, не дай бог, еще его юзать.
        • 0
          эта статья — для тех, кто думает :)
        • 0
          Для типичных страниц типичных сайтов борьба class VS id неуместна.

          Но для специфичиских страниц с данными в таблицах, где реально десятки тысяч элементов и для них требуется динамика - это важно.
  • 0
    Для контейнеров и оболочек я использую ID, для внутренностей уже class. Дело в том, что я использую jQuery и мне удобнее обращаться к элементам именно по ID
  • 0
    жжошь,
    удивлен что никто не затеял холивора на тему, что id & class для разных целей
  • +1
    Заголовок "Влияние на getElementsById" поменяйте на "Влияние на getElementById"... очепятко!
  • 0
    не знал что class быстрее id
  • 0
    У меня такой вопрос: я использую id для обозначения узлов дерева, к листьям добираюсь таким способом (утрированно): #id ul li span. Классы я использую только в том случае, когда необходимо один и тот же стиль применить к нескольким элементам.
    И я считаю, что поступаю правильно, создавая такую разметку. Я прав?,)
    • 0
      в общем случае нет. Если ID не нужен для доступа через JavaScript, то лучше его делать class'ом: так будет эффективнее
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    вы, простите, на спичках экономите)

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.