optimize Tween() Übergang in d3.js

Question

Ich habe eine Reihe von Elementen:

[ 
    { label: 'item1', color: 'yellow' }, 
    { label: 'item2', color: 'red' }, 
    { label: 'item3', color: 'blue' }, 
    { label: 'item4', color: 'green' } 
] 

Es gibt einen Hauptübergang, die alle Elemente von links nach rechts bewegt.

In diesem Hauptübergang möchte ich einzelne Übergänge auf jedes Element anwenden (dieser Übergang geht nach oben und unten).

Dieser letzte Übergang ist ein bisschen speziell, weil jedes Element besteht aus einem text und einem circle und diese beiden Teile unabhängig voneinander bewegen.

Hier ist ein jsfiddle Sie ein Beispiel zeigt: http://jsbin.com/juyoyuzuta/1/edit?js,output

(sorry, wenn das Beispiel ein bisschen hässlich ist, aber Sie bekommen die Idee kann)

Wenn ich diesen Code in meinem Browser-Profil es scheint wie der Browser macht viel Malerei/Rendering.

Ich frage mich, ob es einige Optimierungen gibt, die ich tun kann, um weniger Gemälde/Rendering zu machen. Und ganz allgemein, wenn es einen besseren Weg gibt, es zu tun.

Answer 1

Ich denke, dass Sie nach diesem Punkt in Mikro-Optimierung landen werden. Sie sind es, die Art und Weise tun, ich das Problem angehen würde, hier sind einige Dinge, die Sie könnten versuchen:

• Sie könnte versuchen, die Position der Kreise/Labels eher direkt zu modifizieren, als die Anwendung einer Transformation. Mein Bauchgefühl ist, wenn Sie irgendeine Hardwarebeschleunigung bekommen, dass Sie es wahrscheinlich dabei verlieren werden (CSS-Transformationen sind eine ziemlich Standardsache, modifizieren Sie cx eines Kreises nicht).

• Sie könnten die Menge an Bewegung reduzieren, diese Kreise sehen aus, als würden sie nur mit Energie summen, vielleicht verlangsamen Sie das Ding und bewegen die Kreise ein wenig seltener nach oben/unten. Streben Sie einen reibungsloseren Übergang an und ich glaube nicht, dass Sie etwas verlieren würden.

Aber im Wesentlichen machen Sie einen sehr malen schweren Betrieb und nicht viel mehr. Es wird also erwartet, dass das Profiling des Codes auf eine Menge Rendering und DOM-Manipulation hinweist. Sie tun dies im Grunde genommen über eine ziemlich enge Schleife.