Dave Arel
!
bellycard.com
Accelerate Yo’
HTML5 Mobile App
With the GPU
@davearel
Slide 2
Slide 2 text
Accelerate Yo’ HTML5 Mobile App @davearel
2
Slide 3
Slide 3 text
CHICAGO
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Accelerate Yo’ HTML5 Mobile App @davearel
10
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Accelerate Yo’ HTML5 Mobile App @davearel
13
Start Your Engine
Browser Rendering Engine
Slide 14
Slide 14 text
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
Accelerate Yo’ HTML5 Mobile App @davearel
16
CPU & GPU
You meh’ G-Unit
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Accelerate Yo’ HTML5 Mobile App @davearel
21
Painting:
The visual representation in memory.
Drawing:
Casting the visual representation onto the screen.
Slide 22
Slide 22 text
Accelerate Yo’ HTML5 Mobile App @davearel
22
GraphicsContext
“Backing Store”
Accelerate Yo’ HTML5 Mobile App @davearel
34
Reasons for compositing
• Layer has 3D or perspective transform CSS properties
• and 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
Slide 35
Slide 35 text
Accelerate Yo’ HTML5 Mobile App @davearel
35
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Accelerate Yo’ HTML5 Mobile App @davearel
41
“Cacheing”
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
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/