双11手淘前端技术H5性能最佳实践

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各用


转载请注明:http://www.aierlanlan.com/rzdk/731.html