Pourquoi ce graphique SVG est-il enrouilant WebKit uniquement lorsqu'il est grand?

Question

J'ai des problèmes avec ce graphique dans Chrome 16 et Safari 5 Desktop:

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

Pour reproduire la vue du problème avec votre fenêtre maximisée, puis réduisez la hauteur de votre fenêtre et rechargez.

Le framerate souffre énormément s'il est plein écran, mais si vous réduisez la hauteur de la fenêtre, Webkit semble satisfait du graphique. Opera et Firefox n'ont aucun problème à l'une ou l'autre taille.

Le graphique est créé avec D3.JS, mais je pense que cela se produirait également avec la même image SVG que c'est juste du code qui génère des éléments. Le mouvement du curseur est pur js.

En tant que sidenote, j'ai découvert que MouseMovement est lisse si j'utilise translate3d(x, y, 0) Au lieu de haut et à gauche, mais je préférerais l'utiliser en dernier recours. translate(x, y) est lent aussi.

Answer 1

La réponse simple est qu'il est coûteux de redessiner. :) Même si l'arc-en-ciel en arrière-plan ne change pas lorsque vous déplacez le cercle, le navigateur peut avoir besoin de redessiner ces éléments lorsque vous déplacez d'autres éléments (le cercle noir) sur le dessus. Les navigateurs ont généralement une repection intelligente, où ils détectent la région sale et redessinent le moins d'éléments possible; Par exemple, lorsque la fenêtre est plus petite, le navigateur n'a pas à redessiner les éléments et des parties d'éléments qui sont en dehors de la zone visible. Cependant, il n'y a pas de garantie de performance.

Vous pouvez parfois inciter le navigateur à en cache des éléments d'arrière-plan dans un bitmap pour redémarrer plus rapidement en appliquant une transformation CSS 3D (-Webkit-Transform: tradlate3d). Par exemple, je l'utilise ici pour faire pivoter une scène complexe. Cliquez et faites glisser à l'intérieur du cercle pour tourner:

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

Alternativement, vous pouvez rendre l'arrière-plan statique dans un élément de toile, puis dessiner vos parties dynamiques SVG ou HTML par-dessus. Cela oblige le navigateur à mettre en cache les pixels d'arrière-plan pour des refons plus rapides.