Enviar búsqueda
Cargar
D2 如何发现前端性能问题
•
0 recomendaciones
•
1,218 vistas
aoao
Seguir
第七届D2前端技术论坛
Leer menos
Leer más
Tecnología
Diseño
Denunciar
Compartir
Denunciar
Compartir
1 de 70
Descargar ahora
Descargar para leer sin conexión
Recomendados
網站黑魔法:姆咪篇 Web security basics <s>x</s>
網站黑魔法:姆咪篇 Web security basics <s>x</s>
志仁 黃
MongoDB Basic
MongoDB Basic
simplels
difference between query string and hash
difference between query string and hash
fool2fish
MongoDB Basics and Tutorial
MongoDB Basics and Tutorial
Ho Kim
几种Nosql介绍
几种Nosql介绍
taotao1240
Json知识分享
Json知识分享
Qianhan Chen
Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)
振揚 陳
Communication with python_http_module
Communication with python_http_module
dreampuf
Recomendados
網站黑魔法:姆咪篇 Web security basics <s>x</s>
網站黑魔法:姆咪篇 Web security basics <s>x</s>
志仁 黃
MongoDB Basic
MongoDB Basic
simplels
difference between query string and hash
difference between query string and hash
fool2fish
MongoDB Basics and Tutorial
MongoDB Basics and Tutorial
Ho Kim
几种Nosql介绍
几种Nosql介绍
taotao1240
Json知识分享
Json知识分享
Qianhan Chen
Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)
振揚 陳
Communication with python_http_module
Communication with python_http_module
dreampuf
cfm to php training
cfm to php training
Chonpin HSU
Make your web faster
Make your web faster
德生 谭
2014WebRebuild年会分享
2014WebRebuild年会分享
癸鑫 张
Mongo简介
Mongo简介
wuda0112
独爽不如众乐
独爽不如众乐
Zheng Biao
Http cache 的優化
Http cache 的優化
振揚 陳
Mongo db部署架构之优先方案
Mongo db部署架构之优先方案
Lucien Li
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
高性能No sql数据库redis
高性能No sql数据库redis
paitoubing
Nosql七种武器之长生剑 mongodb的使用介绍
Nosql七种武器之长生剑 mongodb的使用介绍
yczealot
MongoDB for C# developer
MongoDB for C# developer
dianming.song
nodejs在微博前端开发中的应用
nodejs在微博前端开发中的应用
dong yuwei
Mongodb
Mongodb
bj
我对后端优化的一点想法.pptx
我对后端优化的一点想法.pptx
james tong
Mongo db技术分享
Mongo db技术分享
晓锋 陈
Web Caching Architecture and Design
Web Caching Architecture and Design
Ho Kim
缓存技术浅谈
缓存技术浅谈
Robbin Fan
Mvc
Mvc
tbmallf2e
Flex 4.5 action data communication
Flex 4.5 action data communication
jexchan
Berserk js
Berserk js
taobao.com
Html5和css3入门
Html5和css3入门
Xiujun Ma
广告前端代码优化
广告前端代码优化
taobao.com
Más contenido relacionado
La actualidad más candente
cfm to php training
cfm to php training
Chonpin HSU
Make your web faster
Make your web faster
德生 谭
2014WebRebuild年会分享
2014WebRebuild年会分享
癸鑫 张
Mongo简介
Mongo简介
wuda0112
独爽不如众乐
独爽不如众乐
Zheng Biao
Http cache 的優化
Http cache 的優化
振揚 陳
Mongo db部署架构之优先方案
Mongo db部署架构之优先方案
Lucien Li
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
高性能No sql数据库redis
高性能No sql数据库redis
paitoubing
Nosql七种武器之长生剑 mongodb的使用介绍
Nosql七种武器之长生剑 mongodb的使用介绍
yczealot
MongoDB for C# developer
MongoDB for C# developer
dianming.song
nodejs在微博前端开发中的应用
nodejs在微博前端开发中的应用
dong yuwei
Mongodb
Mongodb
bj
我对后端优化的一点想法.pptx
我对后端优化的一点想法.pptx
james tong
Mongo db技术分享
Mongo db技术分享
晓锋 陈
Web Caching Architecture and Design
Web Caching Architecture and Design
Ho Kim
缓存技术浅谈
缓存技术浅谈
Robbin Fan
Mvc
Mvc
tbmallf2e
Flex 4.5 action data communication
Flex 4.5 action data communication
jexchan
La actualidad más candente
(19)
cfm to php training
cfm to php training
Make your web faster
Make your web faster
2014WebRebuild年会分享
2014WebRebuild年会分享
Mongo简介
Mongo简介
独爽不如众乐
独爽不如众乐
Http cache 的優化
Http cache 的優化
Mongo db部署架构之优先方案
Mongo db部署架构之优先方案
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
高性能No sql数据库redis
高性能No sql数据库redis
Nosql七种武器之长生剑 mongodb的使用介绍
Nosql七种武器之长生剑 mongodb的使用介绍
MongoDB for C# developer
MongoDB for C# developer
nodejs在微博前端开发中的应用
nodejs在微博前端开发中的应用
Mongodb
Mongodb
我对后端优化的一点想法.pptx
我对后端优化的一点想法.pptx
Mongo db技术分享
Mongo db技术分享
Web Caching Architecture and Design
Web Caching Architecture and Design
缓存技术浅谈
缓存技术浅谈
Mvc
Mvc
Flex 4.5 action data communication
Flex 4.5 action data communication
Similar a D2 如何发现前端性能问题
Berserk js
Berserk js
taobao.com
Html5和css3入门
Html5和css3入门
Xiujun Ma
广告前端代码优化
广告前端代码优化
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Inside the-browser
Inside the-browser
jy03845581
Inside the-browser
Inside the-browser
jy03845581
前端性能优化和自动化
前端性能优化和自动化
kaven yan
前端性能测试
前端性能测试
tbmallf2e
Glider
Glider
windyrobin
WEB 安全基础
WEB 安全基础
xki
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
Dev camps Windows Store App 市集應用程式最佳實踐
Dev camps Windows Store App 市集應用程式最佳實踐
Meng-Ru (Raymond) Tsai
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
Jackson Tian
高性能网站建设
高性能网站建设
feifeipan
前端性能优化&测试
前端性能优化&测试
tbmallf2e
Node Web开发实战
Node Web开发实战
fengmk2
前端本地应用程序网络
前端本地应用程序网络
tblanlan
Yog Framework
Yog Framework
fansekey
Node Web开发实战
Node Web开发实战
fengmk2
Script with engine
Script with engine
Webrebuild
Similar a D2 如何发现前端性能问题
(20)
Berserk js
Berserk js
Html5和css3入门
Html5和css3入门
广告前端代码优化
广告前端代码优化
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Inside the-browser
Inside the-browser
Inside the-browser
Inside the-browser
前端性能优化和自动化
前端性能优化和自动化
前端性能测试
前端性能测试
Glider
Glider
WEB 安全基础
WEB 安全基础
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
Dev camps Windows Store App 市集應用程式最佳實踐
Dev camps Windows Store App 市集應用程式最佳實踐
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
高性能网站建设
高性能网站建设
前端性能优化&测试
前端性能优化&测试
Node Web开发实战
Node Web开发实战
前端本地应用程序网络
前端本地应用程序网络
Yog Framework
Yog Framework
Node Web开发实战
Node Web开发实战
Script with engine
Script with engine
D2 如何发现前端性能问题
1.
如何发现前端的 性能问题
!aoao@ 012(07(07!hangzhou
2.
如何发现前端的 性能问题
❈ Weibo:@aoao ❈ loaoao@gmail.com ❈ www.aoao.org.cn !aoao@ 012(07(07!hangzhou
3.
如何发现前端的 性能问题
❉ 信息 ❂ 加载时 ☁ 监控 !aoao@ 012(07(07!hangzhou
4.
1 信息 基于日志的数据分析
5.
10 年
10 10 10 10 10
6.
10 分钟
10 10 10 10 10
7.
请求率 你用了多少是可以算出来的
8.
请求率 200 + 304
PV 你用了多少是可以算出来的 200+304 PV, 50% 5%
9.
哪个文件 被哪个页面 用什么状态 引用了多少次
G W
10.
xRefer
11.
页面资源使用情况
12.
资源使用明细
13.
14.
资源被引用情况
15.
不同时间戳
16.
时间戳 统一时间戳的方式 就是不用时间戳
17.
清除缓存
iframe location.reload() http://www.aoao.org.cn/blog/2012/06/update-browser-cache/
18.
Combo明细 combo
combo
19.
搜索某个资源
20.
KISSY 组件分析
kissy combo
21.
KISSY 组件分析
kissy combo
22.
网站 vs.页面
23.
你不是一个人 在战斗
24.
2 HAR 传说中的瀑布图分析
25.
26.
27.
28.
29.
瀑布图
30.
HAR HTTP Archive
1.2 JSON 通用数据格式
31.
页面基本信息 "pages": [
{ "startedDateTime": "2012-07...", "id": "page_2", "title": "淘宝网 - 淘!我喜欢", "pageTimings": { "onContentLoad": 3247, "onLoad": 4310 } }
32.
"pages": [
页面基本信息 { "startedDateTime": "2012-07...", "id": "page_2", "title": "淘宝网 - 淘!我喜欢", "pageTimings": { "_renderStart" : 628, "onContentLoad": 3247, "onLoad": 4310 }
33.
"entries": [
每个请求的细节 { "pageref": "page_2", "startedDateTime": "2012-12...", "time": 222, "request": {...}, "blocked": 99, "response": {...}, "dns": 34, "connect": 0, "timings": {...}, "send": 12, "cache": {...}, "wait": 520, ... "receive": 32 "comment": "" http://www.softwareishard.com/blog/har-12-spec/
34.
LocalCache
35.
如何获取
36.
怎样获取 HAR
Fiddler Firebug / NetExport IE Developer Tools HttpWatch dynaTrace Chrome Developer To WEBPAGETEST PhantomJS
37.
PhantomJS 看不见的浏览器 www.phantomjs.org
38.
作用呢?
39.
HAR 的作用
PageSpeed YSlow har
40.
个性化
在这个卖萌的时代怎能通用 PageSpeed YSlow
41.
42.
43.
44.
TSlow YSlow
har
45.
TSlow YSlow
har
46.
TSlow YSlow
har
47.
TSlow YSlow
har
48.
YSlow
+ 前端数据中心
49.
对吗?
50.
3 监控 坐在家里看邮件也能发现问题
51.
关键时间 Start Render, DomReady,
Page Load, TTI
52.
Start Render
浏览器开始渲染 msFirstPaint
53.
Start Render TTFB (Time
To First Byte) 发起请求到服务器返回数据的时间 TTDD (Time To Document Download) 从服务器下载HTML文档的时间 TTHE (Time To Head End) HTML文档头部解析完成所需要的时间
54.
Dom Ready
页面解析完成 DomContentLoaded
55.
DomReady Start Render TTDC (Time
To Dom Created) DOM树创建所消耗时间 TTST (Time To Script) BODY中所有脚本加载和执行的时间
56.
Page Load
页面加载完成 window.onload
57.
Page Load Start Render DomReady Resource
Download 简单来说所有的资源加载完
58.
TTI Time To Interact 可进行交互的时间
59.
TTI (Time To
Interact) Start Render Core HTML Render 核心功能相关的HTML 渲染完成 Core Javascript Bind 核心功能相关的Javascript 绑定完成
60.
商品详情
61.
62.
diff 装修 有自己的页头 页底 分类可能豪华很多(就是好多图片) 能装修的主
商品图片一般很多 一些乱七八糟的模块
63.
{ JSTracker }
64.
window.onerror
65.
66.
CSS Naked
67.
68.
空样式
69.
谢谢聆听 你的问题
Descargar ahora