Developers

Mail & Media

 

 1und1 Mail & Media

Nico Nagel - Producer nico.nagel@yahoo.de

Browser Performance Secrets

Inhalt


  1. Der Rendering Prozess
  2. DOM + CSS
  3. PAINT
  4. LAYERS + Demo
  5. Was triggered einen repaint /reflow?
  6. Styles + Layouts
  7. Demo
  8. Wie es besser geht
  9. jQuery.animate() + Source
  10. 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




     Paint 
    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!



    DEMO





    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

    Quellen


    Browser Performance Secrets

    By nicon-dev

    Browser Performance Secrets

    • 711
    Loading comments...

    More from nicon-dev