为什么这个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部件.这会强制浏览器缓存背景像素,以便更快地重绘.