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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Max
February 05, 2013
Programming
110
1
Share
如何解读页面性能
如何解读页面性能
Max
February 05, 2013
More Decks by Max
See All by Max
分层语义化模板实现
maxlee
0
180
让前端开发更高效
maxlee
1
200
如何发现前端性能问题
maxlee
4
200
七年很痒
maxlee
1
140
跟乐高学模块设计
maxlee
2
150
从YUI2到YUI3看前端的演变
maxlee
0
130
Qzone-前端-CPU-性能优化
maxlee
0
200
更好的文件组织
maxlee
0
97
Mobile App Action design
maxlee
1
100
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
決定論 vs 確率論:Gemini 3 FlashとTF-IDFを組み合わせた「法規判定エンジン」の構築
shukob
0
150
Explore CoroutineScope
tomoeng11
0
160
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
hadashia
2
1.6k
検索設計から 推論設計への重心移動と Recall-First Retrieval
po3rin
5
1.5k
2026年のソフトウェア開発を考える(2026/05版) / Software Engineering Scrum Fest Niigata 2026 Edition
twada
PRO
21
11k
【26新卒研修】OpenAPI/Swagger REST API研修
dip_tech
PRO
0
140
How We Benchmarked Quarkus: Patterns and anti-patterns
hollycummins
1
180
PHPer、Cloudflare に引っ越す
suguruooki
1
140
AIを導入する前にやるべきこと
negima
2
330
10 Tips of AWS ~Gen AI on AWS~
licux
5
540
PHPでバイナリをパースして理解するASN.1
muno92
PRO
0
410
Featured
See All Featured
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.2k
Scaling GitHub
holman
464
140k
RailsConf 2023
tenderlove
30
1.4k
Accessibility Awareness
sabderemane
1
110
Mobile First: as difficult as doing things right
swwweet
225
10k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
240
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
280
The World Runs on Bad Software
bkeepers
PRO
72
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
BBQ
matthewcrist
89
10k
Practical Orchestrator
shlominoach
191
11k
Discover your Explorer Soul
emna__ayadi
2
1.1k
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