Your SlideShare is downloading. ×
快!快!快! 互联网第一条军规
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

快!快!快! 互联网第一条军规

1,110
views

Published on

Published in: Technology, Design

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,110
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 快快快!  互联网第一军规   钟馥百h#p://www.phonegap.cn  
  • 2. 议程  •  用户体验之殇•  快-­‐第一军规•  互联网加速方案•  移动互联网速度之殇•  离线Web应用  •  本地Web应用  
  • 3.   Google  
  • 4. First  Req:        419ms  Onload:              1.94s  Complete:      2.34s  
  • 5. Baidu  
  • 6. First  Req:        128ms  Onload:              529ms  Complete:      466ms  
  • 7. Weibo  
  • 8. First  Req:      762ms  Onload:                6.71s  Complete:        6.09s  
  • 9. 速度  ms/k (越小越好)  80.0  70.0   74.0  60.0  50.0  40.0   41.3   速度  ms/k  30.0   29.9  20.0  10.0   0.0   Google   Baidu   Weibo  
  • 10. 速度 – 用户体验第一感  
  • 11. Facebook  
  • 12. 速度太慢,打不开。    我没也办法  
  • 13. 速度 – 用户体验之殇  
  • 14. 快快快,互联网第一军规  
  • 15. 互联网加速方案  •  方案   –  Expires   –  CDN   –  Minify   –  …  •  工具   –  ySlow   –  PageSpeed    
  • 16. 移动互联网呢?  
  • 17. Network  Latency!  
  • 18. Credit:  AT&T  Source:  h#p://bit.ly/uWsfiw  
  • 19. Latency  of  Network  (theory)   Credit: Huawei  
  • 20. 我们该如何加速呢?  
  • 21. 加速方案  •  离线Web应用   –  Offline  Web  Applicaaon  •  本地Web应用   –  PhoneGap  
  • 22. Offline  Web  Applicaaon   离线Web应用  
  • 23. 曾经的Google  Gears。。。  
  • 24. Offline  Web  Applicaaon  •  h#p://www.whatwg.org/specs/web-­‐apps/ current-­‐work/mulapage/offline.html  •  Living  Standard   –  Last  Updated  15  December  2011  
  • 25.    
  • 26. CACHE  MANIFEST  #  2011-­‐12-­‐10:v1    #  Explicitly  cached  master  entries.  CACHE:  favicon.ico  index.html  css/main.css  scripts/main.js  images/logo.png    #  Resources  that  require  the  user  to  be  online.  NETWORK:  *  
  • 27. Sample  -­‐  InfoQ  
  • 28. 准备工作  •  Apache   –  Remote  ETag,  Last-­‐Modified  header   –  Set  ExpiresDefault  to  “now”  
  • 29. No  Offline   No  Offline   Total:  3.09s  
  • 30. Apache  Log  
  • 31. cache.manifest  •  CACHE  MANIFEST  •  #  2011-­‐12-­‐10:V1  •  CACHE:  •  index.html  •  image/aracles.png  •  image/news.png  •  image/tags.png  •  lib/css/sencha-­‐touch.css  •  lib/sencha-­‐touch.js  •  phonegap.js  •  …  •  NETWORK:  •  infoqcn/  
  • 32. Offline  Total:  1.33s  
  • 33. Apache  Log  
  • 34. Offline  Web  Applicaaon更新  •  更新  cache.manifest  文件  •  用户重新请求url,或者  •  使用  window.applicaaonCache  的方法   –  update()   –  swapCache()  
  • 35. var  appCache  =  window.applicaaonCache;    appCache.update();  //  A#empt  to  update  the  users  cache.    ...    if  (appCache.status  ==  window.applicaaonCache.UPDATEREADY)  {      appCache.swapCache();    //  The  fetch  was  successful,  swap  in  the  new  cache.  }  
  • 36. 注意的问题  •  双重刷新    
  • 37. 注意的问题  •  只能显示声明CACHE的url才能被cache  •  只有修改cache.manifest才能更新cache,或 者用户的浏览器Cache被清空  •  只有NETWORK中的url才能访问  •  即不在CACHE中,又不在NETWORK中的url, 会无法访问  
  • 38. 更快的呢?  
  • 39. Online  to  Offline   本地Web应用  
  • 40. PhoneGap  •  h#p://www.phoengap.com  •  h#p://www.phonegap.cn  •  开源的移动应用开发框架  •  使用HTML、CSS和Javascript来构建跨平台   移动应用程序  •  直接生成本地应用  
  • 41. Network  Latency?  
  • 42. X   Network  Latency  ==  0ms  
  • 43. Everything  is  in  local!  
  • 44. Except,  the  service  data…  
  • 45. 快 – 就一个字  
  • 46. Sample  -­‐  InfoQ  
  • 47. 本地存储  LocalStorage、SQL  Database  
  • 48. 享受Naave  API带来的性能提升  
  • 49. 快快快!  互联网第一军规  
  • 50. Q&A