Accelerate Yo' Mobile Apps, With The GPU

Talk given at HTML5 Developer Conference in San Francisco

Transcript

1. Dave Arel ! bellycard.com Accelerate Yo’ HTML5 Mobile App With the GPU @davearel
2. Accelerate Yo’ HTML5 Mobile App @davearel
3. CHICAGO
10. Accelerate Yo’ HTML5 Mobile App @davearel
14. Accelerate Yo’ HTML5 Mobile App @davearel Start Your Engine Browser Rendering Engine
15. Parse HTML to construct the DOM tree Render tree construction Layout of the render tree Painting the render tree http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Rendering_engines Rendering Process
16. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Rendering_engines
18. Accelerate Yo’ HTML5 Mobile App @davearel CPU & GPU You meh’ G-Unit
20. Accelerate Yo’ HTML5 Mobile App @davearel
23. Accelerate Yo’ HTML5 Mobile App @davearel
24. Accelerate Yo’ HTML5 Mobile App @davearel Painting: The visual representation in memory. Drawing: Casting the visual representation onto the screen.
25. Accelerate Yo’ HTML5 Mobile App @davearel GraphicsContext “Backing Store”
28. Not Hardware Accelerated Hardware Accelerated
29. Accelerate Yo’ HTML5 Mobile App @davearel
33. Accelerate Yo’ HTML5 Mobile App @davearel How?! .keyboard, .key { -webkit-transform: translate3d(0, 0, 0); }
34. Accelerate Yo’ HTML5 Mobile App @davearel Reasons for compositing • Layer has 3D or perspective transform CSS properties • <video> and <canvas> elements • CSS animations • Layer uses accelerated CSS filters • Layer with a composited descendant has information that needs to be in the composited layer tree, such as a clip or reflection • Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer) http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
35. Accelerate Yo’ HTML5 Mobile App @davearel
36. Accelerate Yo’ HTML5 Mobile App @davearel
40. Accelerate Yo’ HTML5 Mobile App @davearel “Cacheing”
41. Accelerate Yo’ HTML5 Mobile App @davearel Tips • Keep composite layers small • Composite elements that are updated often (not just animated) • Compositing layers off screen allows you to buffer / pre-render • Avoid several texture uploads • Use Chrome/Safari (or others) to monitor compositing
42. Accelerate Yo’ HTML5 Mobile App @davearel will-change The future of compositing http://www.w3.org/TR/2014/WD-css-will-change-1-20140429/
44. THE END @davearel