我的网页根据我的 Comet Web 服务器提供的数据，在(批量)紧密循环中一次创建大量 DOM 元素。
我尝试了几种方法来创建这些元素。基本上可以归结为(1):
var container = $('#selector');
for (...) container.append('<html code of the element>');
或(2):
var html = '';
for (...) html += '<html code of the element>';
$('#selector').append(html);
或(3):
var html = [];
for (...) html.push('<html code of the element>');
$('#selector').append(html.join(''));
就性能而言，(1) 绝对很糟糕(台式机上每批 3 秒，Galaxy Note 上高达 500 万)，(2)和(3)大致相当(台式机上 300 毫秒，1.5 秒)在爱德斯实验室)。这些时间大约是 4000 个元素，大约是我在生产中预期的 1/4，这是 Not Acceptable ，因为我应该在 1 秒内处理这么多数据(15k 元素)，即使是在 folndleslab 上也是如此。
事实上，(2) 和 (3) 具有相同的性能，这让我觉得我遇到了臭名昭著的“天真的连接字符串无用地重新分配和复制大量内存”问题(尽管我期望join() 比这更聪明)。 [编辑:在更仔细地研究之后，我碰巧被误导了，问题更多地出在渲染方面——感谢 DanC]
在 C++ 中，我只是使用 std::string::reserve() 和 operator += 来避免无用的重新分配，但我不知道如何在 Javascript 中做到这一点。
知道如何进一步提高性能吗？或者至少向我指出识别瓶颈的方法(尽管我很确定这是字符串连接)。我当然不是 Javascript 大师...
感谢您阅读我的文章。
就其值(value)而言，如此大量的元素是因为我正在使用 DIV 绘制一个(大部分是实时的)图表。我很了解 Canvas，但我的应用程序必须与旧浏览器兼容，所以不幸的是它不是一个选项。 :(
最佳答案
使用 DOM 方法，在我的双核 MacBook 上构建和附加 12000 个元素的时间约为 55 毫秒。
document.getElementById('foo').addEventListener('click', function () {
build();
}, false);
function build() {
console.time('build');
var fragment = document.createDocumentFragment();
for ( var e = 0; e < 12000; e++ ) {
var el = document.createElement('div');
el.appendChild(document.createTextNode(e));
fragment.appendChild(el);
}
document.querySelectorAll('body')[0].appendChild(fragment);
console.timeEnd('build')
}
关于javascript - JS性能: create an awful lot of elements at once，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15316411/