Уточнения по ходу. Пишем эффективный CSS. Оптимизация структуры веб-страниц
Уточнения по ходу
Результаты
Выводы
Также практически сразу становится ясно, что в формуле фигурирует не размер всего DOM-дерева, а число элементов, на которые влияет данный селектор (это, в частности, объясняет, почему универсальный селектор (*) такой ресурсоемкий). Для уточнения этого момента была проведена серия тестов с одинаковым DOM-деревом и различными CSS-правилами (одно применялось ко всему дереву, а другое - только к десятой его части).
Еще не стоит забывать о наличии у браузеров собственной таблицы стилей, которая применяется к каждой странице, которая выводится на экран. Размер этой таблицы можно выяснить достаточно просто: нужно всего лишь открыть две страницы с разным (и достаточно большим) числом CSS-правил, но одинаковым DOM-деревом и проверить, насколько замедлилась загрузка. Зная отношение размера двух таблиц стилей можно вычислить неизвестный размер таблицы стилей самого браузера (для основных браузеров он составил в районе 30-50 правил, для IE - порядка 200).
И еще один момент, который всплыл по ходу расследования: играет роль размер полного DOM-дерева, не только число тегов, но и число текстовых узлов, хотя это никак и не влияет на основные выводы.