Слишком много элементов DOM

Question

Я создаю веб-приложение на одну страницу, и оно начинает расти.Приложение состоит из нескольких компонентов, каждый из которых тщательно разработан.В среднем приложение имеет количество элементов DOM 1200+.После сканирования YSlow меня предупредили, что это слишком много, и что у меня должно быть не более 700 элементов DOM.

Я обычно довольно строг и эффективен в своей разметке, и я сомневаюсь, что смогуобрезать много.Я склонен использовать много DOM-элементов, чтобы правильно настроить стиль и работать в кросс-браузерном режиме.

Как можно резко сократить количество элементов DOM?Придется ли мне загружать больше контента по требованию (ajax) вместо всего при загрузке страницы?Влияет ли большое количество элементов DOM на производительность?

Мне бы очень хотелось услышать, как люди с этим сталкиваются и какие у вас могут быть решения ...

Answer 1

Количество элементов dom будет входить в изображение, только если вы выполняете много манипуляций с DOM и / или CSS на странице через Javascript. Сканирование идентификатора на странице с 50000 элементов всегда будет медленнее, чем на странице с 500. Изменение стиля CSS, который наследуется большей частью страницы, скорее всего, приведет к большему перерисовыванию / переформатированию, чем на более простом. страницы и т.д ...

Единственный способ сократить количество элементов - это упростить страницу.

Answer 2

Мы создали одностраничное веб-приложение. Первоначально Yslow беспокоил меня, так как на странице было более 2000 объектов DOM.

После некоторой работы мы получили все остальные элементы Yslow, чтобы стать зелеными. И мы закончили с этим (около 1800 прямо сейчас), так как приложение очень быстро в различных браузерах.

Но мы не поддерживаем IE6 и IE7, и они могут отличаться для этих браузеров.

Answer 3

Как можно резко сократить количество элементов DOM?

Используя только те элементы, которые необходимы.Если вам нужен более подробный совет, опубликуйте свой код.

Придется ли мне загружать больше контента по требованию (ajax) вместо этого для всех на странице загрузки?

Если вы хотите, чтобы ваша страница работала лучше при запуске, вы можете сделать это.

Влияет ли большое количество элементов DOM на производительность??

Не обязательно.

Answer 4

Вы можете отображать элементы по требованию, когда пользователь нажимает кнопку или может использовать ленивую загрузку, как Twitter.