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

我使用的是简单的html呈现，这是我能想到的最简单的方法，选择一个空div并用html填充它

d3.选择$‘thediv’[0] .选择All'p' .datal.enter .附加“p” .htmlfunction{return'd3'+d；}； 在Win7 Chrome中，我注意到，对于大型数据集，这似乎非常缓慢。20000件物品的3.5秒

此示例呈现了一个非常简单但很长的列表：

我尝试了两种解决方案，可见性切换：

并向分离的元素写入：

结果如下：

Firefox：统一快速600-700毫秒

Chrome：切换或分离速度快800毫秒，否则非常慢3.5秒

Internet Explorer：分离速度更快，但仍然慢1.8秒，否则非常慢3.2秒

---

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

通常，在执行DOM操作时，有两件事情会变得很慢，即修改DOM树和重新绘制浏览器

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

编辑一个分离的元素将为您提供无需重新绘制的特权，并且不必为DOM的更新付费

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

除了DOM操作本身的速度之外，您还可以开始查看Jeff Greenberg所做的工作，以最小化实际脚本所做的工作。除此之外，你已经做对了

---

如果您有兴趣了解更多关于浏览器内部的详细信息，您应该大胆地看看关于浏览器内部的长篇文章。上还有一篇关于如何在网页中加速JavaScript的文章。

感谢您的基准测试！与此主题相关的一条老线索：分离是有意义的。对于来自windows窗体背景的人来说，这与暂停布局是一样的。为什么除了d3选择器之外还要使用jquery选择器呢？在第一个示例中，我不记得有什么原因。在第二个示例中，我可以使用分离的元素。

$('#thediv').toggle()

var p = $('<div>')
d3.select(p[0])...
$('#theparent').append(p)