なぜこのSVGグラフィックはWebkitのサイズが大きい場合にのみ駄目ですか？

Question

私はクローム16とSafari 5 Desktopでこのグラフィックに問題抱えている：あなたのウィンドウを最大化して、問題のビューを再現するには

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

を、そしてあなたの窓の高さを低くし、リロード。

フルスクリーンの場合、フレームレートは非常に苦労しますが、ウィンドウの高さを減らすとグラフィックがうまくいくように見えます。 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

また、あなたはキャンバス要素に静的な背景をレンダリングすることができ、その後、その上に自分の動的なSVGやHTMLの部分を描きます。これにより、ブラウザはバックグラウンドピクセルをキャッシュして、再描画を高速化します。