AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

HTML5 Mobile Web USED BY MILLIONS by Dave Arel

发布者 mobile
发布于 1440118882373  浏览 2479 关键词 English, HTML5, 移动开发 
分享到

第1页

HTML5 Mobile Web:

USED BY MILLIONS

Dave Arel

@davearel davearel.com



第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页

Start Your Engine

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



第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



第23页

HTML5 Mobile Web: Used By Millions



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



第25页

GraphicsContext

“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



第33页

How?!

.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



第38页

HTML5 Mobile Web: Used By Millions



davearel.com



第39页

HTML5 Mobile Web: Used By Millions



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



第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



第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



第44页

THE END



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。