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
周祺
January 17, 2013
Programming
4
240
Web App开发
Web App开发中的各种问题
周祺
January 17, 2013
Tweet
Share
More Decks by 周祺
See All by 周祺
Mobile Web的性能优化与测试
zhouqicf
7
330
Web App
zhouqicf
1
150
f2e @ 2012
zhouqicf
6
180
Photoshop影像修饰艺术
zhouqicf
4
350
前端和视觉间的故事
zhouqicf
1
140
CSS模块化
zhouqicf
2
230
Chrome Extension
zhouqicf
1
350
Other Decks in Programming
See All in Programming
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
リッチエディターを安全に開発・運用するために
unachang113
1
250
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
690
NEWT Backend Evolution
xpromx
1
150
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
220
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
270
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.4k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
800
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
160
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
A better future with KSS
kneath
238
17k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Visualization
eitanlees
146
16k
Fireside Chat
paigeccino
37
3.5k
Transcript
Web App 开发 周祺(由校)os.aliyun.com 13年3月5⽇日星期⼆二
关于我 周祺,花名:由校 云OS - 前端开发⼯工程师 -Github:zhouqicf -Weibo:@由校校校 -Blog : zhouqicf.com
-Email :
[email protected]
13年3月5⽇日星期⼆二
框架 13年3月5⽇日星期⼆二
} 13年3月5⽇日星期⼆二
适配 13年3月5⽇日星期⼆二
Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/ 13年3月5⽇日星期⼆二
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⽇日星期⼆二
Responsive Web Design http://www.zhouqicf.com/html-css/resolution-adaptation-for-mobile 13年3月5⽇日星期⼆二
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⽇日星期⼆二
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⽇日星期⼆二
View Port 13年3月5⽇日星期⼆二
View Port 13年3月5⽇日星期⼆二
<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⽇日星期⼆二
View Port 13年3月5⽇日星期⼆二
性能 13年3月5⽇日星期⼆二
http://book.douban.com/subject/3132277/ http://book.douban.com/subject/4719162/ http://book.douban.com/subject/5362856/ 传统的优化 绝⼤大多数针对桌⾯面的优化原则在mobile上同样适⽤用 13年3月5⽇日星期⼆二
ScrollView { position: fixed; overflow: scroll; } 移动设备浏览器不⽀支持这些CSS,导致需要通过脚本来实现区域滚动 13年3月5⽇日星期⼆二
ScrollView http://cubiq.org/iscroll-4 13年3月5⽇日星期⼆二
ScrollView 任何JS实现的ScrollView都存在性能问题,这是⼀一个世界难题 iScroll滚动与原⽣生滚动条滚动的对⽐比,渲染和脚本执⾏行激增 13年3月5⽇日星期⼆二
ScrollView ✦尽可能通过交互的改变,避免区域滚动 ✦减少滚动容器的DOM数和层级 ✦使滚动容器脱离标准流,如绝对定位 ✦避免对滚动元素及其⼦子元素使⽤用box-shadow等⾼高消耗的css3属性 ✦避免在滚动时做其他的操作,特别是修改DOM、样式 13年3月5⽇日星期⼆二
ScrollView Chrome 打开chrome://flags/,启⽤用“FPS 计数器” Android adb fps 50+on desktop 30+on
mobile 上⼀一⻚页的建议未必在你的应⽤用上奏效,通过查看fps返回修改代码,尝试各种⽅方案来提⾼高流畅度 13年3月5⽇日星期⼆二
即刻响应 TAP 背后同步 即刻响应⽤用户的操作,数据同步可以在背后默默进⾏行,甚⾄至保存在本地,在某⼀一时刻⼀一起同步 13年3月5⽇日星期⼆二
数据缓存 有缓存? 请求 读取缓存 请求 否 是 过期? 否 重新请求
客户端对于⾮非实时性数据可以对数据进⾏行⼀一定时间的缓存 13年3月5⽇日星期⼆二
资源缓存 有缓存? 返回包含资源的html 返回不包含资源的html 请求 否 是 读取本地资源 缓存资源到本地, 同时更新cookie
server端根据cookie判断是否需要返回资源 13年3月5⽇日星期⼆二
Debug 13年3月5⽇日星期⼆二
Chrome 13年3月5⽇日星期⼆二
Safari Remote Debug https://www.webkit.org/blog/1620/webkit-remote-debugging/ 13年3月5⽇日星期⼆二
Android Remote Debug https://developers.google.com/chrome/mobile/docs/debugging 13年3月5⽇日星期⼆二
Android ADB adb logcat :D | find “javaScript” http://developer.android.com/tools/help/adb.html 13年3月5⽇日星期⼆二
Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html 13年3月5⽇日星期⼆二
Adobe Edge Inspect http://html.adobe.com/edge/inspect/ 13年3月5⽇日星期⼆二
现状 13年3月5⽇日星期⼆二
硬件份额 13年3月5⽇日星期⼆二
系统份额 13年3月5⽇日星期⼆二
http://html5test.com/results/mobile.html HTML5 Test 13年3月5⽇日星期⼆二
console.log(“ Thanks!”)
[email protected]
blog: http://zhouqicf.com weibo: @zhouqicf github: http://zhouqicf.github.com 13年3月5⽇日星期⼆二