- T - время отображения документа на экране.
- DOM1 - число элементов, на которое может повлиять данное CSS-правило (разбор CSS-правил в браузерах идет справа налево).
- DOM2 - размер всего DOM-дерева.
- K - сложность каждого отдельного CSS-правила в таблице стилей, от 1 до 1,5.
- In - число встроенных CSS-правил в браузере, порядка 40-200.
- t - характерное время обработки одного правила для одного узла дерева, находится в районе 0,0001...0,0005 мс.
- L - характерные издержки на создание одного элемента DOM-дерева, находятся в районе 0,0005...0,005 мс.
Результаты. Пишем эффективный CSS. Оптимизация структуры веб-страниц
Уточнения по ходу
Результаты
Выводы
В ходе проведения различных тестов модель удалось уточнить и показать, что время создания документа зависит от числа узлов в дереве (что вполне очевидно). Это можно проверить двумя наборами тестов: на увеличении числа CSS-селекторов без увеличения DOM-дерева и на увеличении DOM-дерева без увеличения числа CSS-селекторов. При этом хорошо видно, что время создания документа не является постоянным и несколько увеличивается при увеличении размера документа.
Также была проверена гипотеза, насколько составные селекторы отрабатывают медленнее своих элементарных собратьев (имеется в виду разница между .class1, .class1 .class2 и .class1 .class2 .class3). Разница была зафиксирована, но оказалась несущественной (каждое звено прибавляет примерно 10-20% к общей сложности селектора).
Итак, после всех уточнений, формула приобрела следующий вид:
T = (сумма(DOM1 * K) + DOM2 * In) * t + DOM2 * L
Здесь:
Данная модель позволила аппроксимировать время отображения страницы с точностью 10% (в редких случаях 20%, видимо, есть еще много неучтенных факторов, например, особенности выделения памяти различными браузерами). Тестирование проводилось на документах от 5000 DOM-узлов и от 0 CSS-правил.