Perché questo grafico SVG Bog down Webkit solo quando è grande?

Question

Ho problemi con questo grafico in Chrome 16 e Safari 5 Desktop:

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

Per riprodurre la visualizzazione del problema con la finestra massimizzata, quindi ridurre l'altezza della finestra e ricaricare.

Il framerate soffre enormemente se è a schermo intero, ma se riduci l'altezza della finestra, il webkit sembra felice del grafico. Opera e Firefox non hanno problemi a nessuna delle due dimensioni.

Il grafico è creato con D3.JS, ma penso che sarebbe successo anche con la stessa immagine SVG in quanto è solo il codice che genera elementi. Il movimento del cursore è puro JS.

Come sidenote, ho scoperto che MouseMovement è liscio se uso translate3d(x, y, 0) Invece dell'alto e a sinistra, ma preferirei usarlo come ultima risorsa. translate(x, y) è anche lento.

Answer 1

La semplice risposta è che è costoso ridisegnare. :) Anche se l'arcobaleno sullo sfondo non cambia mentre si muovi il cerchio, il browser potrebbe aver bisogno di ridisegnare quegli elementi mentre muovi altri elementi (il cerchio nero) in cima. I browser di solito hanno una riverniciatura intelligente, dove rilevano la regione sporca e ridisegnano il minor numero possibile di elementi; Ad esempio, quando la finestra è più piccola, il browser non deve ridisegnare elementi e parti di elementi che sono al di fuori dell'area visibile. Tuttavia, non esiste una garanzia di prestazione.

A volte puoi ingannare il browser nella memorizzazione nella cache degli elementi di sfondo in una bitmap per il ridisemo più veloce applicando una trasformata CSS 3D (-WebKit-Transform: Translate3D). Ad esempio, lo uso qui per ruotare una scena complessa. Fare clic e trascinare all'interno del cerchio per ruotare:

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

In alternativa, è possibile rendere lo sfondo statico in un elemento di tela, quindi disegnare le parti dinamiche SVG o HTML sopra di esso. Questo costringe il browser a memorizzare nella cache i pixel di sfondo per il ridisemo più veloce.