PDF《Mobile Web的性能优化与测试》

Mobile Web的性能优化与测试 周祺(由校) tmall.

com Velocity China, Aug 12th , 2014, Beijing 周祺,花名:由校 前端开发?工程师 @TMALL ! Github:zhouqicf Weibo:@由校校校 Email: [email protected] detail.m.tmall.com chaoshi.m.tmall.com 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 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.html http://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&