我正在使用mbostock's awesome d3进行简单html渲染，这是我能想到的最简单的方法，选择一个空div并用HTML填充。
d3.select($('#thediv')[0])
.selectAll('p')
.data(l).enter()
.append('p')
.html(function(d){return 'd3 ' + d;});
在 Win7 Chrome中我注意到，对于大型数据集，这似乎非常慢。（20000项目为3.5秒）
此示例呈现一个非常简单（尽管很长）的列表：http://jsfiddle.net/truher/NQaVM/
我尝试了两种解决方案，可见性切换：
$('#thediv').toggle()
和写入分离的元素：
var p = $('<div>')
d3.select(p[0])...
$('#theparent').append(p)
结果如下：
Firefox：统一快速（600-700毫秒）
Chrome：切换或分离的速度很快（800毫秒），否则非常慢（3.5秒）
Internet Explorer：分离更快但仍然很慢（1.8秒），否则非常慢（3.2秒）
我的问题是：有更好的解决方案吗？
答案 0 :(得分：2)
通常，在进行DOM操作时最终会变慢的两件事是对DOM树和浏览器重绘的修改。
使用可见性切换可以避免在任何现代优化的DOM引擎中重新绘制浏览器。你仍然会支付修改DOM树的价格。
编辑一个分离的元素将为您提供无重绘功能以及无需支付DOM更新的费用。
在所有情况下，第二个选项，即流程DOM操作，将更快或更快。浏览器之间的速度相对差异可能是由于他们的DOM和Javascript引擎的差异。有一些benchmarks可能会让您更深入地了解这一点。
除了DOM操作本身的速度之外，您还可以开始查看loop unrolling和other optimizations（由Jeff Greenberg）来最小化您的实际脚本所做的工作。除此之外，你已经做好了。
如果您有兴趣了解有关浏览器内部的更多详细信息，请务必查看html5rock关于浏览器内部的长篇文章。关于如何加速网页中的JavaScript，还有一篇关于Google developers的文章。