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
Mobile H5 性能优化
Search
ningzbruc
July 09, 2013
Programming
7
950
Mobile H5 性能优化
Mobile Performance Optimization
ningzbruc
July 09, 2013
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
9
去啊无线前端的一天
ningzbruc
1
110
React & Component
ningzbruc
0
9
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
190
KISSY.Base - all about that Base
ningzbruc
0
84
Hammer.js
ningzbruc
1
300
淘宝旅行门票iPad版开发
ningzbruc
0
88
Travel on KISSY mini
ningzbruc
0
120
Events
ningzbruc
2
100
Other Decks in Programming
See All in Programming
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
260
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
360
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
Snowflakeで眠ったデータを起こそう!
estie
0
110
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
見た目から始める生産性向上
ikumatadokoro
7
820
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Semantic search with Django and pgvector
pauloxnet
0
240
Git Rebase
bkuhlmann
11
1.6k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
68
8.6k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
The Pragmatic Product Professional
lauravandoore
25
5.8k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Docker and Python
trallard
34
2.7k
We Have a Design System, Now What?
morganepeng
43
6.7k
Music & Morning Musume
bryan
41
5.6k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Transcript
Mobile H5性能优化 淘宝航旅⽆无线前端⼩小组
Mobile H5性能优化 淘宝航旅⽆无线前端⼩小组
Why • 蜗⽜牛的⺴⽹网速 • 可怜的内存
⺴⽹网络分布
2012全国运营商3G⺴⽹网速对⽐比
https://speakerdeck.com/d2forum/ding-zhi-ban-she-ji-kai-fa-vsxiang-ying-shi-she-ji- kai-fa-zhi-xing-neng-ji-liu-liang
None
None
性能优化⺫⽬目标 更⼩小 + 更快
None
None
None
怎么做
Everything you’ve learned still applies 学到的知识不会过时 怎么做
⽂文件加载 • 减少请求(combo, css-sprites) • ⽆无阻塞加载(异步js,css加载) • ⽼老⽣生常谈...
http://mobitest.akamai.com/m/index.cgi
未优化前
combo+异步后
combo+异步后
combo+异步后 样式表阻⽌止脚本执⾏行!!!
样式表放在head最后⾯面
图⽚片优化
图⽚片优化 552.4K!!!
Data URI
Data URI
Data URI 1920.6K!!!
Data URI • 减少图像HTTP请求 • 体积增⼤大(约30%,gzip后约10%) • 不能被缓存
最佳实践 体积较⼩小并且重复率低的图⽚片使⽤用Data URI进⾏行 编码,⽐比如⼩小icon等
图⽚片压缩 http://tinypng.org/
图⽚片压缩
图⽚片压缩 210.9K!!!
压缩⼯工具 http://tinypng.org/ imageAlpha imageOptim JPEGmini
压缩⼯工具 http://tinypng.org/ imageAlpha imageOptim JPEGmini $ npm install -g imageoptim-cli
$ imageOptim -j -a -q -d path/to/images
代码瘦⾝身 http://a.tbcdn.cn/mw/base/styles/tms_h5.css
代码瘦⾝身 http://a.tbcdn.cn/mw/base/styles/tms_h5.css
None
None
我们需要优化代码
CSS优化 • 选择器优化 • 不要滥⽤用CSS3特性 • “position:fixed” • repaint &
reflow • ...
选择器优化 https://speakerdeck.com/jonrohan/githubs-css-performance https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
不要滥⽤用特性 • box-shadow/text-shadow • transition/transform • background: gradient(...) • ...
滥⽤用CSS3特性会导致⻚页⾯面渲染变慢,滚动效果卡顿(⽐比如说...⼩小⽶米2)
不要滥⽤用特性 • box-shadow/text-shadow • transition/transform • background: gradient(...) • ...
滥⽤用CSS3特性会导致⻚页⾯面渲染变慢,滚动效果卡顿(⽐比如说...⼩小⽶米2)
不⽀支持position:fixed?
不⽀支持position:fixed?
position:fixed http://bradfrostweb.com/blog/post/mobile-web-problems/#fixed
慎⽤用position:fixed • 部分低版本系统不⽀支持 • 可视范围更⼩小 • html:100%+absolute+iscroll,代码量增加
js优化 • 尽量⽤用原⽣生代码 • DOM选择器性能优化 • DOM节点缓存 • 注意内存释放 •
...
尽量⽤用原⽣生代码 https://speakerdeck.com/yaypie/when-not-to-use-yui var myObj = {}; var myObj = Y.Base.create(...);
尽量⽤用原⽣生代码 https://speakerdeck.com/yaypie/when-not-to-use-yui var myObj = {}; var myObj = Y.Base.create(...);
https://speakerdeck.com/lijing00333/css-selector-performance
更多 • ⺴⽹网络监控 • 缓存 • 统计
⺴⽹网络监控 2G/3G/4G/Wifi?
缓存 • APP存在缓存问题 • APP退出之后清空缓存
统计 • 优化需要更多的数据统计⽀支持 • CNZZ,⾕谷歌分析,淘宝⽆无线指数
总结 如何做好⽆无线端的性能优化?
总结 • 不留余地 • 绞尽脑汁 • 鸡蛋挑⾻骨头 • 不择⼿手段 •
令⼈人发指 • 测试,测试,测试... • ...
to be continued.. 开发调试篇
The End.