Taobao移动网页性能优化之路

Taobao移动⺴⽹网⻚页的那些优化曹仁摘要• 一些数据  • 请求优化  • 单页化  • 高清适配  • 一点经验设备系统占⽐比android:80.7%ios:19.3%⺴⽹网络占⽐比⾸首⻚页加载问题• 大小：251  kb  • 请求数：28  17s优化后0  2  4  6  8  10  12  14  16  18  20  2g(前⾸首次)  2g(后⾸首次)  2g(前⼆二次)  2g(后⼆二次)  domload  onload  ⼀一次⺴⽹网络请求优化⺴⽹网络请求Applicationcache缓存基础资源，保持Manifest简洁localStorage跨域请求js⽂文件scriptsrc=“xx.js”/scriptdefine(function(){//js内容})开启CORS资源⽂文件也是ajax请求script$.ajax({“url”:“xx.js”…});/script缓存ajax请求• 间隔10分钟Ios系统下的safari可以禁⽤用localstorageIos5.1+会强制清空localstorage图⽚片的优化  datauri⽂文件增⼤大0.1k;每次都需要解码，消耗cpu;建议图⽚片⼤大⼩小4kb，个数6img⽅方式的图⽚片不建议使⽤用这种⽅方式webp的使⽤用减⼩小30%最佳page加载实践⼀一个DNS查询;⼀一个TCP连接(3次握⼿手);服务器响应;内容传输;htmlheadstyle//内联基础和⾸首屏css/style/headbodydiv基础结构+⾸首屏内容/divscript//loader();/script/body/htmlwebapp的引⼊入Singlepageapplicationapp的复⽤用—插件化app的规范app.definePage(options);nameroute⼀一些⽅方法…app的组件Combo://a.tbcdn.cn/g/mw/plugins/item/detail_min.js合并宝⻉贝详情客户端⼆二维码拇指⽃斗价天猫万⼈人团⼆二⼿手交易聚划算充值⻔门票可定制的Appview1view2view3view4…..可重写View获取宝⻉贝类型extra.jsLoader聚划算⻔门票…..定制聚划算详情下单购物⻋车详情旺旺最佳App的实践• 可定制的⼦子app• 模板静态化—cdn• ⼆二次访问0请求—nativeWebApp的解决⽅方案Totalsolution！服务到位！  h9ps://github.com/mixteam/mixslnMix  ⺴⽹网⻚页的⾼高清问题⾼高清屏的普及视觉：我要的1px呢？PD：尼玛，图⽚片这么糊，⽤用户怎么下单？问题的根源• width=device-width,initial-scale=1.0,maximum-scale=1.0• csspixel和设备dpi不统⼀一其实也可以这样devicePixelRatio==2这样设置viewportinitial-scale=0.5,maximum-scale=0.5  • 借助less把css函数化，⽅方便适应各种设备屏• 字体容器布局图⽚片放⼤大⼀一倍– font-size使⽤用rem– line-height使⽤用100%优点• 实现css的1px• nobackground-size• native缺点• 适配成本⼤大⼀一点，依赖less• 耗流量，占内存⼀一点⼼心得调试利器chrome层层剥离使⽤用新特性没有100%兼容Thanks@etao曹纯曹纯—阿⾥里⽆无线[e-mail]