Web App - Speaker Deck

Slide 1

Slide 1 text

Web App 周祺（由校）tmall.com

Slide 2

Slide 2 text

关于我周祺，花名：由校前端开发⼯工程师 @TMALL ! -Github：zhouqicf -Weibo：@由校校校 -Email : [email protected]

Slide 3

Slide 3 text

关于我 detail.m.tmall.com chaoshi.m.tmall.com

Slide 4

Slide 4 text

区别

Slide 5

Slide 5 text

交互⽅方式 w w w w

Slide 6

Slide 6 text

PC ✦ click (double click) ✦ keydown (up / press) ✦ mousewheel ✦ hover ✦ drag

Slide 7

Slide 7 text

Mobile

Slide 8

Slide 8 text

http://cds.tmall.net/modify.php?spm=0.0.0.0.1fr7Ak&act=show&id=296

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

• 交互⽅方式多 • 需要处理更多地⽤用户操作 • 动作具有连贯性 • performance = 60FPS

Slide 11

Slide 11 text

输出设备 w w w w

Slide 12

Slide 12 text

PC - 分辨率

Slide 13

Slide 13 text

Mobile - 分辨率 http://opensignal.com/reports/fragmentation-2013/

Slide 14

Slide 14 text

还有什么？ • 分辨率 • 弹性设计 • 物理尺⼨寸 • 点击区域、展现⽅方式 • orientation（⽅方向） • 界⾯面⽀支持、响应横、竖屏 • devicePixelRatio（设备像素⽐比） • ⾼高清化

Slide 15

Slide 15 text

运⾏行环境 w w w w

Slide 16

Slide 16 text

Mobile - 运⾏行环境

Slide 17

Slide 17 text

• 设备 • Device API依赖设备传感器 • 输⼊入设备区别：如是否有硬返回键 • 系统、系统壳 • 不同系统提供不同的特有接⼝口：如各种协议、系统通知 • 开源的android带来⼤大量的OS：如云OS提供特殊的CloudAPI • 浏览器、浏览器壳 • 不同的浏览器⽀支持不同的特性 • 相⽐比PC端有更多的定制，更多的“⾃自主内核”，带来更多兼容性问题，如 android上的UC、QQ不⽀支持SVG • 客户端 • WebView\UIWebView的低成本定制带来的问题：如⼀一些淘宝客客户端未开启localStorage⽀支持； Mobile - 运⾏行环境

Slide 18

Slide 18 text

⺴⽹网络 w w http://chimera.labs.oreilly.com/books/1230000000545/index.html

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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 ⺴⽹网络

Slide 21

Slide 21 text

Generation Market Share 2G 61.8% 3G 38.2% ⺴⽹网络数据来源：2013上半年@联通 http://tech.ifeng.com/telecom/detail_2013_08/09/28430773_0.shtml

Slide 22

Slide 22 text

速度慢 & 不稳定⺴⽹网络 Loading / 重试机制 / 错误提⽰示带宽⼩小 & ⾼高延时

Slide 23

Slide 23 text

渲染性能 w w w w

Slide 24

Slide 24 text

渲染性能低功耗卡顿

Slide 25

Slide 25 text

新特性 w w w

Slide 26

Slide 26 text

http://html5test.com/results/mobile.html 新特性 - Mobile

Slide 27

Slide 27 text

http://html5test.com/results/desktop.html 新特性 - PC

Slide 28

Slide 28 text

适配

Slide 29

Slide 29 text

View Port w w w w w w w w

Slide 30

Slide 30 text

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; }

Slide 31

Slide 31 text

View Port width=device-width 浏览器预设的宽度（iphone4为 320），不是设备的真实宽度 user-scalable = 0 禁⽌止⽤用户缩放 initial-scale=1.0 初始缩放，1.0即不缩放 maximum-scale=1.0 最⼤大缩放⽐比率，1.0即不可放⼤大

Slide 32

Slide 32 text

View Port http://screensiz.es/phone Galaxy Nexus’ Device Width is 360 iPhone 4’ Device Width is 320

Slide 33

Slide 33 text

View Port iPad 2’ Device Width is 768

Slide 34

Slide 34 text

适配⽅方案 w w w w

Slide 35

Slide 35 text

⽅方案⼀一居中

Slide 36

Slide 36 text

⽅方案⼆二弹性设计 http://www.zhouqicf.com/html-css/resolution-adaptation-for-mobile

Slide 37

Slide 37 text

⽅方案三等⽐比例缩放

Slide 38

Slide 38 text

⽅方案四相应式 http://www.alistapart.com/articles/responsive-web-design/

Slide 39

Slide 39 text

⾼高清⽅方案 w w w w

Slide 40

Slide 40 text

⽅方案⼀一 N倍⼤大⼩小图⽚片 N ＝ window.devicePixelRatio _120x120.jpg _240x240q50.jpg

Slide 41

Slide 41 text

⽅方案⼆二 icon-font + Base64 http://iconfont.cn/ 缺点：单⾊色

Slide 42

Slide 42 text

⽅方案三 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")

Slide 43

Slide 43 text

性能

Slide 44

Slide 44 text

http://book.douban.com/subject/3132277/ http://book.douban.com/subject/4719162/ http://book.douban.com/subject/5362856/ 传统的优化绝⼤大多数针对桌⾯面的优化原则在mobile上同样适⽤用

