曾自己借助阿里云和hexo搭了个站点，现已废弃，过往写的博客暂挪到此处。
title: 通过performance获取性能数据
date: 2016-12-28 15:21:39
tags:
- 技术
- Javascript
- 性能优化
- TODO
Performance：用来获取页面加载的各种时间的数据
分类
Performance 分了很多类，虽然都是window.perfomance的属性，但是却有分类
Performance API分为 User Timing 和 Navigation Timing
为什么要在意这个分类？因为兼容不一样！
Navigation Timing API
所谓 Navigation Timing ，浏览器帮你统计好的各种时间，如下图
具体每个字段的解释可以参考w3c文档或者阮一峰的博客，如下：
https://www.w3.org/TR/navigation-timing/
http://javascript.ruanyifeng.com/bom/performance.html
我根据这些字段获取了以下的时间段：
const performances = {
plt: performance.timing.loadEventStart - performance.timing.navigationStart,//pageloadtime页面加载耗时
dns: performance.timing.domainLookupEnd - performance.timing.domainLookupStart,//域名解析的耗时
tcp: performance.timing.connectEnd - performance.timing.connectStart,//TCP的耗时
ttfb: performance.timing.responseStart - performance.timing.navigationStart,//读取页面第一个字节之前的耗时
rqt: performance.timing.responseEnd - performance.timing.requestStart,//从发出请求到收到全部字节的时间
dit: performance.timing.domInteractive - performance.timing.domLoading,//dom interpret time: dom解析时间，不包括资源，到DOMContentLoaded为止
dlt: performance.timing.domComplete - performance.timing.domLoading//dom加载时间，包括所有资源
}
User Timing API
所谓User Timing，就是用户自己去统计各时间段。
通过mark，clearmarks，measure，clearMeasures等获取自己想要统计的时间段。
具体使用可以参考阮一峰的博客：
http://javascript.ruanyifeng.com/bom/performance.html
getEntries好像不算是User Timing API。
参考w3c文档：
https://www.w3.org/TR/performance-timeline/#dom-performance-getentries
而User Timing API的w3c文档在这里：
https://www.w3.org/TR/user-timing/
但在开发者自己去统计各时间段的时候，很可能会用到getEntries方法
getEntries()
通过getEntries()，可以获得该页面所有资源的加载过程各阶段的时刻及其他信息。
比如：
performances.rlt = [];//每个对象请求时间
for (var i = 0; i < performance.getEntries().length; i++) {
performances.rlt.push({
name: performance.getEntries()[i].name,
startTime: performance.getEntries()[i].startTime,
duration: performance.getEntries()[i].duration
})
}
兼容的问题
实时参考：
http://caniuse.com/#search=performance
我在这个问题上纠结了很久，有以下经验：
- 如caniuse网站上，Navigation Timing API 支持高版本的Safari；而User Timing API不支持Safari。
-
getEntries()在安卓的微信客户端内置浏览器是支持的，但是在苹果客户端的微信内置浏览器是不支持的。
何时获取？
最后一个很重要的问题，在什么时候去获取这些数据？
直接在js里获取，果断不行，你这段js代码在执行的时候，页面加载还没有完成，好多数据都没有！
window的load事件时获取也不能获取到完整很多数据，毕竟事情也还没做完。
最后我只能用这个蠢办法：
在window的load事件时setTimeOut 1秒钟，去获取这些数据。
希望有更好的方式，TODO
