Introduction to rendering performance

Talk given at Uppsala.js #6 http://www.meetup.com/Uppsalajs/events/220185891/

I cover rendering basics from a Chrome perspective. I also use the Chrome tracing tool on jula.se to visualize layers and paints.

Transcript

1. INTRODUCTION TO HÅKAN ROSENHORN
2. Running at 60 fps
3. → Browser works with frames → Tries to stay in sync with screen refresh rate (vsync) → For 60 fps each frame is ~16 ms → Complete work within each frame → Missed frame results in jank 16ms 16ms 16ms 16ms Time Frame 1 Frame 2 Frame 3 Frame 4
4. → Run JavaScript → Calculate styles → Perform layout → Paint → Composite Scripting Recalc style Composit Paint 16ms 16ms Scripting Recalc style Composit Paint Time
5. offsetTop, offsetHeight width, height box-shadow, border-radius transform, opacity complete list on: http://csstriggers.com/ Common cause and effect
7. http://www.html5rocks.com/en/tutorials/speed/rendering/too-much-layout.html
8. http://www.jula.se
10. → Stuttering when scrolling → Unresponsive rendering → Bad user interaction
11. → Doing animations with setTimeout or setInterval → Doing to much scripting (wheel, mousemove etc) → Event handlers → XHR requests → Garbage collection → Blowing the frame budget
12. http://www.html5rocks.com/en/tutorials/speed/layers/
14. → Breaks up the page in smaller pieces → Be more GPU friendly → Each layer is painted individually → Uploaded as texture to the GPU → Will not repaint unless modified → Key to performant animations
15. → HUMAN VIEW OF PAGE → BROWSER VIEW OF PAGE
16. → <video> and <canvas> elements → Elements with accelerated css filters → 3D or perspective transform CSS properties → translateZ anyone? → Too many layers also cause problems
17. WHEN TIMELINE FALLS SHORT
19. → Hardcore debugging tool → Used by Chrome devs to hunt bugs → Can trace all of Chrome’s subsystem → Networking → Scripting → Rendering → etc → We will only focus on rendering → Understand invalidations → View layer usage → Composition chrome://tracing
20. http://www.jula.se
21. http://www.jula.se → BEFORE TRANSFORM → BEFORE TRANSFORM
22. HÅKAN ROSENHORN