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
如何解读页面性能
Search
Max
February 05, 2013
Programming
1
85
如何解读页面性能
如何解读页面性能
Max
February 05, 2013
Tweet
Share
More Decks by Max
See All by Max
分层语义化模板实现
maxlee
0
170
让前端开发更高效
maxlee
1
180
如何发现前端性能问题
maxlee
4
160
七年很痒
maxlee
1
130
跟乐高学模块设计
maxlee
2
130
从YUI2到YUI3看前端的演变
maxlee
0
130
Qzone-前端-CPU-性能优化
maxlee
0
170
更好的文件组织
maxlee
0
87
Mobile App Action design
maxlee
1
92
Other Decks in Programming
See All in Programming
Long journey of Ruby standard library RubyKaigi 2024
andpad
2
210
Productivity is Messing Around and Having Fun
hollycummins
1
180
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
630
Implementing Design Systems in Swift
seyfoyun
2
530
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
100
Open standards for building event-driven applications in the cloud
meteatamel
0
230
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2.1k
An adventure of Happy Eyeballs
coe401_
1
140
2024 コーディング研修
ckazu
2
650
Try creating your own orderedmap
kazamori
1
280
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
250
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Facilitating Awesome Meetings
lara
43
5.6k
Writing Fast Ruby
sferik
622
60k
Docker and Python
trallard
35
2.7k
Into the Great Unknown - MozCon
thekraken
15
1.1k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
What's new in Ruby 2.0
geeforr
338
31k
A better future with KSS
kneath
231
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
KATA
mclloyd
16
12k
Transcript
如何解读页面性能 heavenhuang
• 如何找到关键数据? • 多快才算快? • 想要更快要如何做? • 怎么收集优化成果?
问题总在前端
None
YSlow:buy.qq.com
如何找到关键数据? 工具:Firefox、 Chrome、测速系统…… 关键点: • 首屏展开时间 ◦ 首屏体积 • 主功能可交互时间
◦ JS加载时间 ◦ JS执行时间 • 页面完成时间
如何找到关键数据? 间接数据 • 页面模块点击 • 运营重点模块 • 成交转化 • 用户访问频率
多快才算快? 页面体积 / 网速 = 基本访问时间 实际访问>基本访问时间 = 慢
多快才算快? JS加载时间 + 执行时间 = 主功能可交互时间 主功能可交互时间 > 主功能展示时间 +
1秒 = 慢
想要更快如何做? • 让访问速度更快 ◦ 合理cache配置 ◦ 文件GZIP ◦ 图片压缩 ◦
按需加载 img、js
想要更快如何做? • 让用户觉得快 ◦ 消除阻塞 ◦ 以内容优先度展示 ◦ 收敛域名数量 ◦
ajax解耦 ◦ 交互解耦
想要更快如何做? • 让整个产品都快起来 ◦ 跨页面cache ◦ preLoad ◦ js模块复用 ◦
交互优化
• 浏览器preLoad ◦ IE8+ Lookahead Downloader ◦ Firefox7+ prefetch(HTML5属性) ◦
Chrome14+ prerender(HTML5属性) 参考资料:https://developer.mozilla.org/en/link_prefetching_faq 新技术 <a href="xxx.xxx.xxx.js" rel = "prefetch">
新技术 • SPDY ◦ SPDY 是 Google 开发的基于传输控制协议 (TCP) 的应用层协议
,开 发组正在推动 SPDY 成为正式标准(现为互联网草案)。SPDY 协议旨 在通过压缩、多路复用和优先级来缩短网页的加载时间和提高安全性。 (SPDY 是 Speedy 的昵音,意思是更快) 参考资料:http://www.geekpark.net/read/view/158198
怎么收集优化成果? • 关键数据对比 ◦ CDN访问数据 ◦ TWS访问压力 ◦ 客户端测速 •
间接影响 ◦ 页面点击转化 ◦ 成交转化 ◦ 老用户回头率
None
None
Q & A