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
Web App
Search
周祺
April 04, 2014
Programming
1
140
Web App
周祺
April 04, 2014
Tweet
Share
More Decks by 周祺
See All by 周祺
Mobile Web的性能优化与测试
zhouqicf
7
320
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
CSC509 Lecture 13
javiergs
PRO
0
110
初めてDefinitelyTypedにPRを出した話
syumai
0
420
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
受け取る人から提供する人になるということ
little_rubyist
0
250
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
subpath importsで始めるモック生活
10tera
0
320
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Making the Leap to Tech Lead
cromwellryan
133
8.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Visualization
eitanlees
145
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Practical Orchestrator
shlominoach
186
10k
How STYLIGHT went responsive
nonsquared
95
5.2k
Scaling GitHub
holman
458
140k
The Language of Interfaces
destraynor
154
24k
Unsuck your backbone
ammeep
668
57k
Docker and Python
trallard
40
3.1k
Transcript
Web App 周祺(由校)tmall.com
关于我 周祺,花名:由校 前端开发⼯工程师 @TMALL ! -Github:zhouqicf -Weibo:@由校校校 -Email :
[email protected]
关于我 detail.m.tmall.com chaoshi.m.tmall.com
区别
交互⽅方式 w w w w
PC ✦ click (double click) ✦ keydown (up / press)
✦ mousewheel ✦ hover ✦ drag
Mobile
http://cds.tmall.net/modify.php?spm=0.0.0.0.1fr7Ak&act=show&id=296
None
• 交互⽅方式多 • 需要处理更多地⽤用户操作 • 动作具有连贯性 • performance = 60FPS
输出设备 w w w w
PC - 分辨率
Mobile - 分辨率 http://opensignal.com/reports/fragmentation-2013/
还有什么? • 分辨率 • 弹性设计 • 物理尺⼨寸 • 点击区域、展现⽅方式 •
orientation(⽅方向) • 界⾯面⽀支持、响应横、竖屏 • devicePixelRatio(设备像素⽐比) • ⾼高清化
运⾏行环境 w w w w
Mobile - 运⾏行环境
• 设备 • Device API依赖设备传感器 • 输⼊入设备区别:如是否有硬返回键 • 系统、系统壳 •
不同系统提供不同的特有接⼝口:如各种协议、系统通知 • 开源的android带来⼤大量的OS:如云OS提供特殊的CloudAPI • 浏览器、浏览器壳 • 不同的浏览器⽀支持不同的特性 • 相⽐比PC端有更多的定制,更多的“⾃自主内核”,带来更多兼容性问题,如 android上的UC、QQ不⽀支持SVG • 客户端 • WebView\UIWebView的低成本定制带来的问题:如⼀一些淘宝客客户端未开 启localStorage⽀支持; Mobile - 运⾏行环境
⺴⽹网络 w w http://chimera.labs.oreilly.com/books/1230000000545/index.html
None
http://chimera.labs.oreilly.com/books/1230000000545/ch07.html Generation Data rate Latency 2G 100–400 Kbit/s 300–1000 ms
3G 0.5–5 Mbit/s 100–500 ms 4G 1–50 Mbit/s < 100 ms ⺴⽹网络
Generation Market Share 2G 61.8% 3G 38.2% ⺴⽹网络 数据来源:2013上半年@联通 http://tech.ifeng.com/telecom/detail_2013_08/09/28430773_0.shtml
速度慢 & 不稳定 ⺴⽹网络 Loading / 重试机制 / 错误提⽰示 带宽⼩小
& ⾼高延时
渲染性能 w w w w
渲染性能 低功耗 卡顿
新特性 w w w
http://html5test.com/results/mobile.html 新特性 - Mobile
http://html5test.com/results/desktop.html 新特性 - PC
适配
View Port w w w w w w w w
View Port http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html http://developer.android.com/guide/webapps/targeting.html 320px display on 640px #guide {
margin: 0 auto; width: 320px; }
View Port <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> width=device-width
浏览器预设的宽度(iphone4为 320),不是设备的真实宽度 user-scalable = 0 禁⽌止⽤用户缩放 initial-scale=1.0 初始缩放,1.0即不缩放 maximum-scale=1.0 最⼤大缩放⽐比率,1.0即不可放⼤大
View Port http://screensiz.es/phone Galaxy Nexus’ Device Width is 360 iPhone
4’ Device Width is 320
View Port iPad 2’ Device Width is 768
适配⽅方案 w w w w
⽅方案⼀一 居中
⽅方案⼆二 弹性设计 http://www.zhouqicf.com/html-css/resolution-adaptation-for-mobile
⽅方案三 等⽐比例缩放
⽅方案四 相应式 http://www.alistapart.com/articles/responsive-web-design/
⾼高清⽅方案 w w w w
⽅方案⼀一 N倍⼤大⼩小图⽚片 N = window.devicePixelRatio _120x120.jpg _240x240q50.jpg
⽅方案⼆二 icon-font + Base64 http://iconfont.cn/ 缺点:单⾊色
⽅方案三 SVG + Base64 缺点:android下部分国内壳浏览器不⽀支持 http://detail.m.tmall.com/item.htm?id=27295632965 document.implementation.hasFeature("http://www.w3.org/TR/SVG11/ feature#Image", "1.1")
性能
http://book.douban.com/subject/3132277/ http://book.douban.com/subject/4719162/ http://book.douban.com/subject/5362856/ 传统的优化 绝⼤大多数针对桌⾯面的优化原则在mobile上同样适⽤用
ScrollView { position: fixed; overflow: scroll; } 移动设备浏览器不⽀支持这些CSS,导致需要通过脚本来实现区域滚动
ScrollView http://cubiq.org/iscroll-4
ScrollView 任何JS实现的ScrollView都存在性能问题,这是⼀一个世界难题 iScroll滚动与原⽣生滚动条滚动的对⽐比,渲染和脚本执⾏行激增
ScrollView ✦尽可能通过交互的改变,避免区域滚动 ✦减少滚动容器的DOM数和层级 ✦使滚动容器脱离标准流,如绝对定位 ✦避免对滚动元素及其⼦子元素使⽤用box-shadow等⾼高消耗的css3属性 ✦避免在滚动时做其他的操作,特别是修改DOM、样式
Chrome Rendering - Show FPS meter Android adb fps 50+on
desktop 30+on mobile 上⼀一⻚页的建议未必在你的应⽤用上奏效,通过查看fps返回修改代码,尝试各种⽅方案来提⾼高流畅度 ScrollView
即刻响应 TAP 背后同步 即刻响应⽤用户的操作,数据同步可以在背后默默进⾏行,甚⾄至保存在本地,在某⼀一时刻⼀一起同步
数据缓存 有缓存? 请求 读取缓存 请求 否 是 过期? 否 重新请求
客户端对于⾮非实时性数据可以对数据进⾏行⼀一定时间的缓存
资源缓存 有缓存? 返回包含资源的html 返回不包含资源的html 请求 否 是 读取本地资源 缓存资源到本地, 同时更新cookie
server端根据cookie判断是否需要返回资源
其它 ✦数据接⼝口合并,⼀一次请求多份数据,减少http请求 ✦启⽤用SPDY 协议,并⾏行加载资源 ✦使⽤用Application Cache
Debug
Chrome
Safari Remote Debug https://www.webkit.org/blog/1620/webkit-remote-debugging/ 1. 设置 > Safari > ⾼高级
> Web检查器 2. 打开Safari,菜单 > 开发
Android Remote Debug https://developers.google.com/chrome/mobile/docs/debugging 1. Settings > Developer Tools >
Enable USB Debugging 2. chrome://inspect
Android WebView WebView.setWebContentsDebuggingEnabled(true); http://adamwadeharris.com/remote-debugging-in-phonegap-with-chrome-devtools/ >= API Level 19 (Kitkat)
Android ADB adb logcat :D | find “javaScript” http://developer.android.com/tools/help/adb.html
Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
Adobe Edge Inspect http://html.adobe.com/edge/inspect/
测试
测试范围 w w w w
测试范围 - 浏览器 http://work.tmall.net/projects/tmall-anywhere/wiki/AGTE
测试范围 - 系统 http://work.tmall.net/projects/tmall-anywhere/wiki/AGTE
Chrome Dev Tool w w w w w w w
w w w w w w
User Agent 淘宝主客等APP可以通过UA来识别、读取版本号 Mozilla/5.0 (Linux; U; Android 4.3; zh-cn; GT-I9500
Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30;T- UA=android_3.5.0_1080x1920_100000
模拟Touch 在电脑上模拟touch事件
模拟屏幕 主流设备屏幕信息:http://www.mobitest.me/devices/
环境绑定 w w w w
远程代理 - Fiddler
远程代理 - Charles
路由器 - Hosts http://www.cnblogs.com/sink_cup/archive/2012/08/17/router_dnsmasq_android_hosts.html Detail M⽇日常 Detail M预发
TCPDump+ WireShark抓包 http://blog.csdn.net/howeverpf/article/details/10517351
容易忽略的测试点 w w w w w w w w
⼀一些容易忽略的点 • 是否考虑了低⺴⽹网速的情况,⺴⽹网络请求是否做了 loading提⽰示 • 横竖屏切换之后⻚页⾯面是否正常 • 点击区域是否⾜足够⼤大
现状@Ali
系统份额 - iOS http://wdm.taobao.com/pub2/publicos.htm
系统份额 - android http://wdm.taobao.com/pub2/publicos.htm
⺴⽹网络份额 http://wdm.taobao.com/pub2/publicno.htm
console.log(“ Thanks!”)
[email protected]
github: http://zhouqicf.github.com weibo: @zhouqicf