div.div #id
Результаты
Ниже приведена большая таблица с результатами тестов, которые заключаются в среднем времени отображения страницы для различных вариаций селекторов и разных браузеров. Выделено время, меньшее по сравнению с аналогом. Хочется подчеркнуть, что имеет смысл только относительное ускорение использования одних типов селекторов относительно других в пределах одного браузера. Все времена даны в миллисекундах.
Сравнивать абсолютные значения в рамках данного эксперимента не представляется возможным, ибо каждому браузеру дополнительно нужно было расположить на странице несколько тысяч «плавающих» блоков с заданными размерами (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. Для каждого селектора приведено время, затраченное браузером на отображение тестового случая с этим селектором в миллисекундах