More Related Content Similar to 淘宝彩票移动项目开发实践 (20) 淘宝彩票移动项目开发实践2. AGENDA
1. 无所不能的 web
2. JavaScript 技术选型
3. web && app
4. 速度和性能
5. 不得不了解的 webview
6. 调试
5. 我们的目标
一套项目代码
多个应用场景
用户体验
可以快速响应用户需求
8. 三大武器 —— 响应式设计
平台选择
Media Query
文字排版
流体布局
„„
响应式设计小组
11. OPOA —— 用MVC理念开収前端应用
后端不处理任何涉及外观和交互的逻辑,
只提供完整的数据接口,更加专注于优秀的
数据结构设计
前端不再是依附于后端视图的脚本,而是
包含完整的业务需求的应用程序。可以根据
不同的场景做不同的处理,灵活多变。
15. YUI 是万能的
基础方法:Node/Event/Dom
模块管理:Loader
异步:IO/Jsonp
MVC框架:Framework
历史管理:History
动画:Anim
模拟滚动:Scrollview
数据模板:Substitute
„„
17. YUI 不是万能的
模块方法利用率低,文件体积大
20k(逻辑文件大小)/80k(总大小)
部分模块性能有待改迚
缺少对一些移动端特有事件的支持
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
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/
28. WEBVIEW
SDK组件
Webkit内核
设备差异
• Android WebView
• iOS UIWebView
API:WebView JavaScirpt
31. IOS
iOS SDK没有原生提供JavaScript调用
native代码的API,只有反向调用的方法 —
—
stringByEvaluatingJavaScriptFromString
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
48. 怎么做
尽可能优化html/JavaScript/CSS代码
• 优化是一种心态
• 可维护性
减少白屏时间
• 尽早显示loading (与OPOA的矛盾)
• 减少DOM数量和深度
• 延迟渲染
cache
50. 什么是我们可以做的
无法避免的
• 首次加载
• 数据更新
• 版本更新
可以做的
• 减少重复资源的下载
• 版本管理和升级
• 不必要的数据请求
63. 怎么工作呢
NoUpdate
Checking Progress
Downloading Progress Updateready
Progress
swapCache
http://www.slideshare.net/gzterrytan/ss-7567665
65. ATTENTION
定义了manifest文件后,所有网络请求都会经过该配置,如
果没有设置缓存,也没有在白名单里配置,则访问不到资源
文件
如果manifest文件或者其内部列举的某一个文件不能正常下
载,整个更新过程将视为失败,浏览器继续全部使用老的缓
存
引用manifest的html必须与manifest文件同源,在同一个域
下
在manifest中使用的相对路径,相对参照物为manifest文件
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后,该浏览器直接请求这个绝对路径也会
访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性,请求的资源
如果在缓存中也从缓存中访问
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月数据
72. 性能优化
JavaScript代码效率
iScroll
CSS3动画/gif动画
75. APP UI:固定顶/底栏
position: fixed
ios 5.0以上/android 2.3以上支持
overflow: scroll
ios 5 Beta 2中支持
iScroll
78. 换一种思路
顶栏webview
拆分webview
内容
顶栏/底栏固定高度
webview 内容区域原生滚动
底栏webview
http://www.slideshare.net/yangdj/web-app-10712402
79. CSS3/GIF
android下对性能影响较大
2D动画使用transition/animation
启用硬件加速
GIF动画非常吃内存,尽量不用
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设置中关闭栺式检查:
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
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
98. MORE
Mobile Perf bookmarklet
Yslow Mobile
PageSpeed Insights
ICY
Remote Debugging for Mobile Safari
Adobe Shadow
JSPerf
SunSpider
Mobile Browser Concurrency Test