Ariya Hidayat (@ariyahidayat) arbeitet bei Sencha und hat PhantomJS und Esprima entwickelt. Er sprach über die Performance von Front-End-Webanwendungen.
Dies sind meine Notizen von ihrem Vortrag auf der W3Conf in San Francisco als Teil dieser Live-Blog-Serie.
Übertrieben einfache Ratschläge: „Verwenden Sie translate3d für Hardware-Beschleunigung.“
Browser sind kompliziert: Benutzeroberfläche – Browser-Engine – Render-Engine – Grafikstapel – JavaScript-Engine – Netzwerk-Engine.
Inhalte zu Pixeln zu machen ist ebenfalls kompliziert. Das Zeichnen auf dem Bildschirm ist nur der letzte Schritt in einer langen Kette. Wir sind meist mit dem DOM-Baum vertraut, aber es gibt auch einen Render-Baum.
Stilberechnungen sind einfach (z. B. Änderung der Hintergrundfarbe). Layoutänderungen sind schwieriger und daher langsamer / „teurer“ (z. B. Änderung der Positionierung eines Elements). Es gibt viele Eigenschaften, die das Layout ändern.
Es gibt unterschiedliche Kosten für verschiedene Pinsel/Füllungen. Kein Füllen ist einfach, Verläufe sind schwieriger, Texturen am schwierigsten. Dieses Konzept gilt für alle Arten von Eigenschaften. CSS-Transformationen zum Beispiel: Skalieren ist einfacher als sich mit der Perspektive zu befassen.
GPUs sind für Spiele optimiert. Weniger für einfache Dinge wie Linien (Call of Duty braucht keine geraden horizontalen Linien). Das Web hat keinen vorhersehbaren Inhalt (wie Spiele ihn haben). Das Web ist meist Text. Spiele sind meist Bilder.
GPUs = Wenig Speicher; Viel Rechenleistung; Datentransfer ist der Engpass; Benötigt eine gute Menge an Strom.
Wie nehmen wir also eine für Spiele optimierte GPU und nutzen sie im Web?
Flüssige Animation ist ein riesiges Ziel im Web. Also: Verlagern Sie so viel wie möglich davon auf die GPU. Weniger effizient = Schleife über eine Box und bewegen. Effizienter: Box in einen Puffer legen und den Puffer bewegen. Ein gutes Beispiel dafür ist die Falling Leaves Demo von WebKit. Das überlässt es dem Compositor, herauszufinden, wo sich die Blätter befinden.
#w3conf @ariyahidayat: Animationsmechanik → Initialisierung cachet Bilder, dann manipulieren Sie nur noch die Position der Bitmaps usw.
— Faruk Ateş (@KuraFire) 22. Februar 2013
translateZ(0) ist nicht nötig, wenn Sie bereits Animation verwenden.
- Erfordert keinen erneuten Upload zur GPU = Deckkraft, Position, Größe, Filter
- Erfordert erneuten Upload zur GPU = alles andere (vermeiden!)
Coole Dinge
- Photon: CSS3 Beleuchtungs-Engine
- 3D CSS Ego-Shooter
„Es ist nicht nur die Geschwindigkeit des Autos, es sind die Verkehrsbedingungen.“
Überkapazitäten vermeiden.
Wenn Sie die Farbe ändern, ist das eine der Dinge, die einen erneuten Upload erfordern und daher nicht gut für die Leistung sind. **Aber es gibt einen Trick!** Es verbraucht doppelt so viel Speicher, aber Sie können es flüssig gestalten.
Weitere Informationen zu all dem: Jank Busters.
„Grafikprogrammierung ist voller Tricks. Das wird immer so sein.“
Er demonstrierte auch eine nützliche Funktion von Safari: Aktivieren des Debug-Menüs und Einschalten von „Show Composition Borders“. Das zeigte die Anzahl der Male, mit denen eine Textur an die GPU gesendet wurde.
Die Popcorn-Demo des Montage-Teams ist eine großartige Demo dafür, wie flüssig man eine UI rendern kann.
Ich war begeistert, das in seinem Vortrag zu sehen! :)
Chris, gibt es ein Video zu diesem Artikel? Beim Ansehen der Folien finde ich es sehr interessant!
Das ist genau der Grund, warum Opera auf Webkit umgestiegen ist. Entwickler können sich einfach nicht die Mühe machen, Präfixe für andere Browser hinzuzufügen, selbst wenn es mit Mixins leicht behoben werden kann.