Читать «Разгони свой сайт» онлайн - страница 85
Николай Мациевский
Результаты
Ниже приведена большая таблица с результатами тестов, которые заключаются в среднем времени отображения страницы для различных вариаций селекторов и разных браузеров. Выделено время, меньшее по сравнению с аналогом. Хочется подчеркнуть, что имеет смысл только относительное ускорение использования одних типов селекторов относительно других в пределах одного браузера. Все времена даны в миллисекундах.
Сравнивать абсолютные значения в рамках данного эксперимента не представляется возможным, ибо каждому браузеру дополнительно нужно было расположить на странице несколько тысяч «плавающих» блоков с заданными размерами (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
Выводы
Единственный вывод, который можно с твердостью сделать, — это преимущество использования #id перед p#id (средневзвешенное по всем браузерам для Рунета получается 9%). Также можно с некоторой уверенностью говорить об использовании .class вместо p.class (10%). Еще стоит обратить внимание на существенное (до 2,5 раз) ускорение при переходе от CSS1-селекторов к CSS2 (от div p к div>p, в тех браузерах, которые это поддерживают). Дополнительно нужно, наверное, отметить, что выборка элементов по классу работает в целом быстрее, чем по идентификатору (11%).
Все остальные выводы уже можно делать, анализируя данные из таблицы. IE всех версий стабильно выполнял все тесты примерно на одном уровне, а при его текущем доминировании оптимизация должна идти в первую очередь для него.
6.3. Влияние семантики и DOM-дерева