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
1k
Mobile H5 性能优化
Mobile Performance Optimization
ningzbruc
July 09, 2013
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
39
去啊无线前端的一天
ningzbruc
1
150
React & Component
ningzbruc
0
27
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
240
KISSY.Base - all about that Base
ningzbruc
0
100
Hammer.js
ningzbruc
1
320
淘宝旅行门票iPad版开发
ningzbruc
0
110
Travel on KISSY mini
ningzbruc
0
170
Events
ningzbruc
2
110
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
220
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
640
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
330
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.6k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
660
C++20 射影変換
faithandbrave
0
550
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
1
140
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
RailsGirls IZUMO スポンサーLT
16bitidol
0
100
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
500
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Making Projects Easy
brettharned
116
6.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Writing Fast Ruby
sferik
628
62k
For a Future-Friendly Web
brad_frost
179
9.8k
Being A Developer After 40
akosma
90
590k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
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.