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

快快快！  互联网第一军规  

钟馥百

h#p://www.phonegap.cn  

议程  

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

Google  

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

Baidu  

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

Weibo  

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

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  

速度 – 用户体验第一感  

Facebook  

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

速度 – 用户体验之殇  

快快快，互联网第一军规  

互联网加速方案  

•  方案  – Expires  – CDN  – Minify  – …  

•  工具  – ySlow  – PageSpeed  

移动互联网呢？  

Network  Latency!  

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

Latency  of  Network  (theory)  

Credit： Huawei  

我们该如何加速呢？  

加速方案  

•  离线Web应用  – Offline  Web  Applicaaon  

•  本地Web应用  – PhoneGap  

Offline  Web  Applicaaon  离线Web应用  

曾经的Google  Gears。。。  

Offline  Web  Applicaaon  

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

•  Living  Standard  – Last  Updated  15  December  2011  

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

Sample  -­‐  InfoQ  

准备工作  

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

No  Offline  

No  Offline  

Total:  3.09s  

Apache  Log  

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/  

Offline  

Total:  1.33s  

Apache  Log  

Offline  Web  Applicaaon更新  

•  更新  cache.manifest  文件  

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

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.  }  

注意的问题  

•  双重刷新    

注意的问题  

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

•  只有NETWORK中的url才能访问  

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

更快的呢？  

Online  to  Offline  本地Web应用  

PhoneGap  

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

•  直接生成本地应用  

Network  Latency?  

Network  Latency  ==  0ms  X  

Everything  is  in  local!  

Except,  the  service  data…  

快 – 就一个字  

Sample  -­‐  InfoQ  

本地存储  LocalStorage、SQL  Database  

享受Naave  API带来的性能提升  

快快快！  互联网第一军规  

Q&A