《从实验出发的移动端性能优化.pdf》由会员分享，可在线阅读，更多相关《从实验出发的移动端性能优化.pdf（61页珍藏版）》请在三一文库上搜索。
1、Mobile Web的性能优化与测试 周祺（由校） Velocity China, Aug 12th, 2014, Beijing 周祺，花名：由校 前端开发工程师 TMALL ? Github：zhouqicf Weibo：由校校校 Email: 2011年的时候人们开始铺设一条横跨大西 洋，连接伦敦和纽约的近5000km的海底光 缆。铺设这条光缆的唯一目的是减少城市间 的路由，为金融市场的交易商减少5ms的延 迟，耗资大约4亿美元。 1ms 8000万美元 5亿人民币 4亿/5 性能问题在哪 性能优化怎么做 性能测试 我对性能优化看法 今天说点什么? 性能问题在哪? 性能优化怎么做?
2、 性能测试? 我对性能优化看法 - 打开慢 - 反应慢 普通用户的反馈 我们熟悉的描述 打? 开? 慢 -白屏、无样式时间长 -可用时间晚 反? 应? 慢 -响应时间慢 -操作没有反馈 -动画卡顿 我们更加熟悉的描述 打? 开? 慢 -白屏、无样式时间长 CSS、图片加载太慢? -可用时间晚 JS加载太慢 反? 应? 慢 -响应时间慢 网络延迟、不稳定? -操作没有反馈 UI设计? -动画卡顿 内存占用高 耗? 电 性能问题在哪? 性能优化怎么做? 性能测试? 我对性能优化看法 一些不再复述的重要建议 http:/ http:/ http:/ http:/ 加载- hybrid中自定义一套离线
3、策略 -不通用 -客户端、服务端开发成本 -多套发布流程 - hybrid中自定义一套离线策略加载 单位：ms 数据源：115KB的js数据 - 二次加载不是问题加载 from cache的200响应头 加载 Application Cache + 预置缓存 Application Cache无法增量更新？ 预置一份标准缓存到application cache的缓存目录， 解决首次加载问题 可以做到， manifest列表中的单个文件的cdn缓存仍然有效 http:/ - 透明化、标准化地解决首次加载 高清化 - icon-font http:/ -单色 -阻塞渲染，造成加载过程白屏 -按需加
4、载成本高 -字体渲染导致的模糊 -容易造成样式和内容的耦合 高清化 - SVG Android下部分国内浏览器不支持 http:/ 高清化 - 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:/ 高清化 - webp 图片数量当前容量webp流
5、量变化 天猫电器城1561447KB904KB-37.53% 天猫超市2012653KB1471KB-44.55% 天猫食品741384KB861KB-37.79% 天猫美妆1533028KB1641KB-45.81% https:/ http:/ 高清化 - 多终端自适应 - 网络情况 压缩率 - 是否支持webp 压缩格式 - 屏幕PPI 压缩率 - 屏幕分辨率 尺寸 最适合当前环境的图片 http:/ JS弱依赖 CSS伪类+选择器 input:checked + div height: auto http:/ - 不加载JS照样可以下单 Form Submit Input Number
6、 数据请求 - Native比较快？ 既然数据没有差异，那么差别也许来源于设计 单位：ms 数据源：6.6MB的json数据 解耦用户交互和网络通信 设计得好的应用，即便底层连接慢或者请求时间 很长，通过UI中的提供即时反馈也能让人觉得速 度快。 实时反馈Loading 实时反馈 TAP 背后同步 loading - 部落冲突/使命召唤 - 加载过程中放出一些tips - 生化危机/质量效应 - 加载过程中讲述剧情 - 雷曼传奇/刺客信条 - 加载过程中，可以操作角色 http:/ 这么做是有理由的 Peter Bickford做过一个实验： 有一个请求花了2分钟，有一半的人只等了8.5秒，
7、增加了loading之后延长到了20秒，而进度条则让用 户等到了最后。 网络不稳定 - 不要缓存网络状态，实时判断 - 监听连接状态，采用最佳的请求方式 - 超时等网络异常时提供重试策略 - 离线时记录请求，在网络良好时发送 % module “gallery“ %? ( nunjucks / kissy xpl) Detector? (终端判断) PC? ? Mobile? ? TV? ? Native http:/mozilla.github.io/nunjucks/cn/api.html http:/ 跨终端 跨终端Web 徐凯（鬼道）Tmall http:/ 跨终端 https:/ 内
8、存 - 大的图片 - 大量的DOM - 径向渐变、阴影等css3属性 - Transform 3d产生的复合层（占用4倍内存） 无论传输多少数据， 移动通信总会消耗恒定的电量 46%的电量消耗仅传输0.2%的数据 （来至AT&T对于Pandora的分析） 续航 避免轮询，采用服务端推送，如web socket http:/ http:/socket.io/ 续航 请求合并 续航 减少http请求 http:/ 续航 非关键性的请求推迟到无线模块活动的时候发送 hybrid是否可以实现一个GCM？（google cloud messaging，它是android和 chrome平台中使用的发送消
9、息的API，它能聚合消息，做出最佳的推送时间安排） ? W3C Push API将来有可能解决这个问题 http:/www.w3.org/TR/push-api/ http:/ 续航 续航 低电量时自动禁用动画 在AMOLED下使用黑白色 续航 hybrid - 网络状态查询（navigator.connection） - 电量状态查询 - WebP - Application Cache预置缓存 - 通知中心（服务端推送、客户端的集中发送） - 性能统计（如：User Timing API） - SPDY hybrid 把自己当成一个浏览器， 标准化的提供接口 性能问题在哪? 性能优化怎么做
10、? 性能测试? 我对性能优化看法 数据的可靠性 - 性能分析工具和真实用户数据采集都必不可少 - 样本量 - 不要过分依赖平均值，直方图更好 - 通过直方图面积的差值来实现性能的对比 - 描述过程性能的指标不能依赖孤立的点 -平均数：说明的是整体的平均水平 -众数：说明的是多数情况 -中位数：说明的是中等水平 数据的可靠性- 平均数、众数、中位数 http:/ 测试范围 加载 - 首次渲染时间 - 首字节时间 - Dom Ready - onload - 孤立指标、纯技术指标 用户不关心， 无法反应感官速度 加载 http:/ 无法实现性能监控、对比 - 过程截图：TraceShot http
11、s:/ 加载- 过程指标：SpeedIndex 瀑布图- User Timing 内存 功能耗时 Timing http:/ http:/ - User Timing API FPS FPS 综合 https:/ - PageSpeed Insights for Node 标准化地输出性能数据 HAR Firebug? httpwatch? Fiddler? YSlow? http:/ 性能问题在哪? 性能优化怎么做? 性能测试? 我对性能优化看法 与时俱进 后代选择器、子选择器等css选择器的性能已经有了 数倍的性能提升 找到瓶颈 在动手优化之前，先看看性能瓶颈在哪，把有限 的精力投入到关键性能问题上 工程化 工程化的解决性能问题，自动化地做到90分 情怀 Make The Web Faster. 水到渠成 性能优化是一件需要耐得住寂寞的事，要有 水到渠成的心态，与你共勉。 github: http:/ weibo: zhouqicf 欢迎交流：