d3操纵html的最佳方法是什么？

Question

我正在使用mbostock真棒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秒)

我的问题是:有更好的解决方案吗？

Answer 1

一般来说，在进行 DOM 操作时，最终会变慢的两件事是对 DOM 树的修改和浏览器重绘。

使用可见性切换可以避免在任何现代、优化的 DOM 引擎中浏览器重绘。尽管如此，你仍然需要付出修改 DOM 树的代价。

编辑分离的元素将为您提供无重绘的好处，并且无需为 DOM 的更新付费。

在所有情况下，第二种选择，即流外 DOM 操作，将会更快，或者在最坏的情况下同样快。浏览器之间速度的相对差异很可能是由于它们的 DOM 和 Javascript 引擎的差异造成的。有一些基准可以让您更深入地了解这一点。

除了 DOM 操作本身的速度之外，您还可以开始研究循环展开和其他优化（由 Jeff Greenberg 完成），以最大限度地减少实际脚本正在执行的工作。除此之外，你已经做得对了。

如果您有兴趣了解有关浏览器内部的更多详细信息，您应该看看html5rock上有关浏览器内部的长文。Google 开发者那里还有一篇关于如何加速网页中 JavaScript 的好文章。