Логическим продолжением уже проведенных исследований CSS/DOM-производительности браузеров (часть 1, часть 2, часть 3) стало рассмотрение зависимости времени создания документа от числа тегов (узлов дерева). Раздельно анализировались случаи, когда DOM-дерево было чисто линейным (все div лежали прямо внутри body, когда оно было разветвленным (ветки по 10 вложенных div наращивались внутри body) и когда вместо ветки из div использовалась некоторая семантическая конструкция.
Методика измерения скорости создания документа не изменилась с предыдущих тестов, однако, было добавлено несколько уточнений:
iframe, и для которых замерялось время их создания: загрузочная, линейная, древовидная и семантическая. Загрузочная серия была точной копией линейной серии (в смысле загружаемых документов), но результаты ее прогона не сохранялись. Это связано с тем, что первые документы в серии измерений создавались немного дольше остальных (наверное, это связано с выделением памяти браузерами). Чтобы нивелировать этот эффект, вводились дополнительная серия перед всеми измерениями.В качестве ветки семантического дерева использовалась следующая конструкция
<div><ul><li></li><li></li></ul> <p><a href="#"><em></em></a><span></span></p><blockquote></blockquote> <h1></h1></div>
Скачать локальный архив или пройти тест онлайн можно здесь.
Результаты по браузерам
Время создания документа от числа узлов (Firefox 2)
Время создания документа от числа узлов (Firefox 3)
Время создания документа от числа узлов (Internet Explorer 6)
Время создания документа от числа узлов (Internet Explorer 7)
Время создания документа от числа узлов (Internet Explorer 8 beta)
Время создания документа от числа узлов (Opera 9.5)
Время создания документа от числа узлов (Safari 3)
Средневзвешенное значение времени создания документа от числа узлов в DOM-дереве
Да, очевидно, что размер DOM-дерева влияет на скорость загрузки страницы. Одной из целью данного исследования было показать, как именно влияет (в конкретных числах). Средний размер страницы — 700–1000 элементов. Они загрузятся в дерево сравнительно быстро (3–7мс). Дальше время загрузки растет линейно, но все равно вы можете нарваться на нежелательные «тормоза», добавив несколько тысяч «скрытых» элементов или избыточной семантики.
Различия между линейной и древовидной структурой находятся в передах погрешности, однако, семантическое дерево оказалось самым медленным (чуть ли не на 50%). Но все же это явно не достаточный аргумент для полного отказа от семантики в коде. Да и уменьшение семантичности, скорее всего, будет связано с уменьшением числа элементов, так что лучше сосредоточиться именно на этом аспекте оптимизации (если уж вы беретесь за это).
Всем апологетам разумности хочу заявить: данное исследование несет чисто теоретический характер. Я не призываю высчитывать миллисекунды при создании страниц. Однако, иногда знать об этом нужно.
В дальнейшем планируется провести ряд исследований по отрисовке (reflow) различных комбинаций элементов и стилевых правил.
P.S. Как ни странно, но Opera проигрывает, а Safari опять опережает.
© 2016 ООО ВЕБО