Web App开发 - Speaker Deck

Slide 1

Slide 1 text

Web App 开发周祺（由校）os.aliyun.com 13年3月5⽇日星期⼆二

Slide 2

Slide 2 text

关于我周祺，花名：由校云OS －前端开发⼯工程师 -Github：zhouqicf -Weibo：@由校校校 -Blog : zhouqicf.com -Email : [email protected] 13年3月5⽇日星期⼆二

Slide 3

Slide 3 text

框架 13年3月5⽇日星期⼆二

Slide 4

Slide 4 text

} 13年3月5⽇日星期⼆二

Slide 5

Slide 5 text

适配 13年3月5⽇日星期⼆二

Slide 6

Slide 6 text

Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/ 13年3月5⽇日星期⼆二

Slide 7

Slide 7 text

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⽇日星期⼆二

Slide 8

Slide 8 text

Responsive Web Design http://www.zhouqicf.com/html-css/resolution-adaptation-for-mobile 13年3月5⽇日星期⼆二

Slide 9

Slide 9 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 13年3月5⽇日星期⼆二

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

View Port 13年3月5⽇日星期⼆二

Slide 12

Slide 12 text

View Port 13年3月5⽇日星期⼆二

Slide 13

Slide 13 text

View Port width=320 当应⽤用为320px宽屏幕设计时，可以制定浏览器的layout viewport也为320px，使应⽤用在各种设备上完美显⽰示，但android不⽀支持 initial-scale=1.5 ⼀一个解决的办法是制定缩放⽐比率，⽐比如 480px的设备上缩放⽐比率为1.5 13年3月5⽇日星期⼆二

Slide 14

Slide 14 text

View Port 13年3月5⽇日星期⼆二

Slide 15

Slide 15 text

性能 13年3月5⽇日星期⼆二

Slide 16

Slide 16 text

http://book.douban.com/subject/3132277/ http://book.douban.com/subject/4719162/ http://book.douban.com/subject/5362856/ 传统的优化绝⼤大多数针对桌⾯面的优化原则在mobile上同样适⽤用 13年3月5⽇日星期⼆二

Slide 17

Slide 17 text

ScrollView { position: ﬁxed; overﬂow: scroll; } 移动设备浏览器不⽀支持这些CSS，导致需要通过脚本来实现区域滚动 13年3月5⽇日星期⼆二

Slide 18

Slide 18 text

ScrollView http://cubiq.org/iscroll-4 13年3月5⽇日星期⼆二

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ScrollView Chrome 打开chrome://ﬂags/，启⽤用“FPS 计数器” Android adb fps 50+on desktop 30+on mobile 上⼀一⻚页的建议未必在你的应⽤用上奏效，通过查看fps返回修改代码，尝试各种⽅方案来提⾼高流畅度 13年3月5⽇日星期⼆二

Slide 22

Slide 22 text

即刻响应 TAP 背后同步即刻响应⽤用户的操作，数据同步可以在背后默默进⾏行，甚⾄至保存在本地，在某⼀一时刻⼀一起同步 13年3月5⽇日星期⼆二

Slide 23

Slide 23 text

数据缓存有缓存？请求读取缓存请求否是过期？否重新请求客户端对于⾮非实时性数据可以对数据进⾏行⼀一定时间的缓存 13年3月5⽇日星期⼆二

Slide 24

Slide 24 text

资源缓存有缓存？返回包含资源的html 返回不包含资源的html 请求否是读取本地资源缓存资源到本地，同时更新cookie server端根据cookie判断是否需要返回资源 13年3月5⽇日星期⼆二

Slide 25

Slide 25 text

Debug 13年3月5⽇日星期⼆二

Slide 26

Slide 26 text

Chrome 13年3月5⽇日星期⼆二

Slide 27

Slide 27 text

Safari Remote Debug https://www.webkit.org/blog/1620/webkit-remote-debugging/ 13年3月5⽇日星期⼆二

Slide 28

Slide 28 text

Android Remote Debug https://developers.google.com/chrome/mobile/docs/debugging 13年3月5⽇日星期⼆二

Slide 29

Slide 29 text

Android ADB adb logcat :D | find “javaScript” http://developer.android.com/tools/help/adb.html 13年3月5⽇日星期⼆二

Slide 30

Slide 30 text

Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 13年3月5⽇日星期⼆二

Slide 31

Slide 31 text

Adobe Edge Inspect http://html.adobe.com/edge/inspect/ 13年3月5⽇日星期⼆二

Slide 32

Slide 32 text

现状 13年3月5⽇日星期⼆二

Slide 33

Slide 33 text

硬件份额 13年3月5⽇日星期⼆二

Slide 34

Slide 34 text

系统份额 13年3月5⽇日星期⼆二

Slide 35

Slide 35 text

http://html5test.com/results/mobile.html HTML5 Test 13年3月5⽇日星期⼆二

Slide 36

Slide 36 text

console.log(“ Thanks!”) [email protected] blog: http://zhouqicf.com weibo: @zhouqicf github: http://zhouqicf.github.com 13年3月5⽇日星期⼆二