Проблемы с производительностью Javascript со слишком большим количеством узлов dom?

Question

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

Какие проблемы связаны с extreme DOM Usage?

Возможно ли, что пользовательский интерфейс полностью не отвечает (особенно в Internet Explorer)?

(И этот вопрос, конечно, является решением, если есть какие-либо другие решения, кроме ручного сбора мусора и удаления dom-узлов.)

Answer 1

Большинство современных браузеров должны хорошо справляться с огромными DOM-деревьями. И «большинство» обычно не включает IE.

Так что да, ваш браузер может перестать отвечать (потому что ему требуется слишком много оперативной памяти -> подкачка) или потому, что его рендерер просто перегружен.

Стандартным решением является удаление элементов, скажем, после того, как на странице есть 10 000 строк чата. Даже 100 000 строк не должны быть большой проблемой. Но я начинаю чувствовать себя неловко из-за чисел, намного превышающих это (скажем, миллионы строк).

[РЕДАКТИРОВАТЬ] Другая проблема - утечки памяти. Даже если JS использует сборку мусора, если вы допустили ошибку в своем коде и сохранили ссылки на удаленные элементы DOM в глобальных переменных (или ссылки на объекты из глобальной переменной), вы можете исчерпать память, даже если сама страница содержит только несколько тысяч элементов.

Answer 2

Просто с большим количеством узлов DOM не должно быть большой проблемой (если у клиента недостаточно ОЗУ); однако, манипулирование большим количеством узлов DOM будет довольно медленным. Например, циклически перебирая группу элементов и меняя цвет фона каждого, хорошо, если вы делаете это для 100 элементов, но это может занять некоторое время, если вы делаете это на 100 000 элементов. Кроме того, у некоторых старых браузеров возникают проблемы при работе с огромным DOM-деревом - например, прокрутка таблицы с сотнями тысяч строк может быть недопустимо медленной.

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

Другим аналогичным решением для этого является введение ограничения на количество сообщений, которые отображаются в любой момент времени. Таким образом, все сообщения, скажем, 100, например, удаляются, и чтобы увидеть их, вам нужно нажать на кнопку или ссылку, которая показывает больше. Это то, что Facebook делает со своими профилями, если вам нужна ссылка.

Answer 3

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

Рассмотрим коллекции HTML, такие как, например, document.getElementsByTagName('div').Это запрос к документу, и он будет повторяться каждый раз, когда требуется актуальная информация, например длина коллекции.Это может привести к неэффективности.Наихудшие случаи могут возникнуть при доступе к коллекциям и манипулировании ими внутри циклов.

Существует множество соображений и примеров, но, как и все, это зависит от приложения.