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
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
現場で役立つモデリング 超入門
masuda220
PRO
13
2.9k
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
gopls を改造したら開発生産性が高まった
satorunooshie
8
250
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
440
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.3k
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
370
Golang と Erlang
taiyow
8
1.9k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Making Projects Easy
brettharned
115
5.9k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
KATA
mclloyd
29
13k
Ruby is Unlike a Banana
tanoku
96
11k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
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