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

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

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

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

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

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

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

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

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

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

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

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


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