Влияет ли наличие большого объема данных в DOM на производительность - PullRequest
1 голос
/ 23 марта 2011

Я активно использую отличный плагин jTemplates для небольшого веб-приложения.

В настоящее время я загружаю все шаблоны в DOM при начальной загрузке страницы.

С течением времени, по мере роста приложения, я получал все больше и больше шаблонов - в настоящее время их стоимость составляет около 100 КБ.

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

Мне интересно: есть ли в этой ситуации какое-либо существенное преимущество использования метода processTemplateURL jTemplates для отложенной загрузки шаблонов по мере необходимости, а не просто для массовой загрузки всех шаблонов при начальной загрузке страницы?

(Я не возражаю против дополнительных 2 или 3 секунд, которые занимает первоначальная загрузка страницы - так что, наверное, мне интересно - кроме начальной задержки загрузки страницы, есть ли причина не загружать большой объем данных шаблона HTML в DOM? Влияет ли как-то большее количество данных в DOM на производительность?)

Спасибо (заранее) за вашу помощь.

Ответы [ 3 ]

2 голосов
/ 23 марта 2011

Согласно статье Yahoo Best Practices для ускорения работы вашего веб-сайта, они рекомендуют не иметь более 500-700 элементов в DOM.

Количество элементов DOM легко проверить, просто наберите в консоли Firebug:

document.getElementsByTagName('*').length

Читать дальше http://developer.yahoo.com/performance/rules.html

Как банка с 100 шариками, 10 из которых красного цвета. Легко обнаружить и выбрать 10 красных шариков из банки 100, но если в этой банке было 1000 шариков, то потребуется больше времени, чтобы найти красные шарики. Сравнивая это с DOM-элементами, тем больше у вас будет медленных выборов, и это повлияет на производительность.

0 голосов
/ 23 марта 2011

Вы действительно должны оптимизировать DOM, чтобы сэкономить память и повысить скорость.Однако ключ заключается в том, чтобы избежать преждевременной оптимизации.

Какая у вас целевая платформа?Какой браузер (ы) ваши пользователи чаще всего используют?

Например, если вы нацелены в основном на настольные ПК, а ваши пользователи используют современные браузеры, то вам, вероятно, следует предпочесть ясность и простоту кода.

Если вы нацелены на настольные ПК, но должныскажем, поддержите IE6, тогда наличие слишком большого количества элементов DOM повлияет на вашу производительность, и вам следует подумать об оптимизации:

Однако, если вы ориентируетесь на современные браузеры, но в областях с низкой пропускной способностью (например, в круизе)и т. д.) тогда ваши соображения о пропускной способности могут перевесить ваши соображения относительно DOM.

Если вы ориентируетесь на iPhone, iPad и т. д., то память является дефицитным ресурсом (как и в случае с процессором), поэтому вы определенно должен оптимизировать DOM.Кроме того, на мобильных устройствах вы будете уделять больше внимания оптимизации полезной нагрузки AJAX из-за проблем с пропускной способностью по сравнению с чем-либо еще.Вы еще больше увеличите вес , уменьшив количество вызовов AJAX по сравнению с экономией на элементах DOM.Например, вы можете просто загрузить больше элементов DOM, чтобы уменьшить количество вызовов AJAX из-за пропускной способности - опять же, только вы можете выбрать правильный баланс.

Таким образом, ответ на самом деле таков:зависит.В современной браузерной среде с быстрым подключением нет никакой необходимости преждевременной оптимизации, если ваша DOM не станет действительно огромной.В условиях медленного соединения или мобильной среды избыточный вес при оптимизации пропускной способности перед оптимизацией DOM, но также при оптимизации количества узлов DOM.

0 голосов
/ 23 марта 2011

Наличие целого набора дополнительных элементов DOM не только повлияет на ваше начальное время загрузки, но также повлияет более или менее на все на странице.Запросы DOM JavaScript будут выполняться медленнее, вставки будут выполняться медленнее, CSS будет применяться медленнее и т. Д., Так как весь суп тегов анализируется браузером в DOM Tree, любой обход этого дерева будет затронут.Чтобы измерить, насколько сильно это замедлит работу вашей страницы, вы можете использовать такие инструменты, как DynaTrace AJAX, и запустить его один раз с вашим текущим кодом и один раз с вашим кодом без шаблонов.Если вы заметили большую разницу между этими двумя запусками с точки зрения выполнения или рендеринга JavaScipt, вам, вероятно, следует лениво загрузить (хотя 100 КБ не так уж много, поэтому вы можете не увидеть существенной разницы).

...