More Related Content Similar to Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0 Similar to Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0 (20) More from Michael Zhang (20) Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.02. 自我介绍
荣先乾(woods rong)
2010年加入腾讯
qzone触屏前端技术leader
专注于移动端web前端、hybrid app研发
腾讯大讲堂多次开讲
爱老婆 ,爱前端
2
3. 跨终端的web
多端
pc
浏览器端
移动
浏览器端
Internet
Explorer
Ios safari
Chrome
Server端
nodejs
软件终端
传统终端
Qzone
电视/盒子
Android
browser
QQ
……
Firefox
opera
微信
……
……
……
3
7. 独立开发 or 响应式设计?
! 目标
" 在不同终端上打造完美用户体验
! 主要考量
" 响应式设计不应增加开发成本
" 响应式设计不能限制产品发挥
! 独立开发
" 已经拥有复杂功能的pc站点(如QQ空间主站)
! 响应式设计
" 需要全新开发功能较简单站点(如QQ空间红米活
动页面)
7
10. 一次http请求过程
移动网络下dns、conn、rtt时间
4.5
! DNS lookup
4
! tcp CONNection
3.5
耗 3
Trip Time
! Round
时 2.5
(
s 2
! TRANSport time
dns
conn
)
1.5
r5
1
0.5
0
2g
3g
wifi
unknown
10
11. 一次http请求过程
移动网络带宽
! DNS lookup
80
! tcp 70 ONNection
C
带 60
宽
! Round Trip Time
( 50
k
B 40
! TRANSport time
/ 30
trans
s
) 20
10
0
2g
3g
wifi
unknown
11
12. DNS
减少域名数
如何为http请求提速?
TCP
Connection: keepalive
就近接入
! DNS
! CONN
! RTT
! TRANS
RTT
如何为http请求提速
合并请求
减少传输次数
并发请求
pipeline
Jsmin等
压缩
Gzip/sdch/webp
Last modify
http 304
etag
TRANS
如果不用http?
减少传输数据量大小
cache
Localstorage
Html5 manifest
spdy
页面模型
减少重复代码
spa
继承&覆盖
框架设计
公共组件
12
14. cpu分布
移动端js性能
! qzone卡慢用户画像
2%
2%
2%
3%
3%
1%
2%
1%
1%
1%
-
1G
ram分布
1%
1%
1%
1%
" cpu --- 512M~1G(Hz)
800M
" ram --- 256M~512M
1Gx2
2%
1%
-
1%
512M
4%
256M
5%
4%
47%
4%
7%
600M
11%
806M
20%
832M
44%
1G
2G
160M
28%
150M
1.5GX2
170M
1.4G
32M
14
16. 一套移动web开发解决方案
基础类库
zepto / jquery mb
代码组织
light framework
页面管理
spa / others
develop by ourself
define modules
common widget
pageManager
base class(onCreate…)
运行性能
inherit & Override
网络请求
reduce dns nums
数据缓存
http cache(304)
global evt delegate
css 3d animation
merge request
connect keep alive
Localstorage
manifest
16
18. http 304
! 静态资源
用户请求
读取本地etag
浏览器存储
" Last-Modify 构造etag请求
" If-Modify-Since
! cgi
200
" Etag
使用server数据
" If-None-Match
Server比
较etag
304
更新
使用local数据
完成
18
19. http 304
! 静态资源
cgi 304命中率
" Last-Modify
" If-Modify-Since
! cgi
60%
" Etag
" If-None-Match
40%
命中
miss
19
20. http 304
! etag.support()探测三部曲
request
478475
5p
200
Etag:1
h
92
If-‐None-‐Match
:147847592
se
body
304
no
respon
h5p
If-‐None-‐Match
:147847592
53836213
5p
200
Etag:1
h
20
22. localstorage
开始
用户访问
! Seajs plugin storage
是否在本地存储文件列表
" seajs
• js加载器
本地版本号是否等于外网
" storage plugin
否
否
本地存储是否存在该文件
• js本地加载管理
否
本地存储的文件是否合法
否
本地存储
更新
cdn
完成
22
25. html5 cache manifest
! 缺点
" 不支持单文件更新
! 适合cache
" 少量文件
" 长期不更新的
• 如seajs,seajs plugin storage etc.
25
27. 从pc端到移动端--响应式设计
PC端分辨率
移动端分辨率
! 从pc端到移动端
1366*768
" 屏幕尺寸
320*480
1400*900
320*560
1024*768
360*640
1920*1080
384*640
1280*800
480*854
1280*1024
480*800
1680*1050
600*1024
1280*768
603*966
1280*960
640*960
1024*600
768*1024
27
28. 响应式设计思路
! 传统做法
" 模块映射
• pc端、移动端模块根据ua自动转换
# 针对现有主站页面
! 响应式设计
" 流式布局(fluid grid)
• 自适应屏幕宽度
# 针对活动页面
28
33. 布局适配
! media query
! fluid grid
! viewport申明
" width=device-width, initial-scale=1
! 相对取代绝对
" layout宽度( px -> %)
" 字号( px -> em )
33
35. 快速用户
带宽适配
慢速用户
! navigator.connection.type
" 2g / 3g / wifi
! navigator.connection.bandwidth
" 快速 / 慢速(如20kB/s以下)
• 入口模块加载速度
• ip库建设
# 前端多普勒测速动态矫正
# 借助其他平台(QQ浏览器、app等)
35
36. 高清屏适配
! 度量单位
" dpi / ppi
• 屏幕对角线物理像素点 / 屏幕物理尺寸
• 以iphone4为例,960*640,3.5英寸,ppi为
# √2&960↑2 +640↑2 /3.5 = 330
! 高清屏
" window.devicePixelRatio = ppi / 160
• 以iphone4为例, devicePixelRatio为
# 330 / 160 = 2
" window.devicePixelRatio >= 1.5
36
37. 普通图片
高清屏适配
高清适配
! 度量单位
" dpi / ppi
• 屏幕对角线物理像素点 / 屏幕物理尺寸
• 以iphone4为例,960*640,3.5英寸,ppi为
# √2&960↑2 +640↑2 /3.5 = 330
! 高清屏
" window.devicePixelRatio = ppi / 160
• 以iphone4为例, devicePixelRatio为
# 330 / 160 = 2
" window.devicePixelRatio >= 1.5
37
42. nodejs在touch
! server端js模板
浏览器
" 基于nodejs html
v8引擎在server端解析js模板
json
" 页面可查看时间点
同
异
步
直
出
• 从5s+缩短到3s-
nodejs
tmpl.js
cdn
tmpl.js
步
渲
染
cgi
42
44. 负载均衡
! 多机之间
" nginx
" lvs / tgw接入层
! 多核之间
" nodejs cluster(0.9.7版本完美解决)
" 简单调度
• 父进程定时同步子进程繁忙程度
• 父进程根据子进程繁忙程度转发请求
44
47. 接
入
层
监
控
监控
! nginx接入层监控nodejs
! nodejs业务内部监控
模
调
监
控
" 模调(成功率 & 上报量)
" 自动化用例
自
动
化
用
例
47
49. 融入app端--web和native融合
体验好
! touch特点
" 迭代快
app
hybrid
" 针对喜欢轻量、偶尔访问用户
" 加载速度、流畅度赶不上app
! app特点
多终端
" 体验好
hybrid
" 更强用户触发
" 针对深度活跃用户
" 版本发布周期长
touch
迭代快
49
52. Js和native code通信
! 早期phonegap平台方案
" 以android平台为例
• Js调用java
# webview.addJavascriptInterface(“javascript:comman
ds”)
• Java调用js
# webview.loadUrl(“javascript:commands”)
# 缺点
» 不能连续调用
» 隐藏用户正在使用的软键盘!
52
53. Js和native code通信
! Android
addJavascriptInterface
java
exec(“js
cmd”)
webview
Use
this
func3on
to
bind
an
object
to
JavaScript
so
that
the
methods
can
be
accessed
from
JavaScript
" Webview.addJavascriptInterface单接口实现
双向
Js cmd
Js调用Java
• 反射漏洞
Js cmd
Js cmd
Js cmd
Js cmd
……
Js可通过官方接口直接调用java
mWebView. addJavascriptInterface(JAVA_OBJECT,
“OBJECT_NAME_IN_JS”)
Java调用js
java不直接调用js,java调用js时只是将需要执行的js函数保存
到java队列;js定时到java环境通过java接口getCommands取
到所需执行的js函数队列
53
54. Js和native code通信
! Android
" 反射漏洞
• this.b.addJavascriptInterface(new fz(this, null),
"js_class_name");
• js_class_name.getClass().forName("java.lang.Ru
ntime").getMethod("getRuntime",null).invoke(n
ull,null).exec(cmdArgs);
" 解决
• 限制白名单
• 换用schema协议通信
54
55. Js和native code通信
! Android
addJavascriptInterface
java
webview
" schema协议通信
Use
this
func3on
to
bind
an
object
to
JavaScript
so
that
the
methods
can
be
accessed
from
JavaScript
Java调用js
Webview.loadUrl(“javascript:jsFn();”)
js调用java
Iframe.src=“jsbridge://the java function to be
executed”
55
56. Js和native code通信
! ios
stringByEvalua3ng
-‐JavaScriptFromString
Objecct
c
Inject
javascript
func3ons
into
a
uiwebview
" stringByEvaluating-JavaScriptFromString单
接口实现双向通信 exec(“oc
cmd”)
" S
oc调用js
chema协议通信
UIwebview
oc
cmd
oc可通过官方接口直接调用js
NSString
*3tle
=
[webView
stringByEvalua3ngJavaScriptFromString:
@"document.3tle"];
oc
cmd
js调用oc
oc
cmd
js
不直接调用ios平台oc方法,js调用oc函数时只是将需要执行的oc
函数保存到js队列;oc定时到js环境通过js接口getCommands取到
所需执行的oc函数队列
oc
cmd
oc
cmd
……
56
61. 参考文献
! HTML5. http://www.w3.org/TR/2011/WD-html5-20110525/.
2013-10-01.
! Seajs storage plugin. http://ux.etao.com/posts/449. 2012-12-02.
! Android Activity.
http://developer.android.com/reference/android/app/Activity.html.
2013-10-01.
! 304 Not Modified.
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html.
2013-10-02.
! Offline Web applications.
http://www.w3.org/TR/2011/WD-html5-20110525/offline.html.
2013-10-20.
! Responsive Web Design.
http://www.theusers.info/dev/mobile/RESPONSIVE-WEB-DESIGNEthan-Marcotte.pdf. 2013-10-02.
! Nodejs Community. http://nodejs.org/community/. 2013-10-20.
! Phonegap. http://phonegap.com/. 2013-10-02.
61