01年是全面『无线化』的一年,在BAT(财报)几家公司都已经超过0%的流量来自移动端,这次双11更是占到了68.67%无线交易(天猫微博)。
手淘中大量的业务采用H的方式开发,H体验好坏全面影响着手淘的使用体验。
今年手机淘宝在技术上重点解决“顿”,“卡”,“慢”的问题,并提出了“1法则”,具体指:
App内存节省0%
绘制帧率,滑动体验提升0%
App全链路实现1S法则
强网(G/Wifi)实现1S首屏(包括图片)加载
G1S首包返回
G1S建连,并且实现高复用从底层到前端
其中1S加载完成是H页面需要解决的重点问题,也是难点。
下面给大家介绍我们1年多来解决了些什么样的问题,以及带来多少性能的提升。以下每一条都是手淘在无线领域获得的宝贵经验。
系统网络环境(手淘01)首先给大家介绍一下目前手淘的环境情况(供大家在设备兼容方面参考)。
操作系统操作系统方面iOS占比.%,Android占比.8%,阿里云OS占比.9%,WindowsPhone占比0.1%。
iOS版本Android版本iOS系统版本占比情况:
iOS99%
iOS88%
iOS%
Android系统版本对比iOS碎片化较为严重,所幸.0以下版本占比小于10%。
占比如下:
..版本0%
..版本16%
.版本11%
..版本10%
.0版本以上10%
网络情况网络情况方面,得力于近年的G/G推广已经占%,G网络占比1%左右。
运营商运营商方面中国移动占据70%的用户,中国联通18.1%,中国电信11.69%。其中需要注意的是移动G技术(TD-SCDMA)性能差设备支持少,移动G容易在信号不理想的地段降级成G。
收集性能数据建立衡量标准淘系H页面主要在手淘客户端中展现,为了了解H页面在客户端中的性能表现,我们在WebView容器中做了大量性能数据的采集,以页面,数据接口,单个静态资源为维度采集。
H页面:我们以WebView的DidFinishLoad事件触发作为完成加载(FullyLoaded)的时间。
同时对支持performance.timing的设备收集Timing数据,用于详细分析网络请求各阶段的性能消耗情况。
WebViewDidFinishLoad官方解释:Sentafterawebviewfinishesloadingaframe.AndroidiOS
1年前H性能状况针对几个主要的业务,我们将收集到的用户性能数据整理后得到以下的结果(部分业务按传统的网页性能优化方法优化过)。
性能情况非常不理想,不达标严重。G下大于10s的占比在0%,G:6s内的低于70%近一半。
传统优化看到上面的性能情况,我们最先想到的优化方法就是PC时代YAHOO条web性能优化军规。
首先看看我们日常业务的请求瀑布图是怎么样的,根据这些情况看那些可以用规则去优化。
请求数优化在请求数控制方面,将js,css各用