Slide 45

Slide 45 text

ScrollView { position: ﬁxed; overﬂow: scroll; } 移动设备浏览器不⽀支持这些CSS，导致需要通过脚本来实现区域滚动

Slide 46

Slide 46 text

ScrollView http://cubiq.org/iscroll-4

Slide 47

Slide 47 text

ScrollView 任何JS实现的ScrollView都存在性能问题，这是⼀一个世界难题 iScroll滚动与原⽣生滚动条滚动的对⽐比，渲染和脚本执⾏行激增

Slide 48

Slide 48 text

ScrollView ✦尽可能通过交互的改变，避免区域滚动 ✦减少滚动容器的DOM数和层级 ✦使滚动容器脱离标准流，如绝对定位 ✦避免对滚动元素及其⼦子元素使⽤用box-shadow等⾼高消耗的css3属性 ✦避免在滚动时做其他的操作，特别是修改DOM、样式

Slide 49

Slide 49 text

Chrome Rendering - Show FPS meter Android adb fps 50+on desktop 30+on mobile 上⼀一⻚页的建议未必在你的应⽤用上奏效，通过查看fps返回修改代码，尝试各种⽅方案来提⾼高流畅度 ScrollView

Slide 50

Slide 50 text

即刻响应 TAP 背后同步即刻响应⽤用户的操作，数据同步可以在背后默默进⾏行，甚⾄至保存在本地，在某⼀一时刻⼀一起同步

Slide 51

Slide 51 text

数据缓存有缓存？请求读取缓存请求否是过期？否重新请求客户端对于⾮非实时性数据可以对数据进⾏行⼀一定时间的缓存

Slide 52

Slide 52 text

资源缓存有缓存？返回包含资源的html 返回不包含资源的html 请求否是读取本地资源缓存资源到本地，同时更新cookie server端根据cookie判断是否需要返回资源

Slide 53

Slide 53 text

其它 ✦数据接⼝口合并，⼀一次请求多份数据，减少http请求 ✦启⽤用SPDY 协议，并⾏行加载资源 ✦使⽤用Application Cache

Slide 54

Slide 54 text

Debug

Slide 55

Slide 55 text

Chrome

Slide 56

Slide 56 text

Safari Remote Debug https://www.webkit.org/blog/1620/webkit-remote-debugging/ 1. 设置 > Safari > ⾼高级 > Web检查器 2. 打开Safari，菜单 > 开发

Slide 57

Slide 57 text

Android Remote Debug https://developers.google.com/chrome/mobile/docs/debugging 1. Settings > Developer Tools > Enable USB Debugging 2. chrome://inspect

Slide 58

Slide 58 text

Android WebView WebView.setWebContentsDebuggingEnabled(true); http://adamwadeharris.com/remote-debugging-in-phonegap-with-chrome-devtools/ >= API Level 19 (Kitkat)

Slide 59

Slide 59 text

Android ADB adb logcat :D | find “javaScript” http://developer.android.com/tools/help/adb.html

Slide 60

Slide 60 text

Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

Slide 61

Slide 61 text

Adobe Edge Inspect http://html.adobe.com/edge/inspect/

Slide 62

Slide 62 text

测试

Slide 63

Slide 63 text

测试范围 w w w w

Slide 64

Slide 64 text

测试范围 - 浏览器 http://work.tmall.net/projects/tmall-anywhere/wiki/AGTE

Slide 65

Slide 65 text

测试范围 - 系统 http://work.tmall.net/projects/tmall-anywhere/wiki/AGTE

Slide 66

Slide 66 text

Chrome Dev Tool w w w w w w w w w w w w w

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

模拟Touch 在电脑上模拟touch事件

Slide 69

Slide 69 text

模拟屏幕主流设备屏幕信息：http://www.mobitest.me/devices/

Slide 70

Slide 70 text

环境绑定 w w w w

Slide 71

Slide 71 text

远程代理 - Fiddler

Slide 72

Slide 72 text

远程代理 - Charles

Slide 73

Slide 73 text

路由器 - Hosts http://www.cnblogs.com/sink_cup/archive/2012/08/17/router_dnsmasq_android_hosts.html Detail M⽇日常 Detail M预发

Slide 74

Slide 74 text

TCPDump+ WireShark抓包 http://blog.csdn.net/howeverpf/article/details/10517351

Slide 75

Slide 75 text

容易忽略的测试点 w w w w w w w w

Slide 76

Slide 76 text

⼀一些容易忽略的点 • 是否考虑了低⺴⽹网速的情况，⺴⽹网络请求是否做了 loading提⽰示 • 横竖屏切换之后⻚页⾯面是否正常 • 点击区域是否⾜足够⼤大

Slide 77

Slide 77 text

现状@Ali

Slide 78

Slide 78 text

系统份额 - iOS http://wdm.taobao.com/pub2/publicos.htm

Slide 79

Slide 79 text

系统份额 - android http://wdm.taobao.com/pub2/publicos.htm

Slide 80

Slide 80 text

⺴⽹网络份额 http://wdm.taobao.com/pub2/publicno.htm

Slide 81

Slide 81 text

console.log(“ Thanks!”) [email protected] github: http://zhouqicf.github.com weibo: @zhouqicf