Какой самый быстрый способ вставить текст в элемент <div>с помощью JavaScript?

Question

Я записываю длинный ряд чисел в свой документ, по одному за раз.document.write () обрабатывает это нормально, но использование innerHTML с элементом <div> является медленным и довольно быстро приводит к сбою моей вкладки.Есть ли способ вставить текст в элемент <div>, который так же быстр, как document.write?

Answer 1

Вот один способ, основанный на идее Влада, который должен быть максимально быстрым:

var arrData = [];
for (var i = 0; i <= 5000; i++)
    arrData.push(i);
var oDiv = document.getElementById("Output");
oDiv.innerHTML = arrData.join(", ");

Вместо добавления к строке или к innerHTML, которые являются медленными, добавьте к массиву, затем используйте join, чтобы вывести строку из массива. В приведенном выше примере будет выброшено 5000 чисел в выходной div, и это займет 2 миллисекунды вместо 2,5 секунд при выполнении с oDiv.innerHTML += i + ", ";

Живой тестовый кейс доступен здесь: http://jsfiddle.net/yahavbr/mKx35/

Answer 2

cloneNode и appendChild довольно быстры в современных браузерах.

Если JS занимает слишком много времени, рассмотрите возможность использования событий очереди и таймера (например, setInterval) для периодического «выдачи» управления и предотвращенияошибки «тайм-аута сценария».

Возможно, есть лучший способ справиться с ситуацией - сколько дивов и почему ?

Answer 3

Отображение результатов по одному критично? Вы можете записать их в строку по одному, а затем сбросить их в div с помощью innerHTML.

Answer 4

Вы можете попробовать node.textContent = "foo", но я не уверен, насколько быстрее это будет, при условии, что это не медленнее.