用 javascript 将文本插入 <div> 元素的最快方法是什么？答案

【问题标题】：What is the fastest way to insert text into a <div> element with javascript?用 javascript 将文本插入 <div> 元素的最快方法是什么？
【发布时间】：2011-01-23 05:16:41
【问题描述】：

我正在向我的文档中写入一长串数字，一次一个。 document.write() 可以很好地处理这个问题，但是使用带有<div> 元素的innerHTML 会很慢，而且很快就会使我的标签崩溃。有什么方法可以将文本插入到与 document.write 一样快的 <div> 元素中？

【问题讨论】：

标签： javascript html innerhtml

【解决方案1】：

这是一种方法，基于 Vlad 的想法，应该尽可能快：

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

而不是追加到一个字符串或innerHTML 两者都很慢，追加到数组然后使用join 将字符串从数组中取出。上面的示例将向输出 div 中抛出 5000 个数字，使用 oDiv.innerHTML += i + ", "; 执行此操作需要 2 毫秒而不是 2.5 秒

此处提供实时测试用例：http://jsfiddle.net/yahavbr/mKx35/

【讨论】：

【解决方案2】：

一次显示一个结果是否很关键？您可以一次将它们写入一个字符串，然后使用 innerHTML 将其刷新到 div 中。

【讨论】：

是的。我已经尝试过您的建议，但它似乎同样慢（无论如何，我的标签仍然崩溃）。
我们谈论的是多少项目？也许您可以尝试使用组合方法，即向字符串添加 100 个元素，刷新它，等等。

【解决方案3】：

cloneNode 和 appendChild 在现代浏览器上相当快。

如果 JS 耗时过长，请考虑使用队列和计时器事件（例如 setInterval）定期“让出”控制并防止“脚本超时”错误。

也许有更好的方法来处理这种情况 - 有多少 div 以及 为什么？

【讨论】：

【解决方案4】：

您可以尝试 node.textContent = "foo" 但我不确定它会快多少，假设它不慢。

【讨论】：