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

1,519 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,519
On SlideShare
0
From Embeds
0
Number of Embeds
316
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. 快快快!  互联网第一军规   钟馥百h#p://www.phonegap.cn  
  2. 2. 议程  •  用户体验之殇•  快-­‐第一军规•  互联网加速方案•  移动互联网速度之殇•  离线Web应用  •  本地Web应用  
  3. 3.   Google  
  4. 4. First  Req:        419ms  Onload:              1.94s  Complete:      2.34s  
  5. 5. Baidu  
  6. 6. First  Req:        128ms  Onload:              529ms  Complete:      466ms  
  7. 7. Weibo  
  8. 8. First  Req:      762ms  Onload:                6.71s  Complete:        6.09s  
  9. 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. 10. 速度 – 用户体验第一感  
  11. 11. Facebook  
  12. 12. 速度太慢,打不开。    我没也办法  
  13. 13. 速度 – 用户体验之殇  
  14. 14. 快快快,互联网第一军规  
  15. 15. 互联网加速方案  •  方案   –  Expires   –  CDN   –  Minify   –  …  •  工具   –  ySlow   –  PageSpeed    
  16. 16. 移动互联网呢?  
  17. 17. Network  Latency!  
  18. 18. Credit:  AT&T  Source:  h#p://bit.ly/uWsfiw  
  19. 19. Latency  of  Network  (theory)   Credit: Huawei  
  20. 20. 我们该如何加速呢?  
  21. 21. 加速方案  •  离线Web应用   –  Offline  Web  Applicaaon  •  本地Web应用   –  PhoneGap  
  22. 22. Offline  Web  Applicaaon   离线Web应用  
  23. 23. 曾经的Google  Gears。。。  
  24. 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. 25.    
  26. 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. 27. Sample  -­‐  InfoQ  
  28. 28. 准备工作  •  Apache   –  Remote  ETag,  Last-­‐Modified  header   –  Set  ExpiresDefault  to  “now”  
  29. 29. No  Offline   No  Offline   Total:  3.09s  
  30. 30. Apache  Log  
  31. 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. 32. Offline  Total:  1.33s  
  33. 33. Apache  Log  
  34. 34. Offline  Web  Applicaaon更新  •  更新  cache.manifest  文件  •  用户重新请求url,或者  •  使用  window.applicaaonCache  的方法   –  update()   –  swapCache()  
  35. 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. 36. 注意的问题  •  双重刷新    
  37. 37. 注意的问题  •  只能显示声明CACHE的url才能被cache  •  只有修改cache.manifest才能更新cache,或 者用户的浏览器Cache被清空  •  只有NETWORK中的url才能访问  •  即不在CACHE中,又不在NETWORK中的url, 会无法访问  
  38. 38. 更快的呢?  
  39. 39. Online  to  Offline   本地Web应用  
  40. 40. PhoneGap  •  h#p://www.phoengap.com  •  h#p://www.phonegap.cn  •  开源的移动应用开发框架  •  使用HTML、CSS和Javascript来构建跨平台   移动应用程序  •  直接生成本地应用  
  41. 41. Network  Latency?  
  42. 42. X   Network  Latency  ==  0ms  
  43. 43. Everything  is  in  local!  
  44. 44. Except,  the  service  data…  
  45. 45. 快 – 就一个字  
  46. 46. Sample  -­‐  InfoQ  
  47. 47. 本地存储  LocalStorage、SQL  Database  
  48. 48. 享受Naave  API带来的性能提升  
  49. 49. 快快快!  互联网第一军规  
  50. 50. Q&A  

×