酒浓码浓 - 前端性能之performance

前端性能之performance

performance是前端性能监控的API

它可以检测到白屏时间、首屏时间、用户可操作的时间节点，页面总下载的时间、DNS查询的时间、TCP链接的时间等。

浏览器打印一下 window.performance，可以看到如下：

memory 内存相关

• jsHeapSizeLimit 该属性代表的含义是：内存大小的限制。
• totalJSHeapSize 表示 总内存的大小。
• usedJSHeapSize 表示可使用的内存的大小。

如果 usedJSHeapSize 大于 totalJSHeapSize的话，那么就会出现内存泄露的问题，因此是不允许大于该值的。

 

navigation 页面的来源信息

• redirectCount：该值的含义是：如果有重定向的话，页面通过几次重定向跳转而来，默认为0
• type：该值的含义表示的页面打开的方式。默认为0. 可取值为0、1、2、255

• 0（TYPE_NAVIGATE）：表示正常进入该页面(非刷新、非重定向)。
• 1（TYPE_RELOAD）：表示通过 window.location.reload 刷新的页面。如果我现在刷新下页面后，再来看该值就变成1了。
• 2（TYPE_BACK_FORWARD ）：表示通过浏览器的前进、后退按钮进入的页面。如果我此时先前进下页面，再后退返回到该页面后，查看打印的值，发现变成2了。
• 255（TYPE_RESERVED）：表示非以上的方式进入页面的。

 

onresourcetimingbufferfull  浏览器的资源时间性能缓冲区满了执行的回调函数

 

timeOrigin 是一系列时间点的基准点，精确到万分之一毫秒。该值是动态的，刷新下，该值是会发生改变的。

 

timing 是一系列关键时间点，它包含了网络、解析等一系列的时间数据。

• navigationStar：同一个浏览器上一个页面卸载结束时的时间戳。如果没有上一个页面的话，那么该值会和fetchStart的值相同
• redirectStart：该值的含义是第一个http重定向开始的时间戳，如果没有重定向或者重定向到一个不同源的话，那么该值返回为0
• redirectEnd：最后一个HTTP重定向完成时的时间戳。如果没有重定向，或者重定向到一个不同的源，该值也返回为0
• fetchStart：浏览器准备好使用http请求抓取文档的时间(发生在检查本地缓存之前)。
• domainLookupStart：DNS域名查询开始的时间，如果使用了本地缓存话，或 持久链接，该值则与fetchStart值相同。
• domainLookupEnd：DNS域名查询完成的时间，如果使用了本地缓存话，或 持久链接，该值则与fetchStart值相同。
• connectStart：HTTP 开始建立连接的时间，如果是持久链接的话，该值则和fetchStart值相同，如果在传输层发生了错误且需要重新建立连接的话，那么在这里显示的是新建立的链接开始时间。
• secureConnectionStart：HTTPS 连接开始的时间，如果不是安全连接，则值为 0
• connectEnd：HTTP完成建立连接的时间(完成握手)。如果是持久链接的话，该值则和fetchStart值相同，如果在传输层发生了错误且需要重新建立连接的话，那么在这里显示的是新建立的链接完成时间。
• requestStart：HTTP请求读取真实文档开始的时间，包括从本地读取缓存，链接错误重连时。
• responseStart：开始接收到响应的时间(获取到第一个字节的那个时候)。包括从本地读取缓存。
• responseEnd：HTTP响应全部接收完成时的时间(获取到最后一个字节)。包括从本地读取缓存。
• unloadEventStart：前一个网页（和当前页面同域）unload的时间戳，如果没有前一个网页或前一个网页是不同的域的话，那么该值为0
• unloadEventEnd：和 unloadEventStart 相对应，返回是前一个网页unload事件绑定的回调函数执行完毕的时间戳。
• domLoading：开始解析渲染DOM树的时间。
• domInteractive：完成解析DOM树的时间（只是DOM树解析完成，但是并没有开始加载网页的资源）。
• domContentLoadedEventStart：DOM解析完成后，网页内资源加载开始的时间。
• domContentLoadedEventEnd：DOM解析完成后，网页内资源加载完成的时间。
• domComplete：DOM树解析完成，且资源也准备就绪的时间。Document.readyState 变为 complete，并将抛出 readystatechange 相关事件。
• loadEventStart：load事件发送给文档。也即load回调函数开始执行的时间，如果没有绑定load事件，则该值为0
• loadEventEnd：load事件的回调函数执行完毕的时间，如果没有绑定load事件，该值为0

 

总结：

重定向耗时 = redirectEnd - redirectStart

DNS查询耗时 = domainLookupEnd - domainLookupStart

TCP链接耗时 = connectEnd - connectStart

HTTP请求耗时 = responseEnd - responseStart

解析dom树耗时 = domComplete - domInteractive

白屏时间 = responseStart - navigationStart

DOMready时间 = domContentLoadedEventEnd - navigationStart

onload时间 = loadEventEnd - navigationStart

 

performance.getEntries()

该方法包含了所有静态资源的数组列表

performance.now()

该方法会返回一个当前页面执行的时间的时间戳，该方法使用了一个浮点数，返回的是以毫秒为单位，小数点精确到微妙级别的时间。相对于Date.now() 更精确，并且不会受系统程序堵塞的影响。

performance.mark()

该方法的含义是用来自定义添加标记的时间, 方便我们计算程序的运行耗时。

performance.getEntriesByType()

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

performance.clearMeasures()

从浏览器的性能输入缓冲区中移除自定义添加的 measure

performance.getEntriesByName(name属性的值)

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

performance.toJSON()

该方法是一个 JSON 格式转化器，返回 Performance 对象的 JSON 对象。

 

注：本文参考自文档：https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

注：本文参考自博客：https://www.jianshu.com/p/1355232d525a