Web App开发

Web App开发中的各种问题

Transcript

1. Web App 开发 周祺（由校）os.aliyun.com 13年3月5⽇日星期⼆二
2. 关于我 周祺，花名：由校 云OS － 前端开发⼯工程师 -Github：zhouqicf -Weibo：@由校校校 -Blog : zhouqicf.com -Email : zhouqicf@gmail.com 13年3月5⽇日星期⼆二
3. 框架 13年3月5⽇日星期⼆二
4. } 13年3月5⽇日星期⼆二
5. 适配 13年3月5⽇日星期⼆二
6. Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/ 13年3月5⽇日星期⼆二
7. Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/ HVGA @media screen and (max-width: 320px) { ... } WVGA @media screen and (max-width: 321px) and (max-width: 480px) { ... } iPad @media screen and (max-width: 481px) and (max-width: 768px) { ... } Larger @media screen and (min-width: 769px) { ... } 13年3月5⽇日星期⼆二
8. Responsive Web Design http://www.zhouqicf.com/html-css/resolution-adaptation-for-mobile 13年3月5⽇日星期⼆二
9. 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 13年3月5⽇日星期⼆二
10. 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即不可放⼤大 13年3月5⽇日星期⼆二
11. View Port 13年3月5⽇日星期⼆二
12. View Port 13年3月5⽇日星期⼆二
13. <meta content="width=320" name="viewport" /> View Port <meta content="initial-scale=1.5" name="viewport" /> width=320 当应⽤用为320px宽屏幕设计时，可以制定浏 览器的layout viewport也为320px，使应⽤用在 各种设备上完美显⽰示，但android不⽀支持 initial-scale=1.5 ⼀一个解决的办法是制定缩放⽐比率，⽐比如 480px的设备上缩放⽐比率为1.5 13年3月5⽇日星期⼆二
14. View Port 13年3月5⽇日星期⼆二
15. 性能 13年3月5⽇日星期⼆二
16. http://book.douban.com/subject/3132277/ http://book.douban.com/subject/4719162/ http://book.douban.com/subject/5362856/ 传统的优化 绝⼤大多数针对桌⾯面的优化原则在mobile上同样适⽤用 13年3月5⽇日星期⼆二
17. ScrollView { position: fixed; overflow: scroll; } 移动设备浏览器不⽀支持这些CSS，导致需要通过脚本来实现区域滚动 13年3月5⽇日星期⼆二
18. ScrollView http://cubiq.org/iscroll-4 13年3月5⽇日星期⼆二
19. ScrollView 任何JS实现的ScrollView都存在性能问题，这是⼀一个世界难题 iScroll滚动与原⽣生滚动条滚动的对⽐比，渲染和脚本执⾏行激增 13年3月5⽇日星期⼆二
20. ScrollView ✦尽可能通过交互的改变，避免区域滚动 ✦减少滚动容器的DOM数和层级 ✦使滚动容器脱离标准流，如绝对定位 ✦避免对滚动元素及其⼦子元素使⽤用box-shadow等⾼高消耗的css3属性 ✦避免在滚动时做其他的操作，特别是修改DOM、样式 13年3月5⽇日星期⼆二
21. ScrollView Chrome 打开chrome://flags/，启⽤用“FPS 计数器” Android adb fps 50+on desktop 30+on mobile 上⼀一⻚页的建议未必在你的应⽤用上奏效，通过查看fps返回修改代码，尝试各种⽅方案来提⾼高流畅度 13年3月5⽇日星期⼆二
22. 即刻响应 TAP 背后同步 即刻响应⽤用户的操作，数据同步可以在背后默默进⾏行，甚⾄至保存在本地，在某⼀一时刻⼀一起同步 13年3月5⽇日星期⼆二
23. 数据缓存 有缓存？ 请求 读取缓存 请求 否 是 过期？ 否 重新请求 客户端对于⾮非实时性数据可以对数据进⾏行⼀一定时间的缓存 13年3月5⽇日星期⼆二
24. 资源缓存 有缓存？ 返回包含资源的html 返回不包含资源的html 请求 否 是 读取本地资源 缓存资源到本地， 同时更新cookie server端根据cookie判断是否需要返回资源 13年3月5⽇日星期⼆二
25. Debug 13年3月5⽇日星期⼆二
26. Chrome 13年3月5⽇日星期⼆二
27. Safari Remote Debug https://www.webkit.org/blog/1620/webkit-remote-debugging/ 13年3月5⽇日星期⼆二
28. Android Remote Debug https://developers.google.com/chrome/mobile/docs/debugging 13年3月5⽇日星期⼆二
29. Android ADB adb logcat :D | find “javaScript” http://developer.android.com/tools/help/adb.html 13年3月5⽇日星期⼆二
30. Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 13年3月5⽇日星期⼆二
31. Adobe Edge Inspect http://html.adobe.com/edge/inspect/ 13年3月5⽇日星期⼆二
32. 现状 13年3月5⽇日星期⼆二
33. 硬件份额 13年3月5⽇日星期⼆二
34. 系统份额 13年3月5⽇日星期⼆二
35. http://html5test.com/results/mobile.html HTML5 Test 13年3月5⽇日星期⼆二
36. console.log(“ Thanks!”) zhouqicf@gmail.com blog: http://zhouqicf.com weibo: @zhouqicf github: http://zhouqicf.github.com 13年3月5⽇日星期⼆二