Mobile Web的性能优化与测试

Velocity China, Aug 12th, 2014, Beijing

Transcript

1. Mobile Web的性能优化与测试 周祺（由校） tmall.com Velocity China, Aug 12th, 2014, Beijing
2. 周祺，花名：由校 前端开发⼯工程师 @TMALL ! Github：zhouqicf Weibo：@由校校校 Email: zhouqicf@gmail.com
3. detail.m.tmall.com chaoshi.m.tmall.com
4. 2011年的时候⼈人们开始铺设⼀一条横跨⼤大⻄西 洋，连接伦敦和纽约的近5000km的海底光 缆。铺设这条光缆的唯⼀一⺫⽬目的是减少城市间 的路由，为⾦金融市场的交易商减少5ms的延 迟，耗资⼤大约4亿美元。 1ms ＝ 8000万美元 ＝ 5亿⼈人民币 4亿/5
5. 性能问题在哪 性能优化怎么做 性能测试 我对性能优化看法 今天说点什么?
6. 性能问题在哪! 性能优化怎么做! 性能测试! 我对性能优化看法
7. - 打开慢 - 反应慢 普通⽤用户的反馈
8. 我们熟悉的描述 打! 开! 慢 - ⽩白屏、⽆无样式时间⻓长 - 可⽤用时间晚 反! 应! 慢 - 响应时间慢 - 操作没有反馈 - 动画卡顿
9. 我们更加熟悉的描述 打! 开! 慢 - ⽩白屏、⽆无样式时间⻓长 > CSS、图⽚片加载太慢! - 可⽤用时间晚 > JS加载太慢 反! 应! 慢 - 响应时间慢 > ⺴⽹网络延迟、不稳定! - 操作没有反馈 > UI设计! - 动画卡顿 > 内存占⽤用⾼高 耗! 电
10. 性能问题在哪! 性能优化怎么做! 性能测试! 我对性能优化看法
11. ⼀一些不再复述的重要建议 http://book.douban.com/subject/3132277/ http://book.douban.com/subject/4719162/ http://book.douban.com/subject/5362856/ http://book.douban.com/subject/25856314/
12. 加载 - hybrid中⾃自定义⼀一套离线策略
13. - 不通⽤用 - 客户端、服务端开发成本 - 多套发布流程 - hybrid中⾃自定义⼀一套离线策略 加载
14. 单位：ms 数据源：115KB的js数据 - ⼆二次加载不是问题 加载 from cache的200响应头
15. 加载 Application Cache + 预置缓存 Application Cache⽆无法增量更新？ 预置⼀一份标准缓存到application cache的缓存⺫⽬目录， 解决⾸首次加载问题 可以做到， manifest列表中的单个⽂文件的cdn缓存仍然有效 http://www.html5rocks.com/zh/tutorials/appcache/beginner/ - 透明化、标准化地解决⾸首次加载
16. ⾼高清化 - icon-font http://iconfont.cn - 单⾊色 - 阻塞渲染，造成加载过程⽩白屏 - 按需加载成本⾼高 - 字体渲染导致的模糊 - 容易造成样式和内容的耦合
17. ⾼高清化 - SVG Android下部分国内浏览器不⽀支持 http://detail.m.tmall.com/item.htm?id=27295632965
18. ⾼高清化 - 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
19. ⾼高清化 - 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
20. ⾼高清化 - 多终端⾃自适应 - ⺴⽹网络情况 > 压缩率 - 是否⽀支持webp > 压缩格式 - 屏幕PPI > 压缩率 - 屏幕分辨率 > 尺⼨寸 最适合当前环境的图⽚片 http://gallery.kissyui.com/crossimage/1.1/guide/index.html
21. 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
22. 数据请求 - Native⽐比较快？ 既然数据没有差异，那么差别也许来源于设计 单位：ms 数据源：6.6MB的json数据
23. 解耦⽤用户交互和⺴⽹网络通信 设计得好的应⽤用，即便底层连接慢或者请求时间 很⻓长，通过UI中的提供即时反馈也能让⼈人觉得速 度快。 实时反馈 Loading
24. 实时反馈 TAP 背后同步
25. loading - 部落冲突/使命召唤 - 加载过程中放出⼀一些tips - ⽣生化危机/质量效应 - 加载过程中讲述剧情 - 雷曼传奇/刺客信条 - 加载过程中，可以操作⾓角⾊色 http://www.polishtheconsole.com/2010/05/19/video-game-loading-screens-just-pure-evil/
27. 这么做是有理由的 Peter Bickford做过⼀一个实验： 有⼀一个请求花了2分钟，有⼀一半的⼈人只等了8.5秒， 增加了loading之后延⻓长到了20秒，⽽而进度条则让⽤用 户等到了最后。
28. ⺴⽹网络不稳定 - 不要缓存⺴⽹网络状态，实时判断 - 监听连接状态，采⽤用最佳的请求⽅方式 - 超时等⺴⽹网络异常时提供重试策略 - 离线时记录请求，在⺴⽹网络良好时发送
29. {% 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 跨终端
30. 跨终端Web 徐凯（⿁鬼道）@Tmall http://book.douban.com/subject/25909777/ 跨终端 https://github.com/luics/luics.github.com/issues/15
31. 内存 - ⼤大的图⽚片 - ⼤大量的DOM - 径向渐变、阴影等css3属性 - Transform 3d产⽣生的复合层（占⽤用4倍内存）
32. ⽆无论传输多少数据， 移动通信总会消耗恒定的电量 46%的电量消耗仅传输0.2%的数据 （来⾄至AT&T对于Pandora的分析） 续航
33. 避免轮询，采⽤用服务端推送，如web socket http://www.html5rocks.com/en/tutorials/websockets/basics/ http://socket.io/ 续航
34. 请求合并 续航 减少http请求 http://g.tbcdn.cn/??kissy/k/1.4.2/seed-min.js,tm/chaoshi-m/3.3.2/seed.js 续航
35. ⾮非关键性的请求推迟到⽆无线模块活动的时候发送 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 续航
36. 续航 低电量时⾃自动禁⽤用动画
37. 在AMOLED下使⽤用⿊黑⽩白⾊色 续航
38. hybrid - ⺴⽹网络状态查询（navigator.connection） - 电量状态查询 - WebP - Application Cache预置缓存 - 通知中⼼心（服务端推送、客户端的集中发送） - 性能统计（如：User Timing API） - SPDY
39. hybrid 把⾃自⼰己当成⼀一个浏览器， 标准化的提供接⼝口
40. 性能问题在哪! 性能优化怎么做! 性能测试! 我对性能优化看法
41. 数据的可靠性 - 性能分析⼯工具和真实⽤用户数据采集都必不可少 - 样本量 - 不要过分依赖平均值，直⽅方图更好 - 通过直⽅方图⾯面积的差值来实现性能的对⽐比 - 描述过程性能的指标不能依赖孤⽴立的点
42. - 平均数：说明的是整体的平均⽔水平 - 众数：说明的是多数情况 - 中位数：说明的是中等⽔水平 数据的可靠性 - 平均数、众数、中位数 http://eblog.cersp.com/userlog33/268170/archives/2011/1507906.shtml
43. 测试范围
44. 加载 - ⾸首次渲染时间 - ⾸首字节时间 - Dom Ready - onload - 孤⽴立指标、纯技术指标 ⽤用户不关⼼心， ⽆无法反应感官速度
45. 加载 http://www.traceshot.com ⽆无法实现性能监控、对⽐比 - 过程截图：TraceShot
46. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 加载- 过程指标：SpeedIndex
47. 瀑布图 - User Timing
48. 内存
49. 功能耗时
50. Timing http://caniuse.com/#search=performance http://www.html5rocks.com/en/tutorials/webperformance/usertiming - User Timing API
51. FPS
52. FPS
53. 综合 https://github.com/addyosmani/psi/ - PageSpeed Insights for Node
54. 标准化地输出性能数据 HAR Firebug! httpwatch! Fiddler! YSlow! … http://www.softwareishard.com/blog/har-12-spec/
55. 性能问题在哪! 性能优化怎么做! 性能测试! 我对性能优化看法
56. 与时俱进 后代选择器、⼦子选择器等css选择器的性能已经有了 数倍的性能提升
57. 找到瓶颈 在动⼿手优化之前，先看看性能瓶颈在哪，把有限 的精⼒力投⼊入到关键性能问题上
58. ⼯工程化 ⼯工程化的解决性能问题，⾃自动化地做到90分
59. 情怀 Make The Web Faster.
60. ⽔水到渠成 性能优化是⼀一件需要耐得住寂寞的事，要有 ⽔水到渠成的⼼心态，与你共勉。
61. zhouqicf@gmail.com github: http://zhouqicf.github.com weibo: @zhouqicf 欢迎交流：zhouqicf@gmail.com