快!快!快! 互联网第一条军规
-
Upload
yangdj -
Category
Technology
-
view
95 -
download
2
description
Transcript of 快!快!快! 互联网第一条军规
快快快! 互联网第一军规
钟馥百
h#p://www.phonegap.cn
议程
• 用户体验之殇 • 快-‐第一军规 • 互联网加速方案 • 移动互联网速度之殇 • 离线Web应用 • 本地Web应用
First Req: 419ms Onload: 1.94s Complete: 2.34s
Baidu
First Req: 128ms Onload: 529ms Complete: 466ms
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
速度 – 用户体验第一感
速度太慢,打不开。 我没也办法
速度 – 用户体验之殇
快快快,互联网第一军规
互联网加速方案
• 方案 – 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