Mobile Web的性能优化与测试 -...
61
Mobile Web 的性能优化与测试 周祺（由校） tmall.com Velocity China, Aug 12 th , 2014, Beijing
Transcript of Mobile Web的性能优化与测试 -...
2011年的时候⼈人们开始铺设⼀一条横跨⼤大⻄西洋，连接伦敦和纽约的近5000km的海底光缆。铺设这条光缆的唯⼀一⺫⽬目的是减少城市间的路由，为⾦金融市场的交易商减少5ms的延迟，耗资⼤大约4亿美元。
1ms ＝ 8000万美元 ＝ 5亿⼈人民币
4亿/5
性能问题在哪
性能优化怎么做
性能测试
我对性能优化看法
今天说点什么?
性能问题在哪!性能优化怎么做!性能测试!我对性能优化看法
- 打开慢
- 反应慢
普通⽤用户的反馈
我们熟悉的描述
打!开!慢
- ⽩白屏、⽆无样式时间⻓长 - 可⽤用时间晚
反!应!慢
- 响应时间慢 - 操作没有反馈 - 动画卡顿
我们更加熟悉的描述打!开!慢
- ⽩白屏、⽆无样式时间⻓长 > CSS、图⽚片加载太慢!
- 可⽤用时间晚 > JS加载太慢
反!应!慢
- 响应时间慢 > ⺴⽹网络延迟、不稳定!
- 操作没有反馈 > UI设计!
- 动画卡顿 > 内存占⽤用⾼高
耗!电
性能问题在哪!性能优化怎么做!性能测试!我对性能优化看法
⼀一些不再复述的重要建议
http://book.douban.com/subject/3132277/http://book.douban.com/subject/4719162/http://book.douban.com/subject/5362856/http://book.douban.com/subject/25856314/
加载 - hybrid中⾃自定义⼀一套离线策略
- 不通⽤用 - 客户端、服务端开发成本 - 多套发布流程
- hybrid中⾃自定义⼀一套离线策略加载
单位：ms 数据源：115KB的js数据
- ⼆二次加载不是问题加载
from cache的200响应头
加载
Application Cache + 预置缓存 Application Cache⽆无法增量更新？
预置⼀一份标准缓存到application cache的缓存⺫⽬目录， 解决⾸首次加载问题
可以做到， manifest列表中的单个⽂文件的cdn缓存仍然有效
http://www.html5rocks.com/zh/tutorials/appcache/beginner/
- 透明化、标准化地解决⾸首次加载
⾼高清化 - icon-font
http://iconfont.cn
- 单⾊色 - 阻塞渲染，造成加载过程⽩白屏 - 按需加载成本⾼高 - 字体渲染导致的模糊 - 容易造成样式和内容的耦合
⾼高清化 - SVG
Android下部分国内浏览器不⽀支持
http://detail.m.tmall.com/item.htm?id=27295632965
⾼高清化 - N倍 ＋ 压缩率
N ＝ window.devicePixelRatio
_120x120.jpg _240x240q50.jpg
120 X 2 ＝240
压缩率50%
_240x240q50.jpg
img{ width: 120px; height: 120px; }
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
http://gi1.md.alicdn.com/.../item_pic.jpg_240x240q50.jpg
⾼高清化 - webp
图⽚片数量 当前容量 webp 流量变化
天猫电器城 156 1447KB 904KB -37.53%
天猫超市 201 2653KB 1471KB -44.55%
天猫⾷食品 74 1384KB 861KB -37.79%
天猫美妆 153 3028KB 1641KB -45.81%
https://github.com/seanooi/iOS-WebP
http://gi1.md.alicdn.com/.../item_pic.jpg_240x240q50.jpg_.webp
⾼高清化 - 多终端⾃自适应
- ⺴⽹网络情况 > 压缩率
- 是否⽀支持webp > 压缩格式
- 屏幕PPI > 压缩率
- 屏幕分辨率 > 尺⼨寸
最适合当前环境的图⽚片
http://gallery.kissyui.com/crossimage/1.1/guide/index.html
JS弱依赖
CSS伪类+选择器
input:checked + div{ height: auto }
http://a.m.tmall.com/item.htm?id=39686418227&ttid=232&fm=detail&id=39686418227&ttid=232
- 不加载JS照样可以下单
Form Submit
Input Number
数据请求 - Native⽐比较快？
既然数据没有差异，那么差别也许来源于设计
单位：ms 数据源：6.6MB的json数据
解耦⽤用户交互和⺴⽹网络通信
设计得好的应⽤用，即便底层连接慢或者请求时间很⻓长，通过UI中的提供即时反馈也能让⼈人觉得速度快。
实时反馈 Loading
实时反馈
TAP背后同步
loading
- 部落冲突/使命召唤 - 加载过程中放出⼀一些tips
- ⽣生化危机/质量效应 - 加载过程中讲述剧情
- 雷曼传奇/刺客信条 - 加载过程中，可以操作⾓角⾊色
http://www.polishtheconsole.com/2010/05/19/video-game-loading-screens-just-pure-evil/
这么做是有理由的
Peter Bickford做过⼀一个实验：
有⼀一个请求花了2分钟，有⼀一半的⼈人只等了8.5秒，增加了loading之后延⻓长到了20秒，⽽而进度条则让⽤用户等到了最后。
⺴⽹网络不稳定
- 不要缓存⺴⽹网络状态，实时判断
- 监听连接状态，采⽤用最佳的请求⽅方式
- 超时等⺴⽹网络异常时提供重试策略
- 离线时记录请求，在⺴⽹网络良好时发送
{% module "gallery" %}!( nunjucks / kissy xpl)
Detector!(终端判断)
PC!!Mobile!!TV!!Native
http://mozilla.github.io/nunjucks/cn/api.htmlhttp://docs.kissyui.com/1.4/docs/html/api/xtemplate/index.html
跨终端
跨终端Web徐凯（⿁鬼道）@Tmall
http://book.douban.com/subject/25909777/
跨终端
https://github.com/luics/luics.github.com/issues/15
内存
- ⼤大的图⽚片
- ⼤大量的DOM
- 径向渐变、阴影等css3属性
- Transform 3d产⽣生的复合层（占⽤用4倍内存）
⽆无论传输多少数据， 移动通信总会消耗恒定的电量
46%的电量消耗仅传输0.2%的数据 （来⾄至AT&T对于Pandora的分析）
续航
避免轮询，采⽤用服务端推送，如web socket
http://www.html5rocks.com/en/tutorials/websockets/basics/http://socket.io/
续航
请求合并 续航 减少http请求
http://g.tbcdn.cn/??kissy/k/1.4.2/seed-min.js,tm/chaoshi-m/3.3.2/seed.js
续航
⾮非关键性的请求推迟到⽆无线模块活动的时候发送
hybrid是否可以实现⼀一个GCM？（google cloud messaging，它是android和chrome平台中使⽤用的发送消息的API，它能聚合消息，做出最佳的推送时间安排） !W3C Push API将来有可能解决这个问题
http://www.w3.org/TR/push-api/http://developer.android.com/google/gcm/index.html
续航
续航
低电量时⾃自动禁⽤用动画
在AMOLED下使⽤用⿊黑⽩白⾊色
续航
hybrid- ⺴⽹网络状态查询（navigator.connection）
- 电量状态查询
- WebP
- Application Cache预置缓存
- 通知中⼼心（服务端推送、客户端的集中发送）
- 性能统计（如：User Timing API）
- SPDY
hybrid
把⾃自⼰己当成⼀一个浏览器， 标准化的提供接⼝口
性能问题在哪!性能优化怎么做!性能测试!我对性能优化看法
数据的可靠性
- 性能分析⼯工具和真实⽤用户数据采集都必不可少
- 样本量
- 不要过分依赖平均值，直⽅方图更好
- 通过直⽅方图⾯面积的差值来实现性能的对⽐比
- 描述过程性能的指标不能依赖孤⽴立的点
- 平均数：说明的是整体的平均⽔水平 - 众数：说明的是多数情况 - 中位数：说明的是中等⽔水平
数据的可靠性 - 平均数、众数、中位数
http://eblog.cersp.com/userlog33/268170/archives/2011/1507906.shtml
测试范围
加载
- ⾸首次渲染时间
- ⾸首字节时间
- Dom Ready
- onload
- 孤⽴立指标、纯技术指标
⽤用户不关⼼心， ⽆无法反应感官速度
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
加载 - 过程指标：SpeedIndex
瀑布图 - User Timing
内存
功能耗时
Timing
http://caniuse.com/#search=performancehttp://www.html5rocks.com/en/tutorials/webperformance/usertiming
- User Timing API
FPS
FPS
综合
https://github.com/addyosmani/psi/
- PageSpeed Insights for Node
标准化地输出性能数据
HARFirebug!httpwatch!Fiddler!YSlow!…
http://www.softwareishard.com/blog/har-12-spec/
性能问题在哪!性能优化怎么做!性能测试!我对性能优化看法
与时俱进后代选择器、⼦子选择器等css选择器的性能已经有了数倍的性能提升
找到瓶颈在动⼿手优化之前，先看看性能瓶颈在哪，把有限的精⼒力投⼊入到关键性能问题上
⼯工程化⼯工程化的解决性能问题，⾃自动化地做到90分
情怀Make The Web Faster.
⽔水到渠成性能优化是⼀一件需要耐得住寂寞的事，要有⽔水到渠成的⼼心态，与你共勉。
