The document discusses best practices for optimizing performance on the mobile web. It recommends using the mobile web as a cross-platform solution, leveraging HTML5 capabilities. Key tips include minimizing HTTP requests, using local storage and cookies to cache resources, favoring CSS transitions over timers for animation, using touch events instead of click events, and enabling hardware acceleration where possible. It also discusses using the app cache manifest to allow full-screen web apps on mobile.

1. High Performance Mobile Web
Morgan Cheng
Feb 17th, 2012

2. It is Mobile

3. Mobile Web Mobile App

4. The Middle Man
User Developer

5. Multiple Platforms

6. Mobile Web: Cross Platform Solution

7. Modern Mobile is Blessed with HTML5

8. Architecture
http://blog.sc5.fi/2012/01/html5-web-app-architecture-explained/

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

10. More Tips

11. Deal With Designer

13. In the Eyes of Designer
Beautiful
Radial
Gradient
Smooth
Rotating
Stereovision
created by
shadow

14. 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?

15. Balance For Perfect

16. Cache is Limited

17. http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/

18. Always Minify Your Resources

19. Cookie + LocalStorage

20. More HTTP Requests Mean Slower

21. First Visit
Without Cookie
Server Browser Resources
LocalStorage
Big HTML
With inline JS, CSS Extract Resources and Save to
and data-URI LocalStorage; Set Cookie

22. Second Visit
With Cookie
Server Browser Resources
LocalStorage
Big HTML
With reference to Load Resources and Insert
keys in LocalStorage into DOM

23. Favor transition over timer

24. Animation with Timer
Change Element’s Style with setTimeout
Browser Has No Idea What is Actually Doing
http://jsfiddle.net/r5mYr/

25. Animation with Transition
Let Browser Know It is Animation
http://jsfiddle.net/Rapvs/

26. Animation with Transition
Let Browser Know It is Animation
http://jsfiddle.net/Rapvs/
With transform, it is better
http://jsfiddle.net/DwtCc/

27. Be Careful With CSS3

28. -webkit-gradient
-webkit-box-shadow
Static Images Render Faster

29. Background Image + ARIA

30. background-image Faster Than <img>
<imgsrc=“photo.png” alt=“One Photo”>
<div id=“photo”></div>
#photo {
background-image: url(photo.png);
}

31. background-image only
break the semantics

32. background-image Faster Than <img>
<div id=“photo” role=“img” aria-label=“One
Photo”></div>
#photo {
background-image: url(photo.png);
}

33. Reduce Reflow & Repaint

34. HTML DOM Tree Flow
JavaScript Render Tree
Style Sheet
Paint

35. -webkit-tap-highlight-color:
Overrides the highlight color shown when the
user taps a link or a JavaScript clickable
element in Safari on iOS.

36. /* Avoid Repaint of JS Clickable Element*/
-webkit-tap-highlight-color: transparent

37. Use Touch Events

38. touchend Faster Than click

39. vartapEvent= ‘ontouchend’ in document ?
‘touchend’ : ‘click’;
node.delegate(tapEvent, …);

40. Hardware Acceleration

41. http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/

42. /* Force 3D Acceleration */
-webkit-transform: translate3d(0,0,0);
-webkit-transform: tranlsateZ(0);
-webkit-transform: scale3d(1,1,1);
-webkit-transform: scale3dZ(1);

43. Hardware Acceleration
Consumes Battery & Memory

44. AppCache For Full Screen

45. Ideally, Mobile
Web Can Be
Full Screen

46. $(window).on('load', function() {
/mobile/i.test(navigator.userAgent) &&
!location.hash&&
setTimeout(function () {
if (!win.pageYOffset) window.scrollTo(0, 1);
}, 200);
});

47. Address Bar is
Hidden
ToolBar is Still
There

48. <!-- 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"/>

49. Status Bar is
Customized
ToolBar is Hidden

50. Till iOS5, Full Screen Web Launched
From Home Screen Cannot Leverage
Browser Cache

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

52. Dawn of Mobile Web Performance

53. Thank You!

54. Find Me
@程墨Morgan
@morgancheng
http://www.facebook.com/m
organ.chengmo