快！快！快！ 互联网第一条军规
- 1. 快快快！ 互联网第一军规 钟馥百 h#p://www.phonegap.cn
- 2. 议程 • 用户体验之殇 • 快-‐第一军规 • 互联网加速方案 • 移动互联网速度之殇 • 离线Web应用 • 本地Web应用
- 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. 移动互联网呢？
- 18. Network Latency!
- 19. Credit: AT&T Source: h#p://bit.ly/uWsfiw
- 20. Latency of Network (theory) Credit： Huawei
- 21. 我们该如何加速呢？
- 22. 加速方案 • 离线Web应用 – Offline Web Applicaaon • 本地Web应用 – PhoneGap
- 23. Offline Web Applicaaon 离线Web应用
- 25. Offline Web Applicaaon • h#p://www.whatwg.org/specs/web-‐apps/ current-‐work/mulapage/offline.html • Living Standard – Last Updated 15 December 2011
- 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: *
- 39. Sample -‐ InfoQ
- 43. 准备工作 • Apache – Remote ETag, Last-‐Modified header – Set ExpiresDefault to “now”
- 44. No Offline No Offline Total: 3.09s
- 45. Apache Log
- 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/
- 48. Apache Log
- 49. Offline Web Applicaaon更新 • 更新 cache.manifest 文件 • 用户重新请求url，或者 • 使用 window.applicaaonCache 的方法 – update() – swapCache()
- 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. }
- 51. 注意的问题 • 双重刷新
- 53. 注意的问题 • 只能显示声明CACHE的url才能被cache • 只有修改cache.manifest才能更新cache，或 者用户的浏览器Cache被清空 • 只有NETWORK中的url才能访问 • 即不在CACHE中，又不在NETWORK中的url， 会无法访问
- 54. 更快的呢？
- 55. Online to Offline 本地Web应用
- 56. PhoneGap • h#p://www.phoengap.com • h#p://www.phonegap.cn • 开源的移动应用开发框架 • 使用HTML、CSS和Javascript来构建跨平台 移动应用程序 • 直接生成本地应用
- 57. Network Latency?
- 58. X Network Latency == 0ms
- 59. Everything is in local!
- 60. Except, the service data…
- 63. 快 – 就一个字
- 64. Sample -‐ InfoQ
- 69. 快快快！ 互联网第一军规
- 70. Q&A