Accelerate Your Mobile Apps

Talk from CSS Summit July 2014

http://environmentsforhumans.com/2014/css-summit/

Transcript

1. Dave Arel ! bellycard.com Accelerate Yo’ HTML5 Mobile App With the GPU @davearel
2. Accelerate Yo’ HTML5 Mobile App @davearel 2
3. CHICAGO
10. Accelerate Yo’ HTML5 Mobile App @davearel 10
13. Accelerate Yo’ HTML5 Mobile App @davearel 13 Start Your Engine Browser Rendering Engine
14. 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
15. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Rendering_engines
16. Accelerate Yo’ HTML5 Mobile App @davearel 16 CPU & GPU You meh’ G-Unit
21. Accelerate Yo’ HTML5 Mobile App @davearel 21 Painting: The visual representation in memory. Drawing: Casting the visual representation onto the screen.
22. Accelerate Yo’ HTML5 Mobile App @davearel 22 GraphicsContext “Backing Store”
24. Accelerate Yo’ HTML5 Mobile App @davearel 24
30. Accelerate Yo’ HTML5 Mobile App @davearel 30
31. Accelerate Yo’ HTML5 Mobile App @davearel 31
32. Accelerate Yo’ HTML5 Mobile App @davearel 32
33. Accelerate Yo’ HTML5 Mobile App @davearel 33 How?! .keyboard, .key { -webkit-transform: translate3d(0, 0, 0); }
34. Accelerate Yo’ HTML5 Mobile App @davearel 34 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 35
41. Accelerate Yo’ HTML5 Mobile App @davearel 41 “Cacheing”
42. Accelerate Yo’ HTML5 Mobile App @davearel 42 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
43. Accelerate Yo’ HTML5 Mobile App @davearel 43 will-change The future of compositing http://www.w3.org/TR/2014/WD-css-will-change-1-20140429/
45. THE END @davearel