Самый быстрый способ добавления содержимого HTML в div с использованием JavaScript

У меня есть HTML-страница, которая использует AJAX для извлечения сообщений с сервера. Я добавляю эти сообщения к тому, как они извлекаются, устанавливая его свойство innerHTML.

Это отлично работает, в то время как количество текста невелико, но по мере его роста Firefox использует весь доступный процессор, а сообщения замедляются до обхода. Я не могу использовать текстовое поле, потому что я хочу, чтобы часть текста была выделена цветом или использовалась другое форматирование HTML. Есть ли более быстрый способ сделать это, что не приведет к блокировке браузера?

Я тоже пытался использовать jQuery, но из того, что я прочитал, настройка .innerHTML быстрее, чем его функция .html(), и это похоже на мой опыт.

Изменить: Воспринимаемая производительность не является проблемой - сообщения уже записываются по мере их возврата (с использованием кометы). Проблема в том, что браузер начинает блокироваться. Количество контента не так велико: 400-500 строк, похоже, это делают. В этом div нет div. Все это внутри таблицы, но, надеюсь, это не имеет значения.

Ответ 1

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

myElem.innerHTML += newMessage;

или

myElem.innerHTML = myElem.innerHTML + newMessage;

потому что это крайне неэффективно (см. этот тест: http://jsben.ch/#/Nly0s). Это приведет к тому, что браузер сначала сделает очень большую строку concat (что никогда не бывает хорошо), но тогда еще хуже придется перерисовать вставку и отобразить все, что вы ранее добавили. Гораздо лучше, чем это было бы для создания нового объекта div, используйте innerHTML для ввода сообщения, а затем вызовите метод dom appChild, чтобы вставить вновь созданный div с сообщением. Затем браузеру нужно будет только вставить и отобразить новое сообщение.

Ответ 2

Можете ли вы разбить свой текст и добавить его в куски? Оберните части текста в теги div, а затем разделите их, добавив меньшие div на страницу.

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

Кроме того, вы, вероятно, должны пересмотреть, сколько данных вы отправляете и встраиваете в страницу. Если браузер медленный, количество данных ограничено огромным - действительно ли это имеет смысл для пользователя? Или будет более понятен интерфейс поискового вызова (или другой механизм дополнительной загрузки)?

Ответ 3

Вы можете использовать insertAdjacentHTML("beforeend", "<HTML to append>") для этого.

Здесь приведена статья о ее производительности, которая имеет ориентиры, показывающие insertAdjacentHTML в ~ 150 раз быстрее, чем операция .innerHTML +=. Это может быть оптимизировано браузерами в течение нескольких лет после написания статьи.

Ответ 4

Идем вместе с Риком, почему бы просто не передать информацию обратно как JSON, поэтому вы можете просто пройти через нее, используя setTimeout и отобразить, возможно, 2-5 сообщений, а затем вызвать setTimeout, затем он сделает следующую партию, пока не будет обработан массив JSON.

Вы должны использовать innerHTML, хотя, поэтому ваш javascript может динамически его создать и добавить в div, но я бы сделал это только для первой партии, чтобы быстро получить все.

После этого я пошел бы с клонированием первой партии и изменением innerHTML для каждого из других сообщений вместе с другой информацией и добавлением этого к дереву dom.

Клонирование будет быстрее, чем создание новых элементов, и у вас не будет проблем, если что-то еще изменит дерево dom во время обработки.

Ответ 5

"Все это внутри таблицы, но, надеюсь, это не имеет значения".

На самом деле это очень важно. Из-за характера таблиц ячейка часто не может быть отображена до тех пор, пока не будут вычислены ширина и высота всех ячеек в столбце и строке. table-layout: fixed преодолевает это за счет блокировки ширины и высоты ячейки на основе первой строки.

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

http://www.w3schools.com/Css/pr_tab_table-layout.asp

Ответ 6

Я написал что-то подобное, и это было сложно. Во-первых, вам нужно изолировать проблему.

Это код рендеринга? Попробуйте прокомментировать весь рендеринг и посмотрите, замедляет ли сам AJAX Firefox. Если да, попробуйте различные подходы к рендерингу, как описано выше.
Это сеть? Попробуйте комментировать Ajax и просто запускайте свой параметр innerHTML. Если это проблема, вам может потребоваться поэкспериментировать с различными настройками времени.