Май
16
Не все теги одинаково полезны
Filed Under (css, html, Статьи) by Александр Бойченко on 16-05-2010
Решил померять как быстро отрисовываются теги без применения к ним каких-либо стилей.
Суть теста — генерируем 10к тегов на одной странице и меряем reflow.
Результаты оказались очень любопытные.
Пока даю весьма скромную таблицу, с малым набором тегов.
| Тег | Safari 4.0.5 (mac) | FF 3.6.3 (mac) | Opera 10.53 (mac) | iPad |
|---|---|---|---|---|
| div | 173 | 270 | 218 | 710 |
| span | 52 | 608 | 113 | 294 |
| p | 173 | 287 | 235 | 711 |
| b | 50 | 607 | 116 | 299 |
| i | 50 | 600 | 1164 | 297 |
Очень странные результаты показал IE — почти нулевые рефлоу (поэтому пока не заполняю таблицу с результатами IE*)
Вывод:
- в Opera и Safari inline элементы в 2 раза быстрее блочных
- в FF все наоборот, блочные быстрее инлайновых в 2 раза
- существую теги, которые серьезно влияют на рефлоу (например i в Опере и FF )
Скоро проведу более детальное исследование + проверим скорость основных css свойств.
upd. имена тегов в таблице ведут на соответствующие тесты

А как замерить reflow?
подключить файл
а вдресе документа добавить ?reflow-meter
пример:
ТО, что дивы в фф быстрее давно сам заметил,
div — 201
span — 126
p — 157
b — 111
i — 153
Browser: Chromium 7.0.529.0 (59908)
на винде 7)
но правда у мня еще куча расширений стоит которые влияют на загрузку страницы.
Opera 11 — 137, 71, 164, 76 и 80 соответственно. А не пробовали обнулять стили? Тот же i может тормозит из-за выхода текста за пределы элемента.