简体繁体 English

我应该使用变换而不是重绘吗？

[英]Should I use transform instead of redraw?

原文 2013-09-24 16:58:06 4 1 javascript/ d3.js

I have several charts I do redraw everytime I zoom/pann using d3 brushes. 我有几张图表，每次使用d3笔刷缩放/平移时都会重绘。

But, when I have tons of rendered elements, redrawing starts to be a little bit slow. 但是，当我有大量的渲染元素时，重画开始有点慢。

Instead of redrawing all elements everytime I move my brush, I was wondering whether or not it's feasible to transform (translate) the already drawn elements, and only redraw whenever I need to update my data. 我想知道是否可以转换（翻译）已经绘制的元素，并且仅在需要更新数据时才重新绘制，而不是每次移动画笔时都重新绘制所有元素。

I think it would increase my visualization performance a lot whenever panning to right/left, wouldn't it ? 我认为无论何时左右移动都可以大大提高我的可视化性能，不是吗？

Any insights ? 有什么见解吗？

1 个解决方案

In general, the less you touch the DOM the better your performance will be. 通常，您触摸DOM的次数越少，性能就会越好。 The details are browser and platform specific, but in general this is the pecking order of performance at a very high level (ordered from most expensive to least): 详细信息是特定于浏览器和平台的，但总的来说，这是性能从高到低的顺序（从最贵到最少）：

Creating and removing DOM elements. 创建和删除DOM元素。
Modifying properties of existing DOM elements. 修改现有DOM元素的属性。
In memory JavaScript (that is, not involving DOM at all... eg Array iteration). 内存中的JavaScript（也就是说，根本不涉及DOM ...例如数组迭代）。

So if you can get the result you want by simply modifying a targeted subset of existing elements with a transform attribute, I would guess you will be much better off. 因此，如果您可以通过简单地使用transform属性修改现有元素的目标子集来获得所需的结果，我想您的情况会更好。

Of course, it's impossible to say anything with certainty without seeing the actual code and use case. 当然，没有看到实际的代码和用例就不可能确定地说什么。