SlideShare ist ein Scribd-Unternehmen logo
1 von 36
新首页性能优化 李成银 2011-12-22
性能的重要性 ,[object Object],[object Object],[object Object],[object Object]
性能对产品的影响
性能优化的前提 ,[object Object],[object Object]
性能监控平台 ,[object Object],[object Object],[object Object]
性能监控平台
性能监控平台
性能监控平台
优化的目标
优化手段 ,[object Object],[object Object],[object Object]
常规优化手段 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
常规优化手段 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
结果 Tti 时间放在 script 之后 Tti 时间放在 script 之前
结论 ,[object Object]
增强型优化手段 ,[object Object],[object Object],[object Object],[object Object]
支持 Smarty 的 HTML 压缩 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
支持 Smarty 的 HTML 压缩
图片延时加载 1 、导航 icon 2 、 app 的 icon 3 、 feed 用户头像 4 、 feed 中图片
Tangram 最优定制 ,[object Object],[object Object],[object Object],[object Object],[object Object]
Tangram 最优定制 http://fe.baidu.com/welefen/tangram-codesearch/codesearch.html
CSS 极限压缩 ,[object Object],[object Object],[object Object],[object Object]
CSS 极限压缩 ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS 极限压缩
CSS 极限压缩带来的问题 ,[object Object],[object Object],[object Object]
基于用户行为的分析优化 ,[object Object],[object Object],[object Object],[object Object]
鼠标移动行为 ,[object Object],[object Object]
鼠标点击行为
交互行为 – 编辑模式
数据分析的加载方法 ,[object Object],[object Object],[object Object]
优化历程
当前状态
当前状态
更多的优化 ,[object Object]
更多的优化 ,[object Object],[object Object],[object Object],[object Object],[object Object]
优化 ,[object Object]
Q&A ,[object Object]

Weitere ähnliche Inhalte

Was ist angesagt?

2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇传贵 谢
 
腾讯大讲堂19 系统优化的方向
腾讯大讲堂19 系统优化的方向腾讯大讲堂19 系统优化的方向
腾讯大讲堂19 系统优化的方向areyouok
 
2012 淘宝D2技术沙龙
2012 淘宝D2技术沙龙2012 淘宝D2技术沙龙
2012 淘宝D2技术沙龙lhqunar
 
前端性能测试
前端性能测试前端性能测试
前端性能测试tbmallf2e
 
Response Web Design
Response Web DesignResponse Web Design
Response Web DesignSichu Zhang
 
腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨areyouok
 
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)Cyril Wang
 
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020Shubo Chao
 

Was ist angesagt? (8)

2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇
 
腾讯大讲堂19 系统优化的方向
腾讯大讲堂19 系统优化的方向腾讯大讲堂19 系统优化的方向
腾讯大讲堂19 系统优化的方向
 
2012 淘宝D2技术沙龙
2012 淘宝D2技术沙龙2012 淘宝D2技术沙龙
2012 淘宝D2技术沙龙
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 
Response Web Design
Response Web DesignResponse Web Design
Response Web Design
 
腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨
 
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
 
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
 

Andere mochten auch

百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践Welefen Lee
 
前端编译平台
前端编译平台前端编译平台
前端编译平台Welefen Lee
 
Fiddler for chrom extension
Fiddler for chrom extensionFiddler for chrom extension
Fiddler for chrom extensionWelefen Lee
 
Impact of web latency on conversion rates
Impact of web latency on conversion ratesImpact of web latency on conversion rates
Impact of web latency on conversion ratesAlistair Croll
 
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目Welefen Lee
 

Andere mochten auch (6)

百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
前端编译平台
前端编译平台前端编译平台
前端编译平台
 
Fl介绍
Fl介绍Fl介绍
Fl介绍
 
Fiddler for chrom extension
Fiddler for chrom extensionFiddler for chrom extension
Fiddler for chrom extension
 
Impact of web latency on conversion rates
Impact of web latency on conversion ratesImpact of web latency on conversion rates
Impact of web latency on conversion rates
 
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目
 

Ähnlich wie 百度新首页性能优化

高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践longhao
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
前端性能优化和自动化
前端性能优化和自动化前端性能优化和自动化
前端性能优化和自动化kaven yan
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考greengnn
 
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结jieorlin
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践taobao.com
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Designjay li
 
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统Frank Xu
 
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案美团技术团队
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails serverMichael Chen
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
淘宝前端开发关键词
淘宝前端开发关键词淘宝前端开发关键词
淘宝前端开发关键词jay li
 
赶集团购开发总结4
赶集团购开发总结4赶集团购开发总结4
赶集团购开发总结4yangdj
 
腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨George Ang
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editortaobao.com
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化li qiang
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门Xiujun Ma
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
Inside the browser
Inside the browserInside the browser
Inside the browserotakustay
 

Ähnlich wie 百度新首页性能优化 (20)

高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
前端性能优化和自动化
前端性能优化和自动化前端性能优化和自动化
前端性能优化和自动化
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
 
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统使用NodeJS构建静态资源管理系统
使用NodeJS构建静态资源管理系统
 
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails server
 
写更好的CSS
写更好的CSS写更好的CSS
写更好的CSS
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
淘宝前端开发关键词
淘宝前端开发关键词淘宝前端开发关键词
淘宝前端开发关键词
 
赶集团购开发总结4
赶集团购开发总结4赶集团购开发总结4
赶集团购开发总结4
 
腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨腾讯大讲堂08 可扩展web架构探讨
腾讯大讲堂08 可扩展web架构探讨
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
Inside the browser
Inside the browserInside the browser
Inside the browser
 

百度新首页性能优化