Web App

Transcript

1. Web App 周祺（由校）tmall.com
2. 关于我 周祺，花名：由校 前端开发⼯工程师 @TMALL ! -Github：zhouqicf -Weibo：@由校校校 -Email : zhouqicf@gmail.com
3. 关于我 detail.m.tmall.com chaoshi.m.tmall.com
4. 区别
5. 交互⽅方式 w w w w
6. PC ✦ click (double click) ✦ keydown (up / press) ✦ mousewheel ✦ hover ✦ drag
7. Mobile
8. http://cds.tmall.net/modify.php?spm=0.0.0.0.1fr7Ak&act=show&id=296
10. • 交互⽅方式多 • 需要处理更多地⽤用户操作 • 动作具有连贯性 • performance = 60FPS
11. 输出设备 w w w w
12. PC - 分辨率
13. Mobile - 分辨率 http://opensignal.com/reports/fragmentation-2013/
14. 还有什么？ • 分辨率 • 弹性设计 • 物理尺⼨寸 • 点击区域、展现⽅方式 • orientation（⽅方向） • 界⾯面⽀支持、响应横、竖屏 • devicePixelRatio（设备像素⽐比） • ⾼高清化
15. 运⾏行环境 w w w w
16. Mobile - 运⾏行环境
17. • 设备 • Device API依赖设备传感器 • 输⼊入设备区别：如是否有硬返回键 • 系统、系统壳 • 不同系统提供不同的特有接⼝口：如各种协议、系统通知 • 开源的android带来⼤大量的OS：如云OS提供特殊的CloudAPI • 浏览器、浏览器壳 • 不同的浏览器⽀支持不同的特性 • 相⽐比PC端有更多的定制，更多的“⾃自主内核”，带来更多兼容性问题，如 android上的UC、QQ不⽀支持SVG • 客户端 • WebView\UIWebView的低成本定制带来的问题：如⼀一些淘宝客客户端未开 启localStorage⽀支持； Mobile - 运⾏行环境
18. ⺴⽹网络 w w http://chimera.labs.oreilly.com/books/1230000000545/index.html
20. 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 ⺴⽹网络
21. Generation Market Share 2G 61.8% 3G 38.2% ⺴⽹网络 数据来源：2013上半年@联通 http://tech.ifeng.com/telecom/detail_2013_08/09/28430773_0.shtml
22. 速度慢 & 不稳定 ⺴⽹网络 Loading / 重试机制 / 错误提⽰示 带宽⼩小 & ⾼高延时
23. 渲染性能 w w w w
24. 渲染性能 低功耗 卡顿
25. 新特性 w w w
26. http://html5test.com/results/mobile.html 新特性 - Mobile
27. http://html5test.com/results/desktop.html 新特性 - PC
28. 适配
29. View Port w w w w w w w w
30. 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;   }
31. 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即不可放⼤大
32. View Port http://screensiz.es/phone Galaxy Nexus’ Device Width is 360 iPhone 4’ Device Width is 320
33. View Port iPad 2’ Device Width is 768
34. 适配⽅方案 w w w w
35. ⽅方案⼀一 居中
36. ⽅方案⼆二 弹性设计 http://www.zhouqicf.com/html-css/resolution-adaptation-for-mobile
37. ⽅方案三 等⽐比例缩放
38. ⽅方案四 相应式 http://www.alistapart.com/articles/responsive-web-design/
39. ⾼高清⽅方案 w w w w
40. ⽅方案⼀一 N倍⼤大⼩小图⽚片 N  ＝  window.devicePixelRatio _120x120.jpg _240x240q50.jpg
41. ⽅方案⼆二 icon-font + Base64 http://iconfont.cn/ 缺点：单⾊色
42. ⽅方案三 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")
43. 性能
44. http://book.douban.com/subject/3132277/ http://book.douban.com/subject/4719162/ http://book.douban.com/subject/5362856/ 传统的优化 绝⼤大多数针对桌⾯面的优化原则在mobile上同样适⽤用
45. ScrollView { position: fixed; overflow: scroll; } 移动设备浏览器不⽀支持这些CSS，导致需要通过脚本来实现区域滚动
46. ScrollView http://cubiq.org/iscroll-4
47. ScrollView 任何JS实现的ScrollView都存在性能问题，这是⼀一个世界难题 iScroll滚动与原⽣生滚动条滚动的对⽐比，渲染和脚本执⾏行激增
48. ScrollView ✦尽可能通过交互的改变，避免区域滚动 ✦减少滚动容器的DOM数和层级 ✦使滚动容器脱离标准流，如绝对定位 ✦避免对滚动元素及其⼦子元素使⽤用box-shadow等⾼高消耗的css3属性 ✦避免在滚动时做其他的操作，特别是修改DOM、样式
49. Chrome Rendering - Show FPS meter Android adb fps 50+on desktop 30+on mobile 上⼀一⻚页的建议未必在你的应⽤用上奏效，通过查看fps返回修改代码，尝试各种⽅方案来提⾼高流畅度 ScrollView
50. 即刻响应 TAP 背后同步 即刻响应⽤用户的操作，数据同步可以在背后默默进⾏行，甚⾄至保存在本地，在某⼀一时刻⼀一起同步
51. 数据缓存 有缓存？ 请求 读取缓存 请求 否 是 过期？ 否 重新请求 客户端对于⾮非实时性数据可以对数据进⾏行⼀一定时间的缓存
52. 资源缓存 有缓存？ 返回包含资源的html 返回不包含资源的html 请求 否 是 读取本地资源 缓存资源到本地， 同时更新cookie server端根据cookie判断是否需要返回资源
53. 其它 ✦数据接⼝口合并，⼀一次请求多份数据，减少http请求 ✦启⽤用SPDY 协议，并⾏行加载资源 ✦使⽤用Application Cache
54. Debug
55. Chrome
56. Safari Remote Debug https://www.webkit.org/blog/1620/webkit-remote-debugging/ 1. 设置 > Safari > ⾼高级 > Web检查器 2. 打开Safari，菜单 > 开发
57. Android Remote Debug https://developers.google.com/chrome/mobile/docs/debugging 1. Settings > Developer Tools > Enable USB Debugging 2. chrome://inspect
58. Android WebView WebView.setWebContentsDebuggingEnabled(true); http://adamwadeharris.com/remote-debugging-in-phonegap-with-chrome-devtools/ >= API Level 19 (Kitkat)
59. Android ADB adb logcat :D | find “javaScript” http://developer.android.com/tools/help/adb.html
60. Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
61. Adobe Edge Inspect http://html.adobe.com/edge/inspect/
62. 测试
63. 测试范围 w w w w
64. 测试范围 - 浏览器 http://work.tmall.net/projects/tmall-anywhere/wiki/AGTE
65. 测试范围 - 系统 http://work.tmall.net/projects/tmall-anywhere/wiki/AGTE
66. Chrome Dev Tool w w w w w w w w w w w w w
67. 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
68. 模拟Touch 在电脑上模拟touch事件
69. 模拟屏幕 主流设备屏幕信息：http://www.mobitest.me/devices/
70. 环境绑定 w w w w
71. 远程代理 - Fiddler
72. 远程代理 - Charles
73. 路由器 - Hosts http://www.cnblogs.com/sink_cup/archive/2012/08/17/router_dnsmasq_android_hosts.html Detail M⽇日常 Detail M预发
74. TCPDump+ WireShark抓包 http://blog.csdn.net/howeverpf/article/details/10517351
75. 容易忽略的测试点 w w w w w w w w
76. ⼀一些容易忽略的点 • 是否考虑了低⺴⽹网速的情况，⺴⽹网络请求是否做了 loading提⽰示 • 横竖屏切换之后⻚页⾯面是否正常 • 点击区域是否⾜足够⼤大
77. 现状@Ali
78. 系统份额 - iOS http://wdm.taobao.com/pub2/publicos.htm
79. 系统份额 - android http://wdm.taobao.com/pub2/publicos.htm
80. ⺴⽹网络份额 http://wdm.taobao.com/pub2/publicno.htm
81. console.log(“ Thanks!”) zhouqicf@gmail.com github: http://zhouqicf.github.com weibo: @zhouqicf