Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web的性能优化与测试

周祺
August 15, 2014

Mobile Web的性能优化与测试

Velocity China, Aug 12th, 2014, Beijing

周祺

August 15, 2014
Tweet

More Decks by 周祺

Other Decks in Programming

Transcript

  1. 我们更加熟悉的描述 打! 开! 慢 - ⽩白屏、⽆无样式时间⻓长 > CSS、图⽚片加载太慢! - 可⽤用时间晚

    > JS加载太慢 反! 应! 慢 - 响应时间慢 > ⺴⽹网络延迟、不稳定! - 操作没有反馈 > UI设计! - 动画卡顿 > 内存占⽤用⾼高 耗! 电
  2. 加载 Application Cache + 预置缓存 Application Cache⽆无法增量更新? 预置⼀一份标准缓存到application cache的缓存⺫⽬目录, 解决⾸首次加载问题

    可以做到, manifest列表中的单个⽂文件的cdn缓存仍然有效 http://www.html5rocks.com/zh/tutorials/appcache/beginner/ - 透明化、标准化地解决⾸首次加载
  3. ⾼高清化 - 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
  4. ⾼高清化 - 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
  5. ⾼高清化 - 多终端⾃自适应 - ⺴⽹网络情况 > 压缩率 - 是否⽀支持webp >

    压缩格式 - 屏幕PPI > 压缩率 - 屏幕分辨率 > 尺⼨寸 最适合当前环境的图⽚片 http://gallery.kissyui.com/crossimage/1.1/guide/index.html
  6. 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
  7. loading - 部落冲突/使命召唤 - 加载过程中放出⼀一些tips - ⽣生化危机/质量效应 - 加载过程中讲述剧情 -

    雷曼传奇/刺客信条 - 加载过程中,可以操作⾓角⾊色 http://www.polishtheconsole.com/2010/05/19/video-game-loading-screens-just-pure-evil/
  8. {% 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 跨终端
  9. hybrid - ⺴⽹网络状态查询(navigator.connection) - 电量状态查询 - WebP - Application Cache预置缓存

    - 通知中⼼心(服务端推送、客户端的集中发送) - 性能统计(如:User Timing API) - SPDY
  10. 加载 - ⾸首次渲染时间 - ⾸首字节时间 - Dom Ready - onload

    - 孤⽴立指标、纯技术指标 ⽤用户不关⼼心, ⽆无法反应感官速度
  11. FPS

  12. FPS