你以为什么是perfomance之基础属性

简说

perfomance是浏览器提供给开发者用作监前端基础性能的标准api，通过该api的中提供的各项数据指标，前端开发者可以多快好省的定位性能损耗的各个环节。

performance对象

performance对象是挂载在window上的属性，通过使用window.performance或直接使用performance获得：

基础属性介绍

1.navigation

type，返回一个值，表示加载来源。 0，即 perfortance.navigation.TYPE_NAVIGATE ，点击链接、地址栏输入、表单提交、脚本操作等。 1，即 perfortance.navigation.TYPE_RELOAD ，点击重新加载按钮、location.reload。 2，即 perfortance.navigation.TYPE_BACK_FORWARD，点击前进或后退按钮。 255，即perfortance.navigation.TYPE_RESERVED，任何其他来源。
redirect，表示网页经过重定向的次数。

2.memory(目前只有谷歌支持)

usedJSHeapSize：js对象占用的内存(含v8引擎的内部对象)，若该值大于了 totalJSHeapSize ，可能出现了内存显露。
totalJSHeapSize：可使用的内存。
jsHeapSizeLimit：内存大小限制。

3.timeOrigin

  performance.timeOrigin返回的值表示性能测试开始时的时间戳。

4.timing(共21个时间，属旧版的时间模型，将被“废弃”/替代!!!)

  DNS查询耗时：domainLookupEnd - domainLookupStart。若使用缓存或本地资源，该结果为0。

domainLookupStart：表示域名查询开始的时间戳。若使用持续连接(persistent connection)、缓存或本地资源，该值等fetchStart。
domainLookupEnd：表示域名查询结束的时间戳。若使用持续连接(persistent connection)、缓存或本地资源，该值等于 fetchStart一致。
fetchStart：表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
```
TCP链接耗时 ：connectEnd - connectStart。若使用缓存或本地资源，该结果为0。
```
connectStart：返回请求开始向服务器发送信息时的时间戳。若使用持久连接(persistent connection)，则该值等于fetchStart。
connectEnd：返回浏览器与服务器之间的连接建立时的时间戳。若使用持久连接，则该值等于fetchStart。连接建立指的是所有握手和认证过程全部结束。
fetchStart：表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
```
request请求耗时 ：responseEnd - responseStart。
```
responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。
responseEnd：返回用户代理接收到最后一个字符的时间戳，和当前连接被关闭的时间中，更早的那个。同样，文档可能来自服务器、缓存、或本地资源。
```
解析dom树耗时 ： domComplete - domInteractive。
```
domComplete：返回当前网页DOM结构生成时的时间戳。（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）。
domInteractive：返回当前网页DOM结构结束解析、开始加载内嵌资源时的时间戳。（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）。
```
白屏时间 ：responseStart - navigationStart。
```
responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。
navigationStart：表示从同一个浏览器上下文的上一个文档卸载(unload)结束时的时间戳。如果没有上一个文档，该值等于fetchStart。
fetchStart：表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
```
domReady时间 ：domContentLoadedEventEnd - navigationStart。
```
domContentLoadedEventEnd：返回当前网页所有需要执行的脚本执行完成时的时间戳。
navigationStart：表示从同一个浏览器上下文的上一个文档卸载(unload)结束时的时间戳。如果没有上一个文档，该值等于fetchStart。
fetchStart：表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
```
onload时间 ：loadEventEnd - navigationStart。
```
loadEventEnd：返回当前网页load事件的回调函数运行结束时的时间戳。如果该事件还没有发生，返回0。
navigationStart：表示从同一个浏览器上下文的上一个文档卸载(unload)结束时的时间戳。如果没有上一个文档，该值等于fetchStart。
fetchStart：表示浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
```
其他时间
```
unloadEventStart：表示unload事件抛出时的时间戳。若无前一个网页，或之前网页跳转重定向非同一个域名内, 该值返回0。
unloadEventEnd：表示unload事件处理完成时的时间戳。若无前一个网页，或之前网页跳转非同一个域名内，该值会返回0。
redirectStart：表示第一个请求重定向开始时的时间戳。若无重定向，或者重定向中的一个不同源，这个值会返回0。
redirectEnd：表示最后一个请求重定向完成时的时间戳。（也就是说请求响应的最后一个byte被收到的时间）。若无重定向，或重定向中的一个不同源，这个值会返回0。
secureConnectionStart：返回浏览器与服务器开始安全链接的握手时的时间戳。(用户代理若无对应属性，将设置该属性为undefined。并且若当前域名不是https，则返回0)。
requestStart：返回浏览器向服务器发出请求时（或开始读取本地缓存时）的时间戳。
domLoading：返回当前网页DOM结构开始解析时的时间戳。（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）。
domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时的时间戳（即DOM结构解析完毕、所有脚本开始运行时）。
loadEventStart：返回当前网页load事件的回调函数开始时的时间戳。若该事件还未发生，返回0。

参照图

其中，startTime可以理解为timeOrigin。

写在最后

需要声明的一点是，我不是一个教授者，我只是一个分享者、一个讨论者、一个学习者，有不同的意见或新的想法，提出来，我们一起研究。分享的同时，并不只是被分享者在学习进步，分享者亦是。

知识遍地，拾到了就是你的。

既然有用，不妨点赞，让更多的人了解、学习并提升。

号外

我写了一个前端基础性能监控的包： github.com/Indifferenc…

npm包下载： npm install performance-kits --save

求星星，等拍砖，orz，咱们结个善缘~