Performance：前端页面性能监控

最新推荐文章于 2025-06-26 20:37:24 发布

原创最新推荐文章于 2025-06-26 20:37:24 发布 · 7k 阅读

6 ·

CC 4.0 BY-SA版权

Performance是HTML5提供的，用于获取当前页面中与性能相关的信息（如：页面每个处理阶段精确时间）的API。可以通过调用只读属性 window.performance来获得。

浏览器兼容：IE9+，Chrome6+，Firefox7+

一、属性

1､Performance.navigation 提供了在指定时间内发生的操作相关信息，包括redirectCount和type两个属性。

redirectCount：重定向属性，返回当前页面发生了几次重定向。

type：返回值为0､1､2中的一个。

0: TYPE_NAVIGATE 用户通过常规导航方式访问页面，如果点击一个链接，或者一般的get方式。

1: TYPE_RELOAD 用户通过刷新，包括JS调用刷新接口等方式访问页面。

2: TYPE_BACK_FORWARD 用户通过后退按钮访问页面。

2､Performance.timeOrigin 返回性能测量开始时间的高精度时间戳。

3､Performance.memory 是Chrome添加的一个非标准扩展，提供了浏览器基本内存使用情况。

包括以下三个属性：

jsHeapSizeLimit：内存大小限制

totalJSHeapSize：当前js堆栈内存总大小

userdJSHeapSize：所有被使用的js堆栈内存，不能大于totalJSHeapSize，如果大于，则可能出现了内存泄漏

4､Performance.timing 包括了页面相关的性能信息。

参考下图：为Performance.timing的各个阶段

在页面中打印的结果如下：

Performance.timing属性分析：

navigationStart：当前浏览器窗口的前一个网页关闭发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。
unloadEventStart：如果有前一个网页，且与当前网页同源，则返回前一个网页unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或前一个网页与当前网页不同源，则返回值为0。
unloadEventEnd：如果有前一个网页，且与当前网页同源，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或前一个网页与当前网页不同源，则返回值为0。
redirectStart：返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不同源，则返回值为0。
redirectEnd：返回最后一个HTTP跳转结束时的Unix毫秒时间戳。如果没有跳转，或者不同源，则返回值为0。
fetchStart：返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
domainLookupStart：返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取，则返回值等同于fetchStart属性的值。
domainLookupEnd：返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取，则返回值等同于fetchStart属性的值。
connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接，则返回值等同于fetchStart属性的值。
connectEnd：返回浏览器与服务器之间的连接建立（连接建立指所有的握手和认证过程全部结束）时的Unix毫秒时间戳。如果使用持久连接，则返回值等同于fetchStart属性的值。
secureConnectionStart：返回浏览器与服务器开始安全连接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。
requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。
responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。
responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。
domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为loading，相应的readystatechange事件触发时）的Unix毫秒时间戳。
domInteractive：返回当前网页DOM结构解析结束、开始加载内嵌资源时（即Document.readyState属性变为interactive，相应的readystatechange事件触发时）的Unix毫秒时间戳。
domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的Unix毫秒时间戳。
domContentLoadedEventEnd：返回当前网页DOMContentLoaded事件结束时的Unix毫秒时间戳。
domComplete：返回当前网页DOM结构生成时（即Document.reayState属性变为complete，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。
loadEventStart：返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没发生，返回0。
loadEventEnd：返回当前网页load事件的回调函数结束时的Unix毫秒时间戳。如果该事件还没发生，返回0。

通过以上属性，可以计算出网页加载各个阶段的耗时，比如：

DNS查询：domainLookupEnd - domainLookupStart
TCP连接：connectEnd - connectStart
TTI（页面可交互时间）：domInteractive - navigationStart
domready时间：domContentLoadedEventEnd - navigationStart
onload：loadEventEnd - navigationStart

二、常用方法

1､Performance.getEntries() 资源测速

基于给定的filter返回一个PerformanceEntry对象的列表。即以数组的形式，返回网页中每个对象（脚本文件、样式表、图片文件等）请求的时间统计信息，字段与Performance.timing大致相同，另外增加了几个属性，如：name、duration、initiatorType等。包括以下几个API：

PerformanceNavigationTiming: 返回页面的时间统计信息，与Performance.timing大致相同，但是该处获取到的是各属性相对于navigationStart的毫秒数。

PerformanceResourceTiming：返回静态资源的时间统计信息，如img，js，css等静态资源。此方法在各浏览器下表现不一，有兼容问题。在chrome下，只返回加载成功的资源列表及其时间信息；在firfox下，则回所有资源列表（包括请求失败的）及其时间信息。

PerformancePaintTiming：在chrome下，还可以获取到PerformancePaintTiming信息（Chrome 60以上版本支持）：
first-paint：首次绘制，即浏览器绘制页面第一个像素的时间，即白屏时间。
first-contentful-paint：首次内容绘制，即浏览器开始绘制页面中的内容（可能是文字、图片，或者任何不属于非内容的样式）的时间。通常first-paint 和 first-contentful-paint区别不大，从下图中可以看到，这两个时间还可能会完全一致。