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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
ningzbruc
July 09, 2013
Programming
1k
7
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Mobile H5 性能优化
Mobile Performance Optimization
ningzbruc
July 09, 2013
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
66
去啊无线前端的一天
ningzbruc
1
180
React & Component
ningzbruc
0
45
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
270
KISSY.Base - all about that Base
ningzbruc
0
130
Hammer.js
ningzbruc
1
340
淘宝旅行门票iPad版开发
ningzbruc
0
140
Travel on KISSY mini
ningzbruc
0
200
Events
ningzbruc
2
130
Other Decks in Programming
See All in Programming
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
nrslib
13
3.9k
AIだと陥りがちなJakarta EE最新技術への移行時の落とし穴と解決策
tnagao7
0
110
Oxlintのカスタムルールの現況
syumai
6
1.1k
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.6k
DynamoDBには集計系のクエリがないけどなんとかしたい
musan
1
140
Spec Driven Development | AI Summit Lisbon
danielsogl
PRO
0
190
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
kuranuki
2
670
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
540
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
3.9k
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
190
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
10
4k
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
shogogg
0
220
Featured
See All Featured
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.3k
Producing Creativity
orderedlist
PRO
348
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
The Cost Of JavaScript in 2023
addyosmani
55
10k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
160
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
What does AI have to do with Human Rights?
axbom
PRO
1
2.2k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
430
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Code Reviewing Like a Champion
maltzj
528
40k
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.