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

70
快快快互联网第一军规 钟馥百 h#p://www.phonegap.cn

description

 

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

Page 1: 快!快!快! 互联网第一条军规

快快快!  互联网第一军规  

钟馥百

h#p://www.phonegap.cn  

Page 2: 快!快!快! 互联网第一条军规

议程  

•  用户体验之殇 •  快-­‐第一军规 •  互联网加速方案 •  移动互联网速度之殇 •  离线Web应用  •  本地Web应用  

Page 3: 快!快!快! 互联网第一条军规

 

Google  

Page 4: 快!快!快! 互联网第一条军规

First  Req:        419ms  Onload:              1.94s  Complete:      2.34s  

Page 5: 快!快!快! 互联网第一条军规

Baidu  

Page 6: 快!快!快! 互联网第一条军规

First  Req:        128ms  Onload:              529ms  Complete:      466ms  

Page 7: 快!快!快! 互联网第一条军规

Weibo  

Page 8: 快!快!快! 互联网第一条军规

First  Req:      762ms  Onload:                6.71s  Complete:        6.09s  

Page 9: 快!快!快! 互联网第一条军规

29.9  

41.3  

74.0  

0.0  

10.0  

20.0  

30.0  

40.0  

50.0  

60.0  

70.0  

80.0  

Google   Baidu   Weibo  

速度  ms/k (越小越好)  

速度  ms/k  

Page 10: 快!快!快! 互联网第一条军规

速度 – 用户体验第一感  

Page 11: 快!快!快! 互联网第一条军规

Facebook  

Page 12: 快!快!快! 互联网第一条军规

速度太慢,打不开。    我没也办法  

Page 13: 快!快!快! 互联网第一条军规

速度 – 用户体验之殇  

Page 14: 快!快!快! 互联网第一条军规

快快快,互联网第一军规  

Page 15: 快!快!快! 互联网第一条军规

互联网加速方案  

•  方案  – Expires  – CDN  – Minify  – …  

•  工具  – ySlow  – PageSpeed  

 

Page 16: 快!快!快! 互联网第一条军规

移动互联网呢?  

Page 17: 快!快!快! 互联网第一条军规
Page 18: 快!快!快! 互联网第一条军规

Network  Latency!  

Page 19: 快!快!快! 互联网第一条军规

Credit:  AT&T  Source:  h#p://bit.ly/uWsfiw  

Page 20: 快!快!快! 互联网第一条军规

Latency  of  Network  (theory)  

Credit: Huawei  

Page 21: 快!快!快! 互联网第一条军规

我们该如何加速呢?  

Page 22: 快!快!快! 互联网第一条军规

加速方案  

•  离线Web应用  – Offline  Web  Applicaaon  

•  本地Web应用  – PhoneGap  

Page 23: 快!快!快! 互联网第一条军规

Offline  Web  Applicaaon  离线Web应用  

Page 24: 快!快!快! 互联网第一条军规

曾经的Google  Gears。。。  

Page 25: 快!快!快! 互联网第一条军规

Offline  Web  Applicaaon  

•  h#p://www.whatwg.org/specs/web-­‐apps/current-­‐work/mulapage/offline.html  

•  Living  Standard  – Last  Updated  15  December  2011  

Page 26: 快!快!快! 互联网第一条军规

   

Page 27: 快!快!快! 互联网第一条军规
Page 28: 快!快!快! 互联网第一条军规
Page 29: 快!快!快! 互联网第一条军规
Page 30: 快!快!快! 互联网第一条军规
Page 31: 快!快!快! 互联网第一条军规
Page 32: 快!快!快! 互联网第一条军规
Page 33: 快!快!快! 互联网第一条军规
Page 34: 快!快!快! 互联网第一条军规
Page 35: 快!快!快! 互联网第一条军规
Page 36: 快!快!快! 互联网第一条军规
Page 37: 快!快!快! 互联网第一条军规
Page 38: 快!快!快! 互联网第一条军规

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:  *  

Page 39: 快!快!快! 互联网第一条军规

Sample  -­‐  InfoQ  

Page 40: 快!快!快! 互联网第一条军规
Page 41: 快!快!快! 互联网第一条军规
Page 42: 快!快!快! 互联网第一条军规
Page 43: 快!快!快! 互联网第一条军规

准备工作  

•  Apache  – Remote  ETag,  Last-­‐Modified  header  – Set  ExpiresDefault  to  “now”  

Page 44: 快!快!快! 互联网第一条军规

No  Offline  

No  Offline  

Total:  3.09s  

Page 45: 快!快!快! 互联网第一条军规

Apache  Log  

Page 46: 快!快!快! 互联网第一条军规

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/  

Page 47: 快!快!快! 互联网第一条军规

Offline  

Total:  1.33s  

Page 48: 快!快!快! 互联网第一条军规

Apache  Log  

Page 49: 快!快!快! 互联网第一条军规

Offline  Web  Applicaaon更新  

•  更新  cache.manifest  文件  

•  用户重新请求url,或者  •  使用  window.applicaaonCache  的方法  – update()  – swapCache()  

Page 50: 快!快!快! 互联网第一条军规

var  appCache  =  window.applicaaonCache;    appCache.update();  //  A#empt  to  update  the  user's  cache.    ...    if  (appCache.status  ==  window.applicaaonCache.UPDATEREADY)  {      appCache.swapCache();    //  The  fetch  was  successful,  swap  in  the  new  cache.  }  

Page 51: 快!快!快! 互联网第一条军规

注意的问题  

•  双重刷新    

Page 52: 快!快!快! 互联网第一条军规
Page 53: 快!快!快! 互联网第一条军规

注意的问题  

•  只能显示声明CACHE的url才能被cache  •  只有修改cache.manifest才能更新cache,或者用户的浏览器Cache被清空  

•  只有NETWORK中的url才能访问  

•  即不在CACHE中,又不在NETWORK中的url,会无法访问  

Page 54: 快!快!快! 互联网第一条军规

更快的呢?  

Page 55: 快!快!快! 互联网第一条军规

Online  to  Offline  本地Web应用  

Page 56: 快!快!快! 互联网第一条军规

PhoneGap  

•  h#p://www.phoengap.com  •  h#p://www.phonegap.cn  •  开源的移动应用开发框架  •  使用HTML、CSS和Javascript来构建跨平台  移动应用程序  

•  直接生成本地应用  

Page 57: 快!快!快! 互联网第一条军规

Network  Latency?  

Page 58: 快!快!快! 互联网第一条军规

Network  Latency  ==  0ms  X  

Page 59: 快!快!快! 互联网第一条军规

Everything  is  in  local!  

Page 60: 快!快!快! 互联网第一条军规

Except,  the  service  data…  

Page 61: 快!快!快! 互联网第一条军规
Page 62: 快!快!快! 互联网第一条军规
Page 63: 快!快!快! 互联网第一条军规

快 – 就一个字  

Page 64: 快!快!快! 互联网第一条军规

Sample  -­‐  InfoQ  

Page 65: 快!快!快! 互联网第一条军规
Page 66: 快!快!快! 互联网第一条军规
Page 67: 快!快!快! 互联网第一条军规

本地存储  LocalStorage、SQL  Database  

Page 68: 快!快!快! 互联网第一条军规

享受Naave  API带来的性能提升  

Page 69: 快!快!快! 互联网第一条军规

快快快!  互联网第一军规  

Page 70: 快!快!快! 互联网第一条军规

Q&A