html5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp)，以方便我们进行前端分析。它是浏览器的直接实现，比在网页中用js设置Date.time或者cookie来分析网页时间上要精确很多。

要学习这套api的使用，先简单介绍下前端的基础知识。 

 1.页面加载 

 一个页面的请求到响应再到显示出来，需要经过下面一些重要过程，当我们在浏览器输入一个URL或者说点击一个URL开始，会出现如下流程： 

 （1）页面准备 

 （2）重定向：在header定义了重定向才会有这个过程，如果没有重定向，不会产生这个过程。  

（3）app cache：会先检查这个域名是否有缓存，如果有缓存就不需要DNS解析域名。这里的app是值应用程序application，不指手机app。 

 （4）DNS解析：把域名解析成IP，如果直接用ip地址访问，不产生这个过程。 

 （5）TCP连接：http协议是经过TCP来传输的，所以产生一个http请求就会有TCP connect，但是依赖于长连接，不会产生这个过程。 

 （6）request header：请求头信息。 

 （7）request body：请求体信息，比如get请求是没有请求体信息的，所以没有这个过程，这就是为什么把头跟体分开写的原因。 

 （8）response header：响应头信息。 

 （9）response body：响应体信息。 

 （10）解析HTML结构 

 （11）加载外部脚本和样式表文件：正常来说JS、css都是外部加载的，当然有不正常的人啊，比如我。 

 （12）解析并执行脚本代码 

 （13）构建与解析HTML dom树：这个过程可以去了解下DOM树是怎样的就明白啦。 

 （14）加载外部图片 

 （15）页面加载完成，显示出来。 

 2.重定向分析

为什么单独说一下这个重定向呢?因为刚开始我也想不通为什么重定向放在最开始，因为是否重定向是在request header中定义的啊，但是接着DNS、TCP连接，不应该是先DNS、TCP连接、request header再重定向吗？答案是的，来看看下面流程： 

（1）app cach

（2）DNS解析

（3）TCP连接

（4）request header

（5）重定向

（6）app cach

（7）DNS解析

（8）TCP连接

（9）request header

从上面就可以看出来，实际上面15个步骤我是把重定向的过程没有写的那么细啦，而实际重定向本身就是要经过DNS、TCP连接、request header再重定向的。所以说一般有重定向的请求耗时会多一些。

performance  

说完了前端的东西，这下轮到说正题啦，开始介绍到performance提供了一套API，下面就从API介绍开始吧。  

performance.mark() 

通过一个给定的名称，将该名称（作为键）和对应的DOMHighResTimeStamp（作为值）保存在一个哈希结构里。该键值对表示了从某一时刻（译者注：某一时刻通常是 navigationStart 事件发生时刻）到记录时刻间隔的毫秒数。（译者注：该方法一般用来多次记录时间，用于求得各记录间的时间差）

performance.now() 

该方法返回一个DOMHighResTimeStamp对象，该对象表示从某一时刻（译者注：某一时刻通常是 navigationStart 事件发生时刻）到调用该方法时刻的毫秒数。

Performance.clearMarks()

将给定的 mark 从浏览器的性能输入缓冲区中移除。 

Performance.clearMeasures()

 将给定的 measure 从浏览器的性能输入缓冲区中。

Performance.clearResourceTimings() 

从浏览器的性能数据缓冲区中移除所有 entryType 是 "resource" 的 performance entries。 

Performance.getEntries() 

基于给定的 filter 返回一个 PerformanceEntry 对象的列表。 

Performance.getEntriesByName() 

基于给定的 name 和 entry type 返回一个 PerformanceEntry 对象的列表。 

Performance.getEntriesByType() 

基于给定的 entry type 返回一个 PerformanceEntry 对象的列表

Performance.measure() 

在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 timestamp

Performance.setResourceTimingBufferSize() 

将浏览器的资源 timing 缓冲区的大小设置为 "resource" type performance entry 对象的指定数量 

Performance.toJSON() 

其是一个 JSON 格式转化器，返回 Performance 对象的 JSON 对象

performance.timing

是一个PerformanceTiming 对象,包含延迟相关的性能信息。

链接: https://fly63.com/article/detial/3298