Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mobile Web的性能优化与测试
Search
周祺
August 15, 2014
Programming
7
320
Mobile Web的性能优化与测试
Velocity China, Aug 12th, 2014, Beijing
周祺
August 15, 2014
Tweet
Share
More Decks by 周祺
See All by 周祺
Web App
zhouqicf
1
140
Web App开发
zhouqicf
4
230
f2e @ 2012
zhouqicf
6
170
Photoshop影像修饰艺术
zhouqicf
4
340
前端和视觉间的故事
zhouqicf
1
140
CSS模块化
zhouqicf
2
220
Chrome Extension
zhouqicf
1
340
Other Decks in Programming
See All in Programming
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
CSC305 Lecture 13
javiergs
PRO
0
130
CSC509 Lecture 08
javiergs
PRO
0
110
Featured
See All Featured
Done Done
chrislema
181
16k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Building Your Own Lightsaber
phodgson
102
6.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Side Projects
sachag
452
42k
Thoughts on Productivity
jonyablonski
67
4.3k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Faster Mobile Websites
deanohume
304
30k
Automating Front-end Workflow
addyosmani
1365
200k
Code Review Best Practice
trishagee
64
17k
Transcript
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 图⽚片数量 当前容量 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/
None
这么做是有理由的 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&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
- 孤⽴立指标、纯技术指标 ⽤用户不关⼼心, ⽆无法反应感官速度
加载 http://www.traceshot.com ⽆无法实现性能监控、对⽐比 - 过程截图:TraceShot
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 加载- 过程指标:SpeedIndex
瀑布图 - User Timing
内存
功能耗时
Timing http://caniuse.com/#search=performance http://www.html5rocks.com/en/tutorials/webperformance/usertiming - User Timing API
FPS
FPS
综合 https://github.com/addyosmani/psi/ - PageSpeed Insights for Node
标准化地输出性能数据 HAR Firebug! httpwatch! Fiddler! YSlow! … http://www.softwareishard.com/blog/har-12-spec/
性能问题在哪! 性能优化怎么做! 性能测试! 我对性能优化看法
与时俱进 后代选择器、⼦子选择器等css选择器的性能已经有了 数倍的性能提升
找到瓶颈 在动⼿手优化之前,先看看性能瓶颈在哪,把有限 的精⼒力投⼊入到关键性能问题上
⼯工程化 ⼯工程化的解决性能问题,⾃自动化地做到90分
情怀 Make The Web Faster.
⽔水到渠成 性能优化是⼀一件需要耐得住寂寞的事,要有 ⽔水到渠成的⼼心态,与你共勉。
[email protected]
github: http://zhouqicf.github.com weibo: @zhouqicf 欢迎交流:
[email protected]