High Performance Mobile Web

High Performance Mobile Web Morgan Cheng Feb 17th, 2012

It is Mobile

Mobile Web Mobile App

The Middle ManUser Developer

Multiple Platforms

Mobile Web: Cross Platform Solution

Modern Mobile is Blessed with HTML5

Architecturehttp://blog.sc5.fi/2012/01/html5-web-app-architecture-explained/

These Best Practices Still Work? http://developer.yahoo.com/performance/rules.html

More Tips

Deal With Designer

In the Eyes of Designer Beautiful Radial GradientSmoothRotating Stereovision created by shadow

In the Eyes of Developer The Background Image Might Hurt PerformanceWhat’s therotatingcenter, radiusand 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 Without Cookie Server Browser Resources LocalStorage Big HTMLWith inline JS, CSS Extract Resources and Save toand data-URI LocalStorage; Set Cookie

Second Visit With CookieServer Browser Resources LocalStorage Big HTMLWith reference to Load Resources and Insertkeys in LocalStorage into DOM

Favor transition over timer

Animation with TimerChange Element’s Style with setTimeoutBrowser Has No Idea What is Actually Doinghttp://jsfiddle.net/r5mYr/

Animation with TransitionLet Browser Know It is Animationhttp://jsfiddle.net/Rapvs/

Animation with TransitionLet Browser Know It is Animationhttp://jsfiddle.net/Rapvs/With transform, it is betterhttp://jsfiddle.net/DwtCc/

Be Careful With CSS3

-webkit-gradient-webkit-box-shadowStatic Images Render Faster

Background Image + ARIA

background-image Faster Than <img><imgsrc=“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

HTML DOM Tree FlowJavaScript Render Tree Style Sheet 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

vartapEvent= ‘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 isHidden ToolBar is Still There

<meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status- bar-style" content="black"/>

Status Bar isCustomized ToolBar is Hidden

Till iOS5, Full Screen Web LaunchedFrom Home Screen Cannot Leverage Browser Cache

AppCache Helps Full Screen<!doctype html><html manifest=“index.appcache”><head>… CACHE MANIFEST x.html xxx.js xxx.css xxxxxx.png

Dawn of Mobile Web Performance

Thank You!

Find Me@程墨Morgan@morganchenghttp://www.facebook.com/m organ.chengmo

http://econsultancy.com	3105
http://marketing-digital.wsimarketingeninternet.com	34
http://apps.synaptive.net	16
http://translate.googleusercontent.com	10
http://bundlr.com	7
http://www.hanrss.com	5
http://core.traackr.com	4
http://www.encarolina.com	3
http://www.newsblur.com	2
http://ebulletin.collected.info	2
http://electrosmart.com	1
http://131.253.14.250	1
http://www.diffbot.com&_=1356882912154 HTTP	1
http://www.diffbot.com&_=1356882926430 HTTP	1
http://www.diffbot.com&_=1356882943086 HTTP	1

High Performance Mobile Web

by mocheng on Feb 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

15 Embeds 3,193

Statistics

High Performance Mobile Web Presentation Transcript