AruchSummit2014 -

Transcript

1. Dave Arel davearel.com HTML5 Mobile Web: USED BY MILLIONS @davearel
2. HTML5 Mobile Web: Used By Millions davearel.com
3. CHICAGO
5. HTML5 Mobile Web: Used By Millions davearel.com
10. “The biggest mistake we made as a company was HTML5” ~Zuck
12. THE PROBLEM • Deploying took time and money • Innovation Slowed • Bugs could kill all activity
14. The Code • Backbone.js • Dogbone.js (Custom) • Phonegap (For Plugin Architecture) • Bootloader
15. HTML5 Mobile Web: Used By Millions davearel.com Start Your Engine Browser Rendering Engine
16. 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
17. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Rendering_engines
19. HTML5 Mobile Web: Used By Millions davearel.com CPU & GPU You meh’ G-Unit
23. HTML5 Mobile Web: Used By Millions davearel.com
24. HTML5 Mobile Web: Used By Millions davearel.com Painting: The visual representation in memory. Drawing: Casting the visual representation onto the screen.
25. HTML5 Mobile Web: Used By Millions davearel.com GraphicsContext “Backing Store”
28. Not Hardware Accelerated Hardware Accelerated
29. HTML5 Mobile Web: Used By Millions davearel.com
33. HTML5 Mobile Web: Used By Millions davearel.com How?! .background, #loading { -webkit-transform: translate3d(0, 0, 0); }
35. HTML5 Mobile Web: Used By Millions davearel.com “Cacheing”
38. HTML5 Mobile Web: Used By Millions davearel.com
39. HTML5 Mobile Web: Used By Millions davearel.com
40. HTML5 Mobile Web: Used By Millions davearel.com 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
41. HTML5 Mobile Web: Used By Millions davearel.com 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. HTML5 Mobile Web: Used By Millions davearel.com will-change The future of compositing http://www.w3.org/TR/2014/WD-css-will-change-1-20140429/
44. THE END