Ниже приведена большая таблица с результатами тестов, которые заключаются в среднем времени отображения страницы для различных вариаций селекторов и разных браузеров. Выделено время, меньшее по сравнению с аналогом. Хочется подчеркнуть, что имеет смысл только относительное ускорение использования одних типов селекторов относительно других в пределах одного браузера. Все времена даны в миллисекундах.
Сравнивать абсолютные значения в рамках данного эксперимента не представляется возможным, ибо каждому браузеру дополнительно нужно было расположить на странице несколько тысяч «плавающих» блоков с заданными размерами (float:left; width:20px; height:20px
, фон для которых и задавался). Эта задача не имеет ничего общего со скоростью работы CSS-селекторов, но может отнимать существенное время у браузера на подготовку изображения страницы на экране (как видно, например, для Opera).
Firefox 2 | Opera 9.5 | Safari 3 | IE 7 | IE 6 | IE 5.5 | |
---|---|---|---|---|---|---|
p.class | 308 | 5887 | 237 | 82 | 72 | 145 |
.class | 219 | 6456 | 225 | 78 | 70 | 149 |
p#id | 349 | 7377 | 338 | 91 | 87 | 156 |
#id | 214 | 7427 | 220 | 83 | 84 | 159 |
div>p.class | 519 | 9412 | 247 | 97 | 84 | 158 |
div>.class | 836 | 12886 | 257 | 95 | 81 | 159 |
div>p#id | 549 | 10299 | 247 | 105 | 92 | 172 |
div>#id | 858 | 15172 | 242 | 113 | 91 | 169 |
div p.class | 827 | 10706 | 256 | 97 | 84 | 161 |
div .class | 505 | 15864 | 247 | 95 | 86 | 160 |
div p#id | 772 | 11952 | 247 | 108 | 99 | 177 |
div #id | 948 | 13306 | 255 | 108 | 95 | 173 |
div.div p.class | 1001 | 10519 | 263 | 111 | 94 | 165 |
div.div .class | 1099 | 18742 | 253 | 105 | 92 | 166 |
div.div p#id | 1161 | 10989 | 266 | 117 | 95 | 181 |
div.div #id | 1247 | 15816 | 256 | 114 | 100 | 187 |
Таблица 6.1. Для каждого селектора приведено время, затраченное браузером на отображение тестового случая с этим селектором в миллисекундах