high performance mobile web
DESCRIPTION
My Last Tech Talk at Yahoo!TRANSCRIPT
High Performance Mobile Web
Morgan ChengFeb 17th, 2012
It is Mobile
Mobile AppMobile Web
User
The Middle Man
Developer
Multiple Platforms
Mobile Web: Cross Platform Solution
Modern Mobile is Blessed with HTML5
http://blog.sc5.fi/2012/01/html5-web-app-architecture-explained/
Architecture
These Best Practices Still Work?
http://developer.yahoo.com/performance/rules.html
More Tips
Deal With Designer
In the Eyes of Designer
Beautiful Radial Gradient
Smooth Rotating
Stereovision created by shadow
In the Eyes of Developer
The Background Image Might Hurt Performance
What’s the rotating center, radius and angle?
Should The Shadow Be CSS or Image?
Balance For Perfect
Cache is Limited
http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
Always Minify Your Resources
Cookie + LocalStorage
More HTTP Requests Mean Slower
First Visit
Server BrowserBig HTML LocalStorageResources
With inline JS, CSS and data-URI
Extract Resources and Save to LocalStorage; Set Cookie
Without Cookie
Second Visit
Server BrowserBig HTML LocalStorage
With reference to keys in LocalStorage
Load Resources and Insert into DOM
With Cookie
Resources
Favor transition over timer
Animation with Timer
Change Element’s Style with setTimeout Browser Has No Idea What is Actually Doing
http://jsfiddle.net/r5mYr/
Animation with Transition
Let Browser Know It is Animationhttp://jsfiddle.net/Rapvs/
Animation with Transition
Let Browser Know It is Animationhttp://jsfiddle.net/Rapvs/
With transform, it is betterhttp://jsfiddle.net/DwtCc/
Be Careful With CSS3
-webkit-gradient-webkit-box-shadow
Static Images Render Faster
Background Image + ARIA
background-image Faster Than <img>
<img src=“photo.png” alt=“One Photo”>
<div id=“photo”></div>#photo {
background-image: url(photo.png);}
background-image only break the semantics
background-image Faster Than <img>
<div id=“photo” role=“img” aria-label=“One Photo”></div>
#photo {background-image: url(photo.png);
}
Reduce Reflow & Repaint
DOM Tree
Render Tree
Style Sheet
HTML
JavaScript
Flow
Paint
-webkit-tap-highlight-color:Overrides the highlight color shown when the
user taps a link or a JavaScript clickable element in Safari on iOS.
/* Avoid Repaint of JS Clickable Element*/
-webkit-tap-highlight-color: transparent
Use Touch Events
touchend Faster Than click
var tapEvent = ‘ontouchend’ in document ? ‘touchend’ : ‘click’;
node.delegate(tapEvent, …);
Hardware Acceleration
http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/
/* Force 3D Acceleration */
-webkit-transform: translate3d(0,0,0);
-webkit-transform: tranlsateZ(0);
-webkit-transform: scale3d(1,1,1);
-webkit-transform: scale3dZ(1);
Hardware AccelerationConsumes Battery & Memory
AppCache For Full Screen
Ideally, Mobile Web Can Be Full Screen
$(window).on('load', function() { /mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function () { if (!win.pageYOffset) window.scrollTo(0, 1); }, 200);});
Address Bar is Hidden
ToolBar is Still There
<!-- enable full-screen mode --><meta name="apple-mobile-web-app-capable"
content="yes"/>
<!-- controls the appearance of the status bar in full-screen mode -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
Status Bar is Customized
ToolBar is Hidden
Till iOS5, Full Screen Web Launched From Home Screen Cannot Leverage Browser Cache
AppCache Helps Full Screen
<!doctype html><html manifest=“index.appcache”><head>…
CACHE MANIFESTx.htmlxxx.jsxxx.cssxxxxxx.png
Dawn of Mobile Web Performance
Thank You!
Find Me
@morgancheng
@程墨Morgan
http://www.facebook.com/morgan.chengmo