Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。
# 一、回顾页面加载过程
要学习这套
API的使用，先简单介绍下前端的基础知识
# 1.1 页面加载
一个页面的请求到响应再到显示出来，需要经过下面一些重要过程，当我们在浏览器输入一个
URL或者说点击一个URL开始，会出现如下流程
- 页面准备
- 重定向：在
header定义了重定向才会有这个过程，如果没有重定向，不会产生这个过程。 app cache：会先检查这个域名是否有缓存，如果有缓存就不需要DNS解析域名。这里的app是值应用程序application，不指手机app。DNS解析：把域名解析成IP，如果直接用ip地址访问，不产生这个过程。TCP连接：http协议是经过TCP来传输的，所以产生一个http请求就会有TCP connect，但是依赖于长连接，不会产生这个过程。request header：请求头信息。request body：请求体信息，比如get请求是没有请求体信息的，所以没有这个过程，这就是为什么把头跟体分开写的原因。response header：响应头信息。response body：响应体信息。- 解析
HTML结构 - 加载外部脚本和样式表文件：正常来说
JS、css都是外部加载的，当然有不正常的人啊，比如我。 - 解析并执行脚本代码
- 构建与解析
HTML DOM树：这个过程可以去了解下DOM树是怎样的就明白啦。 - 加载外部图片
- 页面加载完成，显示出来啦
# 1.2 重定向分析
app cachDNS解析TCP连接request header- 重定向
app cachDNS解析TCP连接request header
# 二、performance
# 2.1 performance.timing
这个API能帮我们得到整个页面请求的时间，如下图，在
Chrome的Console是可以直接运行的
先解释下这些时间都是代表什么
timing 对象里边的数据比较多，梳理如下几个关键性的节点
fetchStart：发起获取当前文档的时间点，我的理解是浏览器收到发起页面请求的时间点；domainLookupStart：返回浏览器开始DNS查询的时间，如果此请求没有DNS查询过程，如长连接、资源cache、甚至是本地资源等，那么就返回fetchStart的值；domainLookupEnd：返回浏览器结束DNS查询的时间，如果没有DNS查询过程，同上；connectStart：浏览器向服务器请求文档，开始建立连接的时间，如果此连接是一个长连接，或者无需与服务器连接（命中缓存），则返回domainLookupEnd的值；connectEnd：浏览器向服务器请求文档，建立连接成功的时间；requestStart：开始请求文档的时间（注意没有requestEnd）;responseStart：浏览器开始接收第一个字节数据的时间，数据可能来自于服务器、缓存、或本地资源；unloadEventStart：卸载上一个文档开始的时间；unloadEventEnd：卸载上一个文档结束的时间；domLoading：浏览器把document.readyState设置为“loading”的时间点，开始构建dom树的时间点；responseEnd：浏览器接收最后一个字节数据的时间，或连接被关闭的时间；domInteractive：浏览器把document.readyState设置为“interactive”的时间点，DOM树创建结束；domContentLoadedEventStart：文档发生DOMContentLoaded事件的时间；domContentLoadedEventEnd：文档的DOMContentLoaded事件结束的时间；domComplete：浏览器把document.readyState设置为“complete”的时间点；loadEventStart：文档触发load事件的时间；loadEventEnd：文档出发load事件结束后的时间
再来一张图，表示各阶段的开始与结束对应的时间
从以上的分析，我们就可以得到一些时间的计算
- 准备新页面耗时：
fetchStart - navigationStart - 重定向时间：
redirectEnd - redirectStart App Cache时间：domainLookupStart - fetchStartDNS解析时间：domainLookupEnd -domainLookupStartTCP连接时间：connectEnd - connectStartrequest时间：responseEnd - requestStart这个计算是代表请求响应加起来的时间- 请求完毕到
DOM树加载：domInteractive -responseEnd - 构建与解析
DOM树，加载资源时间：domCompleter -domInteractive load时间：loadEventEnd - loadEventStart- 整个页面加载时间：
loadEventEnd -navigationStart - 白屏时间：
responseStart-navigationStart
