14

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

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

4

1 回答 1

2

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

使用可见性切换可以避免浏览器在任何现代优化的 DOM 引擎中重绘。不过，您仍然需要为在线修改 DOM 树付出代价。

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

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

除了 DOM 操作本身的速度之外，您还可以开始研究循环展开和其他优化（由 Jeff Greenberg 编写），以尽量减少实际脚本所做的工作。除此之外，您已经做对了。

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

于 2013-01-27T11:50:43.297 回答