Почему глубина DOM-дерева это важно...
Некоторое время назад мой бывший руководитель посоветовал не делать слишком большого уровня вложенности у тегов. В то время, я делал закругления у блоков таким методом:
content Ну и в css описывал фон и правила.
Я подумал, что это действительно логичное замечание, ведь при отрисовке движку браузера приходится рекурсивно проходить в глубь этой конструкции, а это наверняка занимает больше ресурсов. Сейчас, читая умные книжки и статьи, я понял на сколько это был полезный совет.
Отображение каждой современной странички на сайте не ограничивается только ее изначальным отображением. Почти каждое действие пользователя каким-либо образом влияет на ее внешний вид: изменение размеров окна, скроллинг и т.д. - все это обрабатывается движком браузера. Этим занимается специальный процесс под названием reflow. О том, что он существует говорит следующий факт: когда мы изменяем размеры окна с открытой страницей - нагрузка на процессор увеличивается.
Иными словами, мой блок при каждом чихе пользователя отзывался в печенке у этого бедняги под названием reflow.
«Чо делать-то?»
1. Минимизировать ненужную глубину DOM-дерева.
2. Убрать весь ненужный CSS и минимизировать сами правила (в т.ч. переопределения).
3. Уменьшить избыточное вложение селекторов.
Ну и не нарушать правила дорожного движения. =)
Подробности на английском: http://code.google.com/intl/ru/speed/articles/reflow.html
content Ну и в css описывал фон и правила.
Я подумал, что это действительно логичное замечание, ведь при отрисовке движку браузера приходится рекурсивно проходить в глубь этой конструкции, а это наверняка занимает больше ресурсов. Сейчас, читая умные книжки и статьи, я понял на сколько это был полезный совет.
Отображение каждой современной странички на сайте не ограничивается только ее изначальным отображением. Почти каждое действие пользователя каким-либо образом влияет на ее внешний вид: изменение размеров окна, скроллинг и т.д. - все это обрабатывается движком браузера. Этим занимается специальный процесс под названием reflow. О том, что он существует говорит следующий факт: когда мы изменяем размеры окна с открытой страницей - нагрузка на процессор увеличивается.
Иными словами, мой блок при каждом чихе пользователя отзывался в печенке у этого бедняги под названием reflow.
«Чо делать-то?»
1. Минимизировать ненужную глубину DOM-дерева.
2. Убрать весь ненужный CSS и минимизировать сами правила (в т.ч. переопределения).
3. Уменьшить избыточное вложение селекторов.
Ну и не нарушать правила дорожного движения. =)
Подробности на английском: http://code.google.com/intl/ru/speed/articles/reflow.html