225 web page design with the gpu in mind

2. Web Page Design With The GPU in Mind Supercharge your page rendering with the GPU Grace Kloba Colt McAnlis Tech Lead - Chrome for Android Developer Advocate Chrome #perfmatters
3. How does a web page get drawn? More importantly, why hasn't it drawn my cat photos yet?
4. Software Rasterization #perfmatters
5. Scrolling & Rasterization #perfmatters
6. Scrolling & Rasterization #perfmatters
7. Animation & Rasterization Must paint old rectangle and new rectangle #perfmatters
8. High DPI = High amounts of work Device px/inch iPad Mini ~ 160 Kindle Fire ~ 170 Nexus 7 ~ 216 Macbook + Retina ~ 220 Chromebook Pixel ~ 239 Nexus 10 ~ 300 HiDPI screes require 4x pixels! Which means 4x the amount of work to paint! #perfmatters
9. Hardware Compositing Using the GPU to make even faster websites
10. Graphics Processing Unit #perfmatters
11. GPU To the rescue! GPU Woot! FRAME 1 CPU FRAME 2 FRAME 3 #perfmatters
12. Tiling Textures = Memory Win #perfmatters
13. Caching Tiles #perfmatters
14. Caching Tiles Still in Cache, Not visible Still in Cache, Visible New Tiles added #perfmatters
15. Tiles Recycled #perfmatters
16. Pre-Painting Visible tiles Not yet-visible, but pre-painted #perfmatters
17. Tiling and Animation #perfmatters
18. Animation & Rasterization GPU Layer 1 GPU Layer 2 #perfmatters
19. Tiling and Animation Woot! #perfmatters
20. Controlling Layers with CSS How developers can use all this.
21. Hands-Free layer promotion Plugins Video Canvas #perfmatters
22. 3D Transform = Auto layer promotion ● ● ● ● ● ● ● ● ● TranslateZ ScaleZ RotateX RotateY RotateZ Translate3D Scale3D Rotate3D backface-visibility: hidden 2D Transforms do NOT create layer #perfmatters
23. CSS Animations OPACITY and TRANSFORM #perfmatters
24. Tradeoffs and consequences The GPU is not a silver bullet!
25. The cost of too many layers : Additional Memory #perfmatters GPU Tile Cache X X
26. Sorting The cost of too many layers : #perfmatters Additional Processing
27. Layering & Animation tradeoffs translateZ(0) ==> Layer promotion ==> Memory Usage #perfmatters
28. display:none invalidates pre-painting display:none display:block Triggers Paint display:block translateZ(0) Load-time Paint Gambling on potential usage #perfmatters
29. Input with Threaded Compositing We should be able to render w/o needing to be blocked by input
30. Responding to paint requests TIME paint composite paint composite paint BLINK thread 16ms VBLANK #perfmatters VBLANK composite
31. Single threaded event queue parsing layout VBLANK #perfmatters paint Composite JS EVENT setInterval VBLANK layout paint Composite
32. Outta Time 2ms Touch Events 2ms JS EVENT 8ms onLoad() callback 3ms layout 6ms paint 16MS "Multi Threaded Painting" #perfmatters 2ms composite
33. Threaded compositing - Multithreaded parsing layout paint JS EVENT layout BLINK thread ! Composite Needed Compositor thread composite VBLANK #perfmatters paint
34. Let the browser scroll onload audio JS EVENT layout setInterval BLINK thread composite Compositor thread ! #perfmatters Composite Needed composite composite
35. Don't use custom scroll libraries MOUSEWHEEL EVENT layout paint BLINK thread ! Composite Needed composite Compositor thread MISSED FRAMES Custom scroll handler == Slow Performance #perfmatters
36. <style> #staticHeader { position: fixed z-index: 0 } </style> #perfmatters CSS
37. Tooling and insight Tips and tools navigating Accelerated compositing.
38. How to see what layers you have Turn on "show layer borders" in devtools options #perfmatters
39. chrome://tracing 51ms to decode #perfmatters 29ms to resize 22ms
40. Browser-driven scroll COMPOSITE! 1 #perfmatters 2 3 4
41. JS driven Scroll COMPOSITE! 1 #perfmatters 2 33 ms 3
42. Webpage design with the GPU in mind ● GPU + Layers = faster rendering ● Too many layers = seriously bad time ● Let browser handle scrolling = steady frame rate ● Use tooling to show off how many layers you have #perfmatters
43. #perfmatters goo.gl/webperf </Thank You!> klobag@google.com colton@google.com +Grace Kloba +Colt McAnlis