2015年双11手机淘宝前端技术巡演 - H5性能最佳实践

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看189 回复回复3 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 189|回复: 3
收起左侧

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践

[复制链接]
h5lover 发表于 2016-7-21 02:03:47 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑
本帖最后由 h5lover 于 2016-7-21 02:05 编辑



0、前言

2015年是全面“无线化”的一年,在BAT(财报)几家公司都已经超过50%的流量来自移动端,这次 双11 更是占到了68.67%无线交易 (天猫微博)。

手淘中大量的业务采用H5的方式开发,H5体验好坏全面影响着手淘的使用体验。

今年手机淘宝在技术上重点解决“顿”、“卡”、“慢”的问题,并提出了“521法则” ,具体指:

  • App内存节省50%
  • 绘制帧率,滑动体验提升20%
  • App全链路实现 1S 法则
    • 强网(4G/Wifi)实现1S首屏(包括图片)加载
    • 3G 1S首包返回
    • 2G 1S建连,并且实现高复用 从底层到前端



其中1S加载完成是H5页面需要解决的重点问题,也是难点。

下面给大家介绍我们1年多来解决了些什么样的问题,以及带来多少性能的提升。以下每一条都是手淘在无线领域获得的宝贵经验。




1、系统&网络环境(手淘2015)

首先给大家介绍一下目前手淘的环境情况(供大家在设备兼容方面参考)。



1.1、操作系统

操作系统方面iOS占比42.23%,Android 占比52.38%,阿里云OS 占比5.29%,Windows Phone 占比 0.1%。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 1

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 1




1.2、iOS版本 & Android版本

iOS 系统版本占比情况:

  • iOS 9 49%
  • iOS 8 38%
  • iOS 7 11%


Android 系统版本对比iOS 碎片化较为严重,所幸4.0以下版本占比小于10%。

占比如下:

  • 4.4.4版本30%
  • 4.4.2版本16%
  • 4.3版本11%
  • 4.2.2版本10%
  • 5.0版本以上10%


2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 2

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 2




1.3、网络情况

网络情况方面,得力于近年的3G/4G推广已经占35%,2G网络占比15%左右。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 3

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 3




1.4、运营商

运营商方面,中国移动占据70%的用户,中国联通18.12%,中国电信11.69%。其中需要注意的是移动3G技术(TD-SCDMA)性能差设备支持少,移动4G容易在信号不理想的地段降级成2G。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 4

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 4





2、收集性能数据&建立衡量标准

淘系H5页面主要在手淘客户端中展现,为了了解H5页面在客户端中的性能表现,我们在WebView容器中做了大量性能数据的采集,以页面、数据接口、单个静态资源为维度采集。

H5页面:我们以WebView的DidFinishLoad事件触发作为完成加载(Fully Loaded)的时间。

同时对支持performance.timing的设备收集Timing数据,用于详细分析网络请求各阶段的性能消耗情况。

WebViewDidFinishLoad 官方解释:Sent after a web view finishes loading a frame. Android iOS




3、1年前H5性能状况

针对几个主要的业务,我们将收集到的用户性能数据整理后得到以下的结果(部分业务按传统的网页性能优化方法优化过)。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 5

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 5


性能情况非常不理想,不达标严重。2G下大于10s的占比在50%, 3G:6s内的低于70%近一半。




4、传统优化

看到上面的性能情况,我们最先想到的优化方法就是PC时代YAHOO 23条web性能优化军规

首先看看我们日常业务的请求瀑布图是怎么样的,根据这些情况看那些可以用规则去优化。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 6

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 6




4.1、请求数优化

  • 在请求数控制方面,将js、css各用combo的方式合并成单个资源。
  • 页面图片等等,只加载首屏资源,提升首屏展示速度。
  • 使用CSS、SVG、ICONFONT 替换UI图片



4.1.1、合理使用IconFont

iconfont对于前端来说有很多优点:自由变化大小、矢量不失真、自由修改颜色、可以添加一些视觉效果如 阴影、旋转、透明度、兼容IE6。


使用现状

目前大家都基本上从平台上生成,生成后的文件如下:

[CSS] 纯文本查看 复制代码
@font-face {
font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ }


这样直接引用在项目中,真实在手机上的网络请求如下(在桌面版Chrome浏览器网络中无法看到这些请求):

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 7

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 7


这样造成了极大的网络带宽的消耗,这些icon资源往往在界面渲染中占据重要位置。

目前我们移动端只加载ttf一个字体文件,对于较小的文件也可以考虑base64在css文件中。



4.2、首屏多个动态接口合并请求

日常的业务中,一个页面往往拆分出多个异步数据接口(后端开发说:解耦),甚至首屏也需要3-5个接口(如动态banner区块,推荐内容,商品列表等),有些还有嵌套关系。

但是这些对页面性能造成不小的影响。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 8

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 8


手淘中某个接口在各网络下的请求性能,2G、3G下平均的消耗时间在2-6s完成下载。其中几个请求性能稍差点对整个页面影响也深远。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 9

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 9




4.3、禁止重定向

在我们CaseByCase的分析中发现,页面&静态资源的重定向会造成巨大的性能损耗。

特别使用前端JS脚本来实现页面跳转的。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 10

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 10




4.4、图片优化

手淘的特点就是图片多,图片的性能好坏可不仅仅影响用户体验哦,还直接影响着交易,钱 钱 钱…

我们在图片方面做了大量的优化。


4.4.1、使用WebP格式。

手淘2年前已经开始使用WebP格式了(主要native使用),1年前H5全面使用,其中iOS 的webview中由手淘以插件的方式支持。我们以手淘线上真实案例来看使用webp格式的前后效果。

案例为:线上的一个活动页面,打开一看其中的banner就320多KB,整个页面加载457KB,如果就单单banner图片换成webp格式,整个页面的大小就只有181KB。

使用WebP前:

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 11

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 11


使用WebP后:

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 12

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 12


Banner部分对比:

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 13

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 13


这种业务类型的案例,我们改进一下就可以为用户,为公司省70%的流量费用。


4.4.2、商品图片优化

商品图片在手淘的各个产品中都是必不可少的,为了适应不同业务需求的需要,我们在CDN服务上生成各个尺寸和质量的图片(近100个规格)。

  • q值:根据手淘网络情况,加载不同质量的商品图片(q30、q50、q75、q90)
  • 锐化:根据需要调整图片锐化值
  • DPI:根据设备DPI取适当尺寸商品图片
  • 合理的使用CDN图片尺寸可以带来下载图片的性能提升,还可以减少不必要的内存消耗。我们日常中会用到的尺寸,每浪费10像素的宽高都可以造成很大的内存资源浪费。


计算方式如下:

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 14

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 - 敏捷大拇指 - 2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 14



4.4.3、图片DPI 优化

根据设备DPI值和图片质量Q值做优化,达到最优视觉体验和加载性能(DPI高,宽高增加后可适当降低质量)。

2015年双11手机淘宝前端技术巡演 - H5性能最佳实践 15