powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript: как сократить время добавления кучи элементов в DOM?
6 сообщений из 6, страница 1 из 1
Javascript: как сократить время добавления кучи элементов в DOM?
    #38499351
Dymytry
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
День добрый!

Есть некий список виджетов. Туда время от времени добавляются новые. Выглядит это примерно как список онлайн юзеров в чате, список обновляется по событиям входа-выхода в чат людей. Список отсортирован.

С ростом нагрузки (и количества, и частоты вставок) это дело начинает притормаживать (особенно почему-то в ie8). Вопрос: можно ли как-то оптимизировать добавление/удаление элементов в DOM?

Я мыслю в следующих направлениях:

1. Может быть, имеет смысл отсоединять от дерева контейнер и добавлять туда что надо, а потом подсоединять обратно?
2. Или делать ему display: none?
3. Или может можно как-то добавить элементы скопом, я такого метода не нашел, ну а вдруг?..
4. Сейчас используется insertion sort, то по чему сортируется берется из виджета - наверное это плохо тк всегда плохо читать что-то из DOM, дешевле хранить отдельный массив, так?
5. Есть ли существенная разница между appendCHild и insertBefore методами?

Прошу поделиться опытом!
...
Рейтинг: 0 / 0
Javascript: как сократить время добавления кучи элементов в DOM?
    #38499359
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Не видя ни страницы ни кода нельзя сказать что-то определенное.
Нужно смотреть, как часто перерисовывается контейнер, излишняя перерисовка может стать причиной тормозов при работе с dom.

1 и 2 стоит попробовать, 3 и 5 погоды не сделают, 4 не понял.
...
Рейтинг: 0 / 0
Javascript: как сократить время добавления кучи элементов в DOM?
    #38499587
Dymytry
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Antonariy,
благодарю за ответ!

С кодом сложно тк это GWT.

Контейнер не перерисовывается - туда просто добавляются элементы.

4. - есть контейнер содержащий список дивов. Их надо всегда держать в сортированном виде. Сортировка по id. Чтобы добавить новый надо пройти по всем, считать id, понять где место нового, insertBefore. Предположение в том, что считывание id элемента есть работа с DOM и это плохо, дешевле хранить массив где-то.
...
Рейтинг: 0 / 0
Javascript: как сократить время добавления кучи элементов в DOM?
    #38499630
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Dymytry, отеройте для себя Timeline: " История одной оптимизации ".

После того, как разберётесь, тогда и будете утверждать, что контейнер не перерисовывается при добавлении в него элементов.
...
Рейтинг: 0 / 0
Javascript: как сократить время добавления кучи элементов в DOM?
    #38500744
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Dymytry,

Есть еще такой замечательный элемент documentFragment
...
Рейтинг: 0 / 0
Javascript: как сократить время добавления кучи элементов в DOM?
    #38500777
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
6. Имеет смысл создавать дивы, но не вставлять их в контейнер до тех пор, пока они не должны оказаться рядом с видимой областью контейнера. Примерно как подгрузка картинок в поиске гугла по мере скролла.
...
Рейтинг: 0 / 0
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript: как сократить время добавления кучи элементов в DOM?
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]