Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0

2,597 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,597
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0

  1. 1. Qzone  Touch跨终端优化   腾讯qzone  荣先乾   2013-11-03  
  2. 2. 自我介绍   荣先乾(woods  rong)    2010年加入腾讯   qzone触屏前端技术leader   专注于移动端web前端、hybrid  app研发   腾讯大讲堂多次开讲   爱老婆  ,爱前端     2  
  3. 3. 跨终端的web   多端   pc   浏览器端   移动   浏览器端   Internet   Explorer   Ios  safari   Chrome   Server端   nodejs   软件终端   传统终端   Qzone   电视/盒子   Android   browser   QQ   ……   Firefox   opera   微信   ……   ……   ……   3  
  4. 4. Qzone  Touch跨终端优化   ! 从pc端到移动端   " touch框架选型   " 响应式设计   ! 迈向server端   " 一次编写,多端运行--nodejs在touch   ! 融入app端   " 各取所长,多端共赢--web和app融合   4  
  5. 5. Qzone  Touch跨终端优化   http://m.qzone.com   5  
  6. 6. 从pc端到移动端   ! 如何构建移动web站点   独立开发     响应式设计   6  
  7. 7. 独立开发  or  响应式设计?   ! 目标   " 在不同终端上打造完美用户体验   ! 主要考量   " 响应式设计不应增加开发成本   " 响应式设计不能限制产品发挥   ! 独立开发   " 已经拥有复杂功能的pc站点(如QQ空间主站)   ! 响应式设计   " 需要全新开发功能较简单站点(如QQ空间红米活 动页面)   7  
  8. 8. 从pc端到移动端--touch框架选型   ! 从pc端到移动端   " 后台   •  变化不大   " 网络传输   •  用户带宽下降   " 前端   •  用户机器配置下降(cpu  &  ram)   8  
  9. 9. 一次http请求过程   ! DNS  lookup   ! tcp  CONNection   ! Round  Trip  Time   ! TRANSport  time   9  
  10. 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. 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. 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  
  13. 13. 移动端js性能   ! qzone卡慢用户画像   " cpu  ---  512M~1G(Hz)   " ram  ---  256M~512M   13  
  14. 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  
  15. 15. 如何提升移动端web运行性能?   ! pc端绝大部分优化方法都适用于移动端   " 减少reflow  &  repaint   " 全局事件代理   " ……   ! 减少js使用   " 优先考虑原生web实现   •  如使用confirm对话框而非自定义   " 优先考虑css3动画   " ……   15  
  16. 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  
  17. 17. 数据缓存   ! 两级cache策略   " 弱cache   •  http  304   " 强cache   •  localstorage   •  html5  cache  manifest   17  
  18. 18. http  304   ! 静态资源   用户请求   读取本地etag   浏览器存储   " Last-Modify   构造etag请求   " If-Modify-Since   ! cgi   200   " Etag   使用server数据   " If-None-Match   Server比 较etag   304   更新   使用local数据   完成   18  
  19. 19. http  304   ! 静态资源   cgi  304命中率   " Last-Modify   " If-Modify-Since   ! cgi   60%   " Etag   " If-None-Match   40%   命中   miss   19  
  20. 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  
  21. 21. 首次访问   localstorage   ! 首次访问   " 存储js到本地   ! 再次访问   " 直接从localstorage读取js   " 保证了零js请求   再次访问   21  
  22. 22. localstorage   开始   用户访问   ! Seajs  plugin  storage   是否在本地存储文件列表   " seajs   •  js加载器   本地版本号是否等于外网   " storage  plugin   否   否   本地存储是否存在该文件   •  js本地加载管理   否   本地存储的文件是否合法   否   本地存储   更新   cdn   完成   22  
  23. 23. localstorage   ! 相对于从网络拉取,从本地读取js  module 的时间可以忽略   23  
  24. 24. localstorage   ! Js本地存储命中率70%左右   0%   4%   cache命中   5%   没有命中   19%   不需要cache   72%   不支持localstorage   本地cache有问题   24  
  25. 25. html5  cache  manifest   ! 缺点   " 不支持单文件更新   ! 适合cache   " 少量文件   " 长期不更新的   •  如seajs,seajs  plugin  storage  etc.   25  
  26. 26. 从pc端到移动端--响应式设计   ! 从pc端到移动端   " 屏幕尺寸   26  
  27. 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. 28. 响应式设计思路   ! 传统做法   " 模块映射   •  pc端、移动端模块根据ua自动转换   # 针对现有主站页面   ! 响应式设计   " 流式布局(fluid  grid)   •  自适应屏幕宽度   # 针对活动页面   28  
  29. 29. 传统做法--模块映射   ! pc、touch模块根据访问者ua自动转换   " 同一个地址在pc、touch端均可触达   •  302   •  url  rewrite  /  proxy   " 如   •  http://user.qzone.qq.com/139588861/photo/ 779fed72-9ee3-4ccb-9b06-62bf1dbcad43/   29  
  30. 30. pc模块   30  
  31. 31. touch模块   31  
  32. 32. 响应式设计--流式布局   ! 布局适配(页面、图片)   " 各种屏幕分辨率   " 横竖屏   ! 带宽适配(图片等)   " 2g  /  3g  /  wifi   " 慢速  /  快速用户   ! 高清屏适配   " 高清屏  /  普屏   32  
  33. 33. 布局适配   ! media  query   ! fluid  grid   ! viewport申明   " width=device-width,  initial-scale=1   ! 相对取代绝对   " layout宽度(  px  ->  %)   " 字号(  px  ->  em  )   33  
  34. 34. 带宽适配   ! navigator.connection.type   " 2g  /  3g  /  wifi   ! navigator.connection.bandwidth   " 快速  /  慢速(如20kB/s以下)   •  入口模块加载速度   •  ip库建设   # 前端多普勒测速动态矫正   # 借助其他平台(QQ浏览器、app等)   34  
  35. 35. 快速用户   带宽适配   慢速用户   ! navigator.connection.type   " 2g  /  3g  /  wifi   ! navigator.connection.bandwidth   " 快速  /  慢速(如20kB/s以下)   •  入口模块加载速度   •  ip库建设   # 前端多普勒测速动态矫正   # 借助其他平台(QQ浏览器、app等)   35  
  36. 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. 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  
  38. 38. 从pc端到移动端   ! 通过上述优化   " 触屏反馈卡慢的用户从灰度5%时每天50+的 反馈量,降到全量发布后每天反馈低于5例   " 触屏的日登录,也相应增长到4000w量级   38  
  39. 39. 迈向server端--nodejs在touch   ! 有人喜欢菊花吗?   39  
  40. 40. 异步渲染   同步直出   迈向server端-nodejs在touch   ! 有人喜欢菊花吗?   40  
  41. 41. 迈向server端  --nodejs在touch   ! 有人喜欢菊花吗?   ! 不喜欢异步渲染的等待菊花  &&  只想写一 套js模板   " server同步渲染js模板   •  nodejs   41  
  42. 42. nodejs在touch   ! server端js模板   浏览器   " 基于nodejs  html   v8引擎在server端解析js模板   json   " 页面可查看时间点   同 异 步 直 出   •  从5s+缩短到3s-        nodejs   tmpl.js      cdn   tmpl.js   步 渲 染   cgi   42  
  43. 43. nodejs在touch   ! 负载均衡   ! 容灾   ! 监控   43  
  44. 44. 负载均衡   ! 多机之间   " nginx   " lvs  /  tgw接入层   ! 多核之间   " nodejs  cluster(0.9.7版本完美解决)   " 简单调度   •  父进程定时同步子进程繁忙程度   •  父进程根据子进程繁忙程度转发请求   44  
  45. 45. 容灾   ! 接入层   " 踢除宕机ip   ! 业务层   " 当nodejs请求非关键路径出错时   •  转化为异步渲染   " 否则   •  直接提示用户错误   45  
  46. 46. 监控   ! nginx接入层监控nodejs   ! nodejs业务内部监控   " 模调(成功率  &  上报量)   " 自动化用例   46  
  47. 47. 接 入 层   监 控   监控   ! nginx接入层监控nodejs   ! nodejs业务内部监控   模 调   监 控   " 模调(成功率  &  上报量)   " 自动化用例   自 动 化 用 例   47  
  48. 48. 融入app端--web和native融合   ! touch特点   " 迭代快   " 针对喜欢轻量、偶尔访问用户   " 加载速度、流畅度赶不上app   ! app特点   " 体验好   " 更强用户触发   " 针对深度活跃用户   " 版本发布周期长   48  
  49. 49. 融入app端--web和native融合   体验好   ! touch特点   " 迭代快   app   hybrid   " 针对喜欢轻量、偶尔访问用户   " 加载速度、流畅度赶不上app   ! app特点   多终端   " 体验好   hybrid   " 更强用户触发   " 针对深度活跃用户   " 版本发布周期长   touch   迭代快   49  
  50. 50. hybrid应运而生   ! Js和native  code比例可根据产品特点调整   ! 各取所长   " App实现核心功能   •  强大的硬件接口访问能力   •  提前实现h5接口   " touch实现扩展功能   •  快速迭代能力   •  抢占市场   •  实验田   50  
  51. 51. 手机qzone中+webapp插件   ! 黄钻趣图   ! 黄钻气泡   ! ……   51  
  52. 52. Js和native  code通信   ! 早期phonegap平台方案   " 以android平台为例   •  Js调用java   # webview.addJavascriptInterface(“javascript:comman ds”)   •  Java调用js   # webview.loadUrl(“javascript:commands”)   # 缺点   »  不能连续调用   »  隐藏用户正在使用的软键盘!   52  
  53. 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. 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. 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. 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  
  57. 57. web和app融合展望   ! 为了追求好的体验和快的迭代双丰收, web和app自然的融合在一起了   ! qzone将会继续尝试通过+号插件的形式, 融入更多的web,让产品特性,可以跑的 更快   ! +号能力目前已经成为app端新的收入增长 点   57  
  58. 58. Qzone  Touch跨终端优化   ! 从pc端到移动端   " touch框架选型   " 响应式设计   ! 迈向server端   " 一次编写,多端运行--nodejs在touch   ! 融入app端   " 各取所长,多端共赢--web和app融合   (完)   58  
  59. 59. 谢谢聆听   Q  &  A  
  60. 60. 60  
  61. 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  

×