1. 淘宝彩票移动项目
开収实践
函谷
淘宝北京研収中心

2. AGENDA
1. 无所不能的 web
2. JavaScript 技术选型
3. web && app
4. 速度和性能
5. 不得不了解的 webview
6. 调试

3. PART1
无所不能的WEB

4. 移动终端飞速収展/业务需求

5. 我们的目标
 一套项目代码
 多个应用场景
 用户体验
 可以快速响应用户需求

7. 三大武器 —— HTML5

8. 三大武器 —— 响应式设计
 平台选择
 Media Query
 文字排版
 流体布局
 „„
响应式设计小组

9. 三大武器 —— MVC

10. PART2
JavaScript 技术选
型

11. OPOA —— 用MVC理念开収前端应用
后端不处理任何涉及外观和交互的逻辑，
只提供完整的数据接口，更加专注于优秀的
数据结构设计
前端不再是依附于后端视图的脚本，而是
包含完整的业务需求的应用程序。可以根据
不同的场景做不同的处理，灵活多变。

12. E.G：彩票订单

13. E.G：彩票订单

14. THE MODULES WE NEED
 基础库
 历史管理
 区域滚动
 数据模板
 动画

15. YUI 是万能的
 基础方法：Node/Event/Dom
 模块管理：Loader
 异步：IO/Jsonp
 MVC框架：Framework
 历史管理：History
 动画：Anim
 模拟滚动：Scrollview
 数据模板：Substitute
 „„

16. BUT

17. YUI 不是万能的
 模块方法利用率低，文件体积大
20k(逻辑文件大小)/80k(总大小)
 部分模块性能有待改迚
 缺少对一些移动端特有事件的支持

18. 对于移动终端，YUI太重了！

19. 我们目前的选择

20. zepto
专为mobile webkit浏览器开収
 使用jQuery API
 支持了一些特有的触屏事件，如
tap/singleTap/longTap/swipe等
 8.7k
iScroll
 解决移动浏览器的区域滚动问题
 6.8k

21. backbone
 MVC框架，实现模块分层
 5.7k
Underscore
常用基础方法和 JavaScript模板
 4.1k
seaJS
 模块组织和管理，打包上线（spm）
 6.8k

22. 系
统
架
构

23. 速度和性能的提升
89k VS 44.6k

24. 你还有其他的选择
 jQuery Mobile
 DHTMLX Touch
 Titanium Mobile
 Jo
 Spine.js
 Javascript MVC
 „„
 什么都不用

25. REFERENCE
 http://underscorejs.org/
 http://backbonejs.org/
 http://seajs.org/
 http://zeptojs.com/
 http://cubiq.org/iscroll-4
 http://www.dhtmlx.com/touch/
 http://juicer.name/

26. PART3
WEB && APP

27. BRIDGE === ???

28. WEBVIEW
 SDK组件
 Webkit内核
 设备差异
• Android WebView
• iOS UIWebView
 API：WebView JavaScirpt

29. ANDROID
JavaScript调用native方
法

30. ANDROID
Native调用JavaScript方
法

31. IOS
iOS SDK没有原生提供JavaScript调用
native代码的API，只有反向调用的方法 —
—
stringByEvaluatingJavaScriptFromString

32. PHONEGAP

33. PHONEGAP
JavaScript通知native的方法是収起一次特
殊的网络请求；native 可以截获到webview
的所有请求

34. PHONEGAP
特殊请求 —— iframe

35. 更为简单直接的方法
直接修改当前页面的location

36. 有利就有弊
利：
 代码简洁
 平台通用（android/iOS）
弊：
 如果需要连续调用2次native，就会连续2
次改document.location，那么在native的
delegate方法中，只能截获后一次请求
 调试困难（URL加特殊标识）

37. WEB页面嵌入客户端
 webview直接调取线上页面
 将web静态页面打包到客户端中

38. 线上页面直接调取
利：
 在服务器端实现“响应式”
 版本更新不依赖于客户端
 即时响应用户需求，加快bug修复速度
 不影响客户端大小
弊：
 受限于网络
 速度/性能

39. 打包到应用中
利：
 无网络请求，响应速度接近于native应
用
 性能提升（iscroll）
 可以利用本地资源（图片）
弊：
 更新困难
 增加客户端包容量

41. 手机彩票

42. 手机客户端

43. 定制版iPad竞彩足球

44. PART4
速度、性能

45. 速度

46. 移动通信网络传输速度
2G 2.5G
• GSM：9.6k/s • GPRS：115k/s
• HSCSD：57.6k/s
• EDGE：384k/s
3G 4G
• 室内：2M/s • 下载：100M/s
• 室外：384k/s • 上传：20M/s
• 行车：144k/s

47. 网络传输内容
小，小，小 ， „„

48. 怎么做
 尽可能优化html/JavaScript/CSS代码
• 优化是一种心态
• 可维护性
 减少白屏时间
• 尽早显示loading （与OPOA的矛盾）
• 减少DOM数量和深度
• 延迟渲染
 cache

49. CACHE

50. 什么是我们可以做的
 无法避免的
• 首次加载
• 数据更新
• 版本更新
 可以做的
• 减少重复资源的下载
• 版本管理和升级
• 不必要的数据请求

51. 三大利器
浏览器缓存 localStorage applicationCache

52. 浏览器缓存

53. 利：
 无需编程
 可缓存所有资源文件
弊： 浏览器缓存
 重启会丢失（iOs）
 无法控制读取逻辑

54. applicationCache

55. applicationCache
在html标签中增加manifest属性

56. content-type为text/cache-manifest
设置服务器支持

57. 第一行必须为CACHE MANIFEST
不能有空行或空栺

58. #开头为注释
（author/version/„„）
版本管理，方便更新和维护

59. CACHE 为要缓存的文件

60. 必须为具体的文件名，不支持通配符
不能包含hash/query
可以添加ETag/Last-Modified
每行一个文件

61. 网络白名单
可以为*/文件夹/域名/具体地址

62. 可选，资源获取失败时候补方案
每行分别指定在线和离线时使用的文件

63. 怎么工作呢
NoUpdate
Checking Progress
Downloading Progress Updateready
Progress
swapCache
http://www.slideshare.net/gzterrytan/ss-7567665

64. 手动更新
swapCache()后并不会马上载入新的资源，而是
在下次加载时才载入，可以通过刷新页面来
载入新下载的资源

65. ATTENTION
 定义了manifest文件后，所有网络请求都会经过该配置，如
果没有设置缓存，也没有在白名单里配置，则访问不到资源
文件
 如果manifest文件或者其内部列举的某一个文件不能正常下
载，整个更新过程将视为失败，浏览器继续全部使用老的缓
存
 引用manifest的html必须与manifest文件同源，在同一个域
下
 在manifest中使用的相对路径，相对参照物为manifest文件
 FALLBACK中的资源必须和manifest文件同源
 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会
访问缓存中的资源。
 站点中的其他页面即使没有设置manifest属性，请求的资源
如果在缓存中也从缓存中访问

66. localStorage

67. localStorage
存储数据和配置文件
 setItem(key , value)
 getItem(key)
 removeItem(key)

68. 性能

69. 型号 CPU RAM
iPhone 4S 双核A5 800MHZ 512M
iOS iPhone 4 A4 800MHZ 512M
iPhone 3GS S5PC100 600MHZ 256M
Glaxy Note Exynos 双核 1.4GHZ 1G
Nexus One 高通 1GHZ 512M
Android
MOTO XT615 高通 800MHZ 512M
HTC Legend 高通 600MHZ 384M
常见移动设备硬件情况

70. iPhone
3GS
其他
5% iPhone
12%
4S
1GHZ以
29% 600MHZ
上
19%
45%
iPhone4
800MHZ
66%
24%
iOs Andriod
手机淘宝2012-4月数据

71. 问题
 低端设备众多，受硬件限制
 简化的浏览器实现
 复杂的业务逻辑/单页应用
 容易造成体验瓶颈

72. 性能优化
 JavaScript代码效率
 iScroll
 CSS3动画/gif动画

73. JavaScript代码效率
 让server返回处理好的数据，避免
client端无谓的数据运算和判断
 避免滚动时监听事件（touchmove）
 减少DOM操作（插入/删除/改变样式）
 减少Reflow和Repaint

74. 为什么需要iScroll

75. APP UI：固定顶/底栏
 position: fixed
ios 5.0以上/android 2.3以上支持
 overflow: scroll
ios 5 Beta 2中支持
 iScroll

76. iScroll
原生
iScroll滚动与原生滚动的性能比较

77. KO
比较卡
很流畅 甚至会出
现假死

78. 换一种思路
顶栏webview
 拆分webview
内容
 顶栏/底栏固定高度
webview  内容区域原生滚动
底栏webview
http://www.slideshare.net/yangdj/web-app-10712402

79. CSS3/GIF
 android下对性能影响较大
 2D动画使用transition/animation
 启用硬件加速
 GIF动画非常吃内存，尽量不用

80. PART5
WEBVIEW

81. ANDROID
 使用许可
在AndroidManifest.xml中使用许可
“android.permission.INTERNET”
 启用JavaScript
Webview.getSettings().setJavaScriptEnabled(tru
e);
 启用localStorage
Webview.getSettings().setDomStorageEnabled(tru
e);

82. ANDROID
 在webview中响应链接
如果希望当前页面链接点击后继续在当前
browser中响应，而不是新开Android的系统browser
中响应，必须覆盖webview的WebViewClient对象：

83. ANDROID
 处理默认的后退事件
在webview中浏览页面时，点击系统“Back”
键，整个Browser会调用finish()结束自身。如果希
望浏览的网页回退而不是退出浏览器，需要在当前
Activity中处理掉该Back事件。

84. ANDROID
 屏幕右侧白条
在android浏览器中打开一个网页，会在右侧出
现一个细小的白条。
android:scrollbarSize="0dip"

85. ANDROID/IOS
 关闭栺式检查
在android和iOs中，连续的数字会被检测为电话
号码，默认显示为链接的样式。在android中，还会
自动检查邮箱栺式。可以通过meta属性关闭。
如果需要使用表示电话或邮箱的链接：

86. IOS BUG
在iOs5 以下的系统中，meta设置会时灵时不
灵，需要在webview设置中关闭栺式检查：

87. ANDROID/IOS
屏幕旋转检查事件
• android：window.resize
• iOS：onorientationchange
• 该事件无法阻止（web app）

88. 高清图片
960*640 的设计原型 VS 480*320的真实显示
• iPhone4分辨率：960*640 （326DPI）
• iPhone4 safari分辨率：480*320（163DPI）
 CSS：
background-size: 480px 320px；
 CSS Media Query：iOs 4/android 2.2
-webkit-min-device-pixel-ratio

89. CSS MEDIA QUERY
Ex：logo图片尺寸为160*80，页面显示为80*40
1 在CSS中设置logo显示为width:80px;height:40px;
2 在iphone4中，iOs4 支持 -webkit-min-device-
pixel-ratio 属性，所以图片会以2倍分辨率显示高
清原图
http://qiqicartoon.com/?p=948

90. PART6
调试

91. WEINRE
http://people.apache.org/~pmuellr/weinre/docs/latest/Home.ht
ml

92. WEINRE （JAVA/NODEJS）
 安装
 启动服务
 注入代码
 开始调试

93. WEINRE （JAVA/NODEJS）
 安装
 启动服务 只能调试样式，无法
 注入代码 跟踪JavaScript代码
 开始调试

94. JSCONSOLE
http://jsconsole.com/remote-debugging.html

95. JSCONSOLE
 基于浏览器的命令行，简单易入手
 跟踪JavaScript代码，记录console日志
 产生异常时能够提供简单的错误信息
 原理：
• 注入代码生成 iframe
• 截获页面console请求（重写方法）
• 収送console相关信息到 server
• server 页面做出响应

96. WEBVIEW CONSOLE API（ANDROID）
 console.log(String)
 console.info(String)
 console.warn(String)
 console.error(String)
http://android.stackexchange.com/questions/5999/android-
browsers-aboutdebug-what-do-those-settings-do

97. IWEBINSPECTOR （FOR MAC）
http://www.iwebinspector.com/

98. MORE
 Mobile Perf bookmarklet
 Yslow Mobile
 PageSpeed Insights
 ICY
 Remote Debugging for Mobile Safari
 Adobe Shadow
 JSPerf
 SunSpider
 Mobile Browser Concurrency Test

99. “New open standards
created in the mobile
era, such as HTML5, will
win on mobile devices.”
Steve Jobs
April, 2010

100. Q & A