为什么这个SVG图形只有在它庞大时才会陷入困境？

Question

我在Chrome 16和Safari 5桌面中遇到此图形时出现问题：

http://jsfiddle.net/D7ERH/embedded/result/

要在窗口最大化的情况下重现问题视图，请降低窗口高度并重新加载。

如果全屏显示帧率很大，但如果你降低窗口高度，那么webkit似乎对图形感到满意。 Opera和Firefox在任何规模上都没有问题。

图形是用d3.js创建的，但我认为它会发生在相同的SVG图像上，因为它只是生成元素的代码。光标移动是纯粹的js。

作为旁注，我发现如果我使用translate3d(x, y, 0)代替顶部和左部，那么鼠标移动是平滑的，但我更愿意将此作为最后的手段。 translate(x, y)也很慢。

Answer 1

简单的回答是重绘是很昂贵的。 :)尽管在移动圆圈时背景中的彩虹没有变化，但是当您移动顶部的其他元素（黑色圆圈）时，浏览器可能需要重绘这些元素。浏览器通常具有智能重新绘制，它们检测脏区域并重绘尽可能少的元素;例如，当窗口较小时，浏览器不必重绘元素和可见区域之外的元素部分。但是，没有性能保证。

有时，您可以通过应用CSS 3D转换（-webkit-transform：translate3d）来欺骗浏览器将背景元素缓存到位图中以加快重绘速度。例如，我在这里使用它来旋转复杂的场景。单击并拖动圆圈内部以旋转：

http://mbostock.github.com/d3/talk/20111116/bundle.html

或者，您可以将静态背景渲染为Canvas元素，然后在其上绘制动态SVG或HTML部分。这会强制浏览器缓存背景像素，以便更快地重绘。