なぜこのSVGグラフィックは、WebKitを大きく下にダウンしているのですか？

Question

Chrome 16とSafari 5デスクトップでこのグラフィックに問題があります。

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

窓を最大化した状態で問題ビューを再現するには、ウィンドウの高さを減らしてリロードします。

フレームレートはフル画面の場合は非常に苦しみますが、ウィンドウの高さを減らすと、WebKitはグラフィックに満足しているようです。オペラとファイアフォックスはどちらのサイズでも問題ありません。

グラフィックは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パーツを描画することもできます。これにより、ブラウザはバックグラウンドピクセルをキャッシュして、より速い再描画を強制します。