Developers
Mail & Media
1und1 Mail & Media
Browser Performance Secrets
Inhalt
- Der Rendering Prozess
- DOM + CSS
- PAINT
- LAYERS + Demo
- Was triggered einen repaint /reflow?
- Styles + Layouts
- Demo
- Wie es besser geht
- jQuery.animate() + Source
- Quellen
-
Browser parsed html code und baut DOM-Tree
- CSS Code wird gelesen und interpretiert
- Render Tree - Mischung aus DOM und CSS
- Ein Node (z.B. <p>) im render tree wird auch Frame oder Box genannt
- Nach dem Aufbau kann der Browser den render tree anzeigen (paint/draw)
Der Rendering Prozess
DOM + CSS
Recalculate Styles
Layout
Layout berechnet die Position der Boxen auf dem Bildschirm
Sehr kostenintensiv
PAINT
Composite Layers
RASTERIZER
Raster
Vektor
LAYERS mit CSS
-
3D oder transform CSS Eigenschaften
-
<video> Elemente
-
<canvas> mit 3D oder beschleunigten 2D
-
animated webkit transform
Was triggert einen repaint/relayout?
Styles + Layout
Problem?
read-write-read-write-read-write
Jeder write- macht den vorherigen read Aufruf ungültig!
Wie es besser geht
- Element mit cloneNode klonen, auf der Kopie arbeiten und zurück schieben
- display:none dann Änderungen vornehmen und wieder anzeigen (nur repaint)
- documentFragment benutzen
- read-write Operationen bündeln
- window.requestAnimationFrame() benutzen
- CSS3 --> transform: translateZ(0), translate3d
warum sind jQuery Animationen nicht so performant?
jQuery.animate() benutzt setInterval()
window.requestAnimationFrame FTW
Interesting FACTS
- die Arbeit wird von JS nur getriggered
- aber vom Browser in C++ abgearbeitet
- "langsames" JavaScript ist meist nicht das Problem
- JS Benchmarks sind mit Vorsicht zu genießen