Enviar pesquisa
Carregar
百度前端性能监控与优化实践
•
12 gostaram
•
2,270 visualizações
Welefen Lee
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 42
Baixar agora
Baixar para ler offline
Recomendados
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
美团点评技术团队
美团前端架构简介
美团前端架构简介
pan weizeng
前端编译平台
前端编译平台
Welefen Lee
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang
W3CTech美团react专场-Thinking in React
W3CTech美团react专场-Thinking in React
美团点评技术团队
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术团队
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术团队
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
Recomendados
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
美团点评技术团队
美团前端架构简介
美团前端架构简介
pan weizeng
前端编译平台
前端编译平台
Welefen Lee
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang
W3CTech美团react专场-Thinking in React
W3CTech美团react专场-Thinking in React
美团点评技术团队
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术团队
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术团队
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
Jeff Chu
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术团队
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术团队
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
與大師對談: 轉移到微服務架構必經之路~ 系統與資料庫重構
與大師對談: 轉移到微服務架構必經之路~ 系統與資料庫重構
Andrew Wu
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Will Huang
React.js what do you really mean?
React.js what do you really mean?
昱安 周
kissy modularization part2
kissy modularization part2
yiming he
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
Jeff Chu
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
Will Huang
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
Will Huang
性能优化
性能优化
Lu Wei
Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017
Will Huang
Build your ETL job using Jenkins - step by step
Build your ETL job using Jenkins - step by step
Bryan Yang
Beyond rails server
Beyond rails server
Michael Chen
Berserk js
Berserk js
taobao.com
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
Mais conteúdo relacionado
Mais procurados
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
Jeff Chu
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术团队
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术团队
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
與大師對談: 轉移到微服務架構必經之路~ 系統與資料庫重構
與大師對談: 轉移到微服務架構必經之路~ 系統與資料庫重構
Andrew Wu
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Will Huang
React.js what do you really mean?
React.js what do you really mean?
昱安 周
kissy modularization part2
kissy modularization part2
yiming he
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
Jeff Chu
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
Will Huang
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
Will Huang
性能优化
性能优化
Lu Wei
Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017
Will Huang
Build your ETL job using Jenkins - step by step
Build your ETL job using Jenkins - step by step
Bryan Yang
Beyond rails server
Beyond rails server
Michael Chen
Mais procurados
(20)
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
與大師對談: 轉移到微服務架構必經之路~ 系統與資料庫重構
與大師對談: 轉移到微服務架構必經之路~ 系統與資料庫重構
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
React.js what do you really mean?
React.js what do you really mean?
kissy modularization part2
kissy modularization part2
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
Asp.net core v1.0
Asp.net core v1.0
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
性能优化
性能优化
Angular 5 全新功能探索 @ JSDC2017
Angular 5 全新功能探索 @ JSDC2017
Build your ETL job using Jenkins - step by step
Build your ETL job using Jenkins - step by step
Beyond rails server
Beyond rails server
Semelhante a 百度前端性能监控与优化实践
Berserk js
Berserk js
taobao.com
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
前端開發學習簡介
前端開發學習簡介
peterju
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
easychen
高性能网站最佳实践
高性能网站最佳实践
longhao
开源应用日志收集系统
开源应用日志收集系统
klandor
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
Adam Lu
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
美团点评技术团队
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Hacking Nginx at Taobao
Hacking Nginx at Taobao
Joshua Zhu
前端性能优化和自动化
前端性能优化和自动化
kaven yan
Axure RP Prototyping Tool
Axure RP Prototyping Tool
Souyi Yang
千万级并发在线推送系统架构解析 | 个信互动 叶新江
千万级并发在线推送系统架构解析 | 个信互动 叶新江
imShining @DevCamp
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
淘宝移动端Web开发实践
淘宝移动端Web开发实践
完颜 小卓
前端性能优化&测试
前端性能优化&测试
tbmallf2e
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
Android 4-app
Android 4-app
lydiafly
Semelhante a 百度前端性能监控与优化实践
(20)
Berserk js
Berserk js
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
前端開發學習簡介
前端開發學習簡介
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
高性能网站最佳实践
高性能网站最佳实践
开源应用日志收集系统
开源应用日志收集系统
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
美团点评技术沙龙05 - Node.js业务应用实践和服务监控
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Hacking Nginx at Taobao
Hacking Nginx at Taobao
前端性能优化和自动化
前端性能优化和自动化
Axure RP Prototyping Tool
Axure RP Prototyping Tool
千万级并发在线推送系统架构解析 | 个信互动 叶新江
千万级并发在线推送系统架构解析 | 个信互动 叶新江
KISSY Editor Design 2
KISSY Editor Design 2
淘宝移动端Web开发实践
淘宝移动端Web开发实践
前端性能优化&测试
前端性能优化&测试
编辑器设计Kissy editor
编辑器设计Kissy editor
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Android 4-app
Android 4-app
百度前端性能监控与优化实践
1.
百度前端性能监控与 优化实践
welefen – 李成银 2012.7.7
2.
关于我 * welefen /
李成银 / welefen@gmail.com * Blog:http://www.welefen.com * Twitter/微博:@welefen * @百度 * Github:https://github.com/welefen * 风为人世在,在世人为风。
3.
大纲 * 性能监控平台 * 性能分析工具 *
百度新首页和公共主页优化实践
4.
性能监控平台
5.
目标 * 产品线统一的性能监控平台 * 产品线可以快速接入 *
多维度查看性能及趋势 * 方便制定性能报表
6.
实现方式 * 通过JS在页面中抽样埋点 * 收集head、tti、dom、load等时间 *
收集performance api提供的时间点 * 将数据报送到log平台 * 通过log平台分布式计算得到中间数据 * 定时拉取中间数据进行计算并展现
7.
监控平台首页
8.
功能
9.
地域分布
10.
浏览器性能趋势
11.
Performance Api
12.
更多 * 性能A/B Test *
用户网速分布 * 无线页面的性能监控 *…
13.
性能分析工具
14.
目标 * 根据URL自动分析页面性能 * 根据优化收益给出需要的优化列表 *
历史浏览和对比 * 自动分析和报表 * 支持无线 * 支持产品线定制
15.
实现方式 * 使用phantom js
v1.5生成har文件 * 开发的各种检测规则 * 输出json格式检测结果 * 页面上展现检测结果 * 使用harviewer生成瀑布流 * 使用render方法截图
16.
检测结果
17.
D if f
18.
瀑布流
19.
百度新首页优化实践
20.
上网新起点
21.
机会&挑战 * 2011年百度世界大会推出最重量级产品 * 百度新的首页 *
互联网用户的入口 * 功能复杂、自定义、包含传统首页所有功能 * 传统首页非常快 * 性能作为一项产品功能被重视
22.
常规优化 * 静态资源外链、合并、压缩 * 静态资源设置强缓存 *
静态资源上CDN * 图片优化/图片延时加载 * CSS Sprites * 导航icon泛域名
23.
性能数据 * 后端平均时间60ms * 前端平均时间1.3s •
性能主要瓶颈在前端 • 后端主要是稳定性问题 • 速度问题必须尽快解决
24.
分析性能瓶颈 JS网络传输最耗时
25.
用户网速分布 50%用户网速小于50K
26.
优化项目
27.
减少网络传输 * 支持Smarty语法的HTML压缩 * JS基础库最优定制 *
CSS最优压缩 * JS模块化加载
28.
HT ML 压缩 *
FL 支持模版语法的html/css/js检测,美化,压缩等工具 https://github.com/welefen/Fl * 上线前编译时进行 不影响开发方式 * Gzip后减小5%
29.
FL v2 .0 http://www.flkit.org/test/
30.
J S 基础库最优定制 *
开发时使用全部的tangram * 上线前通过工具分析使用到的方法 * 将这些方法打包,替换全部的tangram * YUI压缩后76K->29K,减少62% * Gzip后25K->9.8K,减少61%
31.
C S S
的影响 * css下载直接影响页面白屏时间 * css中class名字一般较长 * html和js里调用的地方class也要写一份 * 产品多次升级后css有很多冗余代码
32.
C S S
极限压缩 * 分析html和js中用到的class * 建立压缩字典 * 压缩class名字 * 去除冗余的CSS代码
33.
模块化加载 * 使用FIS中模块化加载器 * F.use,
F.module, require * F._fileMap配置打包规则 * 基础库通过扩展参数不再使用require
34.
模块化加载
35.
其他一些尝试 * 基于A/B Test的外链JS个数 *
为了稳定性,传统首页CSS内联 * 测试外链CSS放在搜索框之后 * 测试完全基于用户模块的打包和下载策略 * 小流量使用未压缩版分析JS报错情况
36.
优化成果
37.
公共主页优化实践
38.
http://www.baidu.com/p/welefen
39.
特点 * 后端需要从多个产品线拉取数据 * 每个数据相对比较独立 *
后端很慢导致页面白页时间很长
40.
技术选型 无延时条件下,BigPipe和Ajax的总传输时间相当,BigPipe稍快。 有延时情况下,BigPipe比Ajax页面总时间减少20%。 请求数减少20%,其中主服务器请求数减少83%。
41.
总结 * 监控 ->
分析 -> 优化、评估 -> 监控 * 性能优化和开发效率、可维护性的权衡 * 性能与稳定性的权衡 * 根据产品特点选取合适的优化策略
42.
Q&A Welefen – 李成银
Baixar agora