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