d3 操作 html 的最佳方式是什么？答案

【问题标题】：what's the best way for d3 to manipulate html?d3 操作 html 的最佳方式是什么？
【发布时间】：2012-12-22 22:28:40
【问题描述】：

我使用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 秒）

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

【问题讨论】：

【解决方案1】：

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

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

编辑一个分离的元素将给你带来无需重绘的好处，也不必为更新 DOM 付费。

在所有情况下，第二个选项，外流 DOM 操作，将更快，或者最坏的情况下一样快。浏览器之间速度的相对差异很可能是由于它们的 DOM 和 Javascript 引擎的差异。有一些benchmarks 可能会让您对此有更深入的了解。

除了 DOM 操作本身的速度之外，您还可以开始研究 loop unrolling 和 other optimizations（作者 Jeff Greenberg），以尽量减少实际脚本正在执行的工作。除此之外，您已经做对了。

如果您有兴趣了解有关浏览器内部的更多详细信息，您应该看看html5rock 关于浏览器内部的长文。 Google developers 上还有一篇不错的文章，介绍了如何加快网页中的 JavaScript。

【讨论】：