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

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

    Методика



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

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

    читать дальше на webo.in →
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 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
                                      вы, простите, на спичках экономите)

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