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

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

3.
Google

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应用

24. 曾经的Google
Gears。。。

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/

47. Offline
Total:
1.33s

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

67. 本地存储
LocalStorage、SQL
Database

68. 享受Naave
API带来的性能提升

69. 快快快！
互联网第一军规

70. Q&A