Qzone Touch跨终端优化


Qzone Touch跨终端优化 腾讯qzone 荣先乾 2013-11-03 自我介绍 2 荣先乾(woods rong) 2010年加入腾讯 qzone触屏前端技术leader 专注于移动端web前端、hybrid app研发 腾讯大讲堂多次开讲 爱老婆 ,爱前端 跨终端的web 多端 pc 浏览器端 Internet Explorer Chrome Firefox …… 移动 浏览器端 Ios safari Android browser opera …… Server端 nodejs 软件终端 Qzone QQ 微信 …… 传统终端 电视/盒子 …… 3 Qzone Touch跨终端优化 ! 从pc端到移动端 " touch框架选型 " 响应式设计 ! 迈向server端 " 一次编写,多端运行--nodejs在touch ! 融入app端 " 各取所长,多端共赢--web和app融合 4 Qzone Touch跨终端优化 5 http://m.qzone.com 从pc端到移动端 6 ! 如何构建移动web站点 独立开发 响应式设计 独立开发 or 响应式设计? 7 ! 目标 " 在不同终端上打造完美用户体验 ! 主要考量 " 响应式设计不应增加开发成本 " 响应式设计不能限制产品发挥 ! 独立开发 " 已经拥有复杂功能的pc站点(如QQ空间主站) ! 响应式设计 " 需要全新开发功能较简单站点(如QQ空间红米活 动页面) 从pc端到移动端--touch框架选型 ! 从pc端到移动端 " 后台 •  变化不大 " 网络传输 •  用户带宽下降 " 前端 •  用户机器配置下降(cpu & ram) 8 一次http请求过程 ! DNS lookup ! tcp CONNection ! Round Trip Time ! TRANSport time 9 一次http请求过程 ! DNS lookup ! tcp CONNection ! Round Trip Time ! TRANSport time 10 0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 2g 3g wifi unknown 耗 时 ( s ) 移动网络下dns、conn、rtt时间 dns conn r 一次http请求过程 ! DNS lookup ! tcp CONNection ! Round Trip Time ! TRANSport time 11 0 10 20 30 40 50 60 70 80 2g 3g wifi unknown 带 宽 ( k B / s ) 移动网络带宽 trans 如何为http请求提速? ! DNS ! CONN ! RTT ! TRANS 如何为http请求提速 DNS 减少域名数 TCP Connection: keep- alive RTT 就近接入 合并请求 减少传输次数 并发请求 pipeline TRANS 减少传输数据量大小 压缩 Jsmin等 Gzip/sdch/webp cache http 304 Last modify etag Localstorage Html5 manifest 减少重复代码 页面模型 spa 框架设计 继承&覆盖 公共组件 如果不用http? spdy 12 移动端js性能 ! qzone卡慢用户画像 " cpu --- 512M~1G(Hz) " ram --- 256M~512M 13 移动端js性能 ! qzone卡慢用户画像 " cpu --- 512M~1G(Hz) " ram --- 256M~512M 14 ram分布 44% 28% 11% 5% 4% 2% 1% 1% 1% 1% 1% 1% - 512M 256M 1G 2G 160M 150M 170M 32M 47% 20% 7% 4% 4% 3% 3% 2% 2% 2% 2% 1% 1% 1% 1% - 1G 800M 1Gx2 600M 806M 832M 1.5GX2 1.4G cpu分布 如何提升移动端web运行性能? ! pc端绝大部分优化方法都适用于移动端 " 减少reflow & repaint " 全局事件代理 " …… ! 减少js使用 " 优先考虑原生web实现 •  如使用confirm对话框而非自定义 " 优先考虑css3动画 " …… 15 一套移动web开发解决方案 基础类库 zepto / jquery mb develop by ourself 代码组织 light framework define modules common widget 页面管理 spa / others pageManager base class(onCreate…) 运行性能 inherit & Override global evt delegate css 3d animation 网络请求 reduce dns nums merge request connect keep alive 数据缓存 http cache(304) Localstorage manifest 16 数据缓存 ! 两级cache策略 " 弱cache •  http 304 " 强cache •  localstorage •  html5 cache manifest 17 http 304 ! 静态资源 " Last-Modify " If-Modify-Since ! cgi " Etag " If-None-Match 18 用户请求 Server比 较etag 读取本地etag 构造etag请求 使用local数据 使用server数据 完成 浏览器存储 200 304 更新 http 304 ! 静态资源 " Last-Modify " If-Modify-Since ! cgi " Etag " If-None-Match 19 40% 60% cgi 304命中率 命中 miss http 304 ! etag.support()探测三部曲 request If-None-Match:147847592 If-None-Match:147847592 hp 200 Etag:147847592 hp 304 no response body hp 200 Etag:153836213 20 localstorage ! 首次访问 " 存储js到本地 ! 再次访问 " 直接从localstorage读取js " 保证了零js请求 21 首次访问 再次访问 localstorage ! Seajs plugin storage " seajs •  js加载器 " storage plugin •  js本地加载管理 22 开始 完成 用户访问 本地版本号是否等于外网 本地存储是否存在该文件 本地存储 cdn 是否在本地存储文件列表 本地存储的文件是否合法 更新 否 否 否 否 localstorage ! 相对于从网络拉取,从本地读取js module 的时间可以忽略 23 localstorage ! Js本地存储命中率70%左右 24 72% 19% 4% 5% 0% cache命中 没有命中 不需要cache 不支持localstorage 本地cache有问题 html5 cache manifest ! 缺点 " 不支持单文件更新 ! 适合cache " 少量文件 " 长期不更新的 •  如seajs,seajs plugin storage etc. 25 从pc端到移动端--响应式设计 ! 从pc端到移动端 " 屏幕尺寸 26 从pc端到移动端--响应式设计 ! 从pc端到移动端 " 屏幕尺寸 27 1366*768 1400*900 1024*768 1920*1080 1280*800 1280*1024 1680*1050 1280*768 1280*960 1024*600 PC端分辨率 移动端分辨率 320*480 320*560 360*640 384*640 480*854 480*800 600*1024 603*966 640*960 768*1024 响应式设计思路 ! 传统做法 " 模块映射 •  pc端、移动端模块根据ua自动转换 # 针对现有主站页面 ! 响应式设计 " 流式布局(fluid grid) •  自适应屏幕宽度 # 针对活动页面 28 传统做法--模块映射 ! pc、touch模块根据访问者ua自动转换 " 同一个地址在pc、touch端均可触达 •  302 •  url rewrite / proxy " 如 •  http://user.qzone.qq.com/139588861/photo/ 779fed72-9ee3-4ccb-9b06-62bf1dbcad43/ 29 pc模块 30 touch模块 31 响应式设计--流式布局 ! 布局适配(页面、图片) " 各种屏幕分辨率 " 横竖屏 ! 带宽适配(图片等) " 2g / 3g / wifi " 慢速 / 快速用户 ! 高清屏适配 " 高清屏 / 普屏 32 布局适配 ! media query ! fluid grid ! viewport申明 " width=device-width, initial-scale=1 ! 相对取代绝对 " layout宽度( px -> %) " 字号( px -> em ) 33 带宽适配 ! navigator.connection.type " 2g / 3g / wifi ! navigator.connection.bandwidth " 快速 / 慢速(如20kB/s以下) •  入口模块加载速度 •  ip库建设 # 前端多普勒测速动态矫正 # 借助其他平台(QQ浏览器、app等) 34 带宽适配 ! navigator.connection.type " 2g / 3g / wifi ! navigator.connection.bandwidth " 快速 / 慢速(如20kB/s以下) •  入口模块加载速度 •  ip库建设 # 前端多普勒测速动态矫正 # 借助其他平台(QQ浏览器、app等) 35 快速用户 慢速用户 高清屏适配 ! 度量单位 " 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 高清屏适配 ! 度量单位 " 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 普通图片 高清适配 从pc端到移动端 ! 通过上述优化 " 触屏反馈卡慢的用户从灰度5%时每天50+的 反馈量,降到全量发布后每天反馈低于5例 " 触屏的日登录,也相应增长到4000w量级 38 迈向server端--nodejs在touch ! 有人喜欢菊花吗? 39 迈向server端-nodejs在touch ! 有人喜欢菊花吗? 40 异步渲染 同步直出 迈向server端 --nodejs在touch ! 有人喜欢菊花吗? ! 不喜欢异步渲染的等待菊花 && 只想写一 套js模板 " server同步渲染js模板 •  nodejs 41 nodejs在touch ! server端js模板 " 基于nodejs v8引擎在server端解析js模板 " 页面可查看时间点 •  从5s+缩短到3s- 42 浏览器 cgi nodejs cdn tmpl.js tmpl.js 同 步 直 出 html json 异 步 渲 染 nodejs在touch ! 负载均衡 ! 容灾 ! 监控 43 负载均衡 ! 多机之间 " nginx " lvs / tgw接入层 ! 多核之间 " nodejs cluster(0.9.7版本完美解决) " 简单调度 •  父进程定时同步子进程繁忙程度 •  父进程根据子进程繁忙程度转发请求 44 容灾 ! 接入层 " 踢除宕机ip ! 业务层 " 当nodejs请求非关键路径出错时 •  转化为异步渲染 " 否则 •  直接提示用户错误 45 监控 ! nginx接入层监控nodejs ! nodejs业务内部监控 " 模调(成功率 & 上报量) " 自动化用例 46 监控 ! nginx接入层监控nodejs ! nodejs业务内部监控 " 模调(成功率 & 上报量) " 自动化用例 47 接 入 层 监 控 模 调 监 控 自 动 化 用 例 融入app端--web和native融合 48 ! touch特点 " 迭代快 " 针对喜欢轻量、偶尔访问用户 " 加载速度、流畅度赶不上app ! app特点 " 体验好 " 更强用户触发 " 针对深度活跃用户 " 版本发布周期长 融入app端--web和native融合 49 ! touch特点 " 迭代快 " 针对喜欢轻量、偶尔访问用户 " 加载速度、流畅度赶不上app ! app特点 " 体验好 " 更强用户触发 " 针对深度活跃用户 " 版本发布周期长 app hybrid hybrid touch 多终端 迭代快 体验好 hybrid应运而生 ! Js和native code比例可根据产品特点调整 ! 各取所长 " App实现核心功能 •  强大的硬件接口访问能力 •  提前实现h5接口 " touch实现扩展功能 •  快速迭代能力 •  抢占市场 •  实验田 50 手机qzone中+webapp插件 ! 黄钻趣图 ! 黄钻气泡 ! …… 51 Js和native code通信 ! 早期phonegap平台方案 " 以android平台为例 •  Js调用java # webview.addJavascriptInterface(“javascript:comman ds”) •  Java调用js # webview.loadUrl(“javascript:commands”) # 缺点 »  不能连续调用 »  隐藏用户正在使用的软键盘! 52 Js和native code通信 ! Android " Webview.addJavascriptInterface单接口实现 双向 •  反射漏洞 addJavascriptInterface Use this funcon to bind an object to JavaScript so that the methods can be accessed from JavaScript java webview Js调用Java Js可通过官方接口直接调用java mWebView. addJavascriptInterface(JAVA_OBJECT, “OBJECT_NAME_IN_JS”) Java调用js java不直接调用js,java调用js时只是将需要执行的js函数保存 到java队列;js定时到java环境通过java接口getCommands取 到所需执行的js函数队列 Js cmd Js cmd Js cmd Js cmd Js cmd …… exec(“js cmd”) 53 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 Js和native code通信 ! Android " schema协议通信 addJavascriptInterface Use this funcon to bind an object to JavaScript so that the methods can be accessed from JavaScript java webview js调用java Iframe.src=“jsbridge://the java function to be executed” Java调用js Webview.loadUrl(“javascript:jsFn();”) 55 Js和native code通信 ! ios " stringByEvaluating-JavaScriptFromString单 接口实现双向通信 " Schema协议通信 stringByEvaluang -JavaScriptFromString Inject javascript funcons into a uiwebview Objecct c UIwebview oc调用js oc可通过官方接口直接调用js NSString *tle = [webView stringByEvaluangJavaScriptFromString: @"document.tle"]; js调用oc js 不直接调用ios平台oc方法,js调用oc函数时只是将需要执行的oc 函数保存到js队列;oc定时到js环境通过js接口getCommands取到 所需执行的oc函数队列 oc cmd oc cmd oc cmd oc cmd oc cmd …… exec(“oc cmd”) 56 web和app融合展望 ! 为了追求好的体验和快的迭代双丰收, web和app自然的融合在一起了 ! qzone将会继续尝试通过+号插件的形式, 融入更多的web,让产品特性,可以跑的 更快 ! +号能力目前已经成为app端新的收入增长 点 57 Qzone Touch跨终端优化 ! 从pc端到移动端 " touch框架选型 " 响应式设计 ! 迈向server端 " 一次编写,多端运行--nodejs在touch ! 融入app端 " 各取所长,多端共赢--web和app融合 (完) 58 谢谢聆听 Q & A 60 参考文献 !  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-DESIGN- Ethan-Marcotte.pdf. 2013-10-02. !  Nodejs Community. http://nodejs.org/community/. 2013-10-20. !  Phonegap. http://phonegap.com/. 2013-10-02. 61
还剩60页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

goosmanlei

贡献于2016-07-27

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf