JS Animation Architekturdesign für optimale Leistung

9

Die Leistungssteigerung der GreenSock-Animationsengine ist ziemlich dramatisch .

Welche grundlegenden architektonischen Entscheidungen und Kompromisse macht diese Bibliothek, um solche Gewinne zu erzielen? Was macht diese Engine anders als jQuery animate ?

    
jedierikb 14.09.2012, 16:05
quelle

2 Antworten

2

tolle Antwort hier von den Leuten auf der grünen Wiese:

  1. Verwenden Sie hoch optimiertes JavaScript auf ganzer Linie (dies beinhaltet viele Dinge wie die Verwendung von verketteten Listen, lokalen Variablen, schnelle Suche Tabellen, Inline-Code, bitweise Operatoren, die Nutzung von Prototypen anstatt Funktionen / Variablen für jede Instanz neu zu erstellen, etc.)
  2. Entwickeln Sie die Struktur der Plattform so, dass sie sich sehr anbietet Gut bis Hochdruck Situationen, Minimierung von Funktionsaufrufen und Sicherstellen, dass die Dinge GC-freundlich sind.
  3. Führen Sie Aktualisierungen in einem einzigen Update durch Schleife, die von requestAnimationFrame gesteuert wird, nur zurückfallen zu setTimeout (), falls erforderlich.
  4. Cache einige wichtige Werte intern für schnellere Updates.
  5. Für CSS-Transformationen berechnen wir Matrixwerte und konstruiere entweder eine Matrix () oder eine Matrix3d ​​(), wenn es welche gibt Rotation oder Verdrehung, weil unsere Tests zeigten, dass es schneller war.

Mehr hier: Ссылка

    
jedierikb 22.04.2014 20:25
quelle
1

So schnell wie ich von der Flash-Version weiß:

  • sein Build / entworfen und optimiert für Geschwindigkeit, jquery ist für konsistente Arbeitsabläufe gebaut.
  • Das Verwenden von Objektpooling, auch Wiederverwendung mehrerer Typen von internen Objekten zur Minimierung der Instanziierung
  • verwendet optimierte Schleifen für jedes Szenario
  • verwendet Info-Objekte, um anzugeben, welche Eigenschaften animiert werden.
  • Ich bin mir nicht sicher, ob sie die gleichen Beschleunigungsfunktionen verwenden, aber das könnte auch einen Unterschied machen.

Tweenlite hat eine lange Geschichte als Tweenengine, es hat auch viele Funktionen, die nicht in jQuery enthalten sind.

    
Mark Knol 14.09.2012 23:16
quelle