监控工具 performance

最新推荐文章于 2024-03-17 09:33:27 发布

皮蛋很白

最新推荐文章于 2024-03-17 09:33:27 发布

阅读量508

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/u012961419/article/details/108515293

版权

前端基础专栏收录该内容

27 篇文章 2 订阅

订阅专栏

监控工具 performance

performance是W3C引入的web API。接口可以获取当前页面中与性能相关的信息。

可以获取的信息：

白屏时间：从打开网站到有内容渲染出来的时间节点
首屏时间：首屏内容渲染完毕的时间节点
用户可操作的时间节点：domready触发节点
页面总下载时间：window.onload的触发节点
DNS查询时间
TCP链接时间
…

使用：

可以通过只读属性window.performance获得
可以通过浏览器开发者工具使用

window.performance 属性

查看window.performance，有3个属性：

在这里插入图片描述

memory 内存

包含此刻内存占用的情况，包含3个属性

jsHeapSizeLimit 上下文可用堆内存的上限（最大体积，已字节计算）
totalJSHeapSize 已分配的堆内存大小（可使用的内存）
usedJSHeapSize 当前JS活动对象占用的内存，如果大于totalJSHeapSize可能存在了内存泄漏，所以不允许大于totalJSHeapSize

MDN：“它是 Chrome 添加的一个非标准扩展，这个属性提供了一个可以获取到基本内存使用情况的对象。不应该使用这个非标准的 API。”

navigation 页面的来源信息

提供了在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等等

只有两个属性：

type 标志页面导航类型

type常数	枚举值	描述
TYPE_NAVIGATE	0	普通进入，包括：点击链接、在地址栏中输入 URL、表单提交、或者通过除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的方式初始化脚本。
TYPE_RELOAD	1	通过刷新进入，包括：浏览器的刷新按钮、快捷键刷新、location.reload()等方法。
TYPE_BACK_FORWARD	2	通过操作历史记录进入，包括：浏览器的前进后退按钮、快捷键操作、history.forward()、history.back()、history.go(num)。
TYPE_UNDEFINED	255	其他非以上类型的方式进入。

redirectCount 表示到达最终页面前，重定向的次数，但是这个接口有同源策略限制，即仅能检测同源的重定向。

timing 关键时间点

包含延迟相关的性能信息

从输入url到用户可以使用页面的全过程时间统计，会返回一个PerformanceTiming对象，单位均为毫秒

在这里插入图片描述

w3c 文档

navigationStart：浏览器 unload 前一个页面文档（document）的开始时间节点。如果没有之前的页面，此属性的值等于 fetchStart。

例如当前在浏览baidu.com，在地址栏输入google.com并回车

浏览器执行的动作依次为：unload 当前文档（baidu.com） -> 请求下一个文档（google.com）

navigationStart 的值就是触发unload当前文档的时间节点。
redirectStart 和 redirectEnd：如果在导航时存在HTTP重定向或等效内容（页面由redirect而来），并且所有重定向或等效内容都来自同一个原点，则 redirectStart 和 redirectEnd 分别代表redirect开始和结束的时间节点，否则值为0。
unloadEventStart 和 unloadEventEnd：如果先前文档和当前文档具有相同的来源（同一个域），则 unloadEventStart 和 unloadEventEnd 分别代表浏览器unload先前文档的开始和结束时间节点。否则两者都等于0。
fetchStart：是指在浏览器发起任何请求之前的时间值。在fetchStart 和 domainLookupStart 之间，浏览器会检查当前文档的缓存。
domainLookupStart 和 domainLookupEnd：分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用了cache），则两者的值都等于 fetchStart。
connectStart 和 connectEnd：分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接（比如使用持久化连接 webscoket、使用缓存或本地资源），则两者都等于 domainLookupEnd。
secureConnectionStart：可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回 undefined。如果该属性可用，但没有使用HTTPS，则返回0。
requestStart：代表浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等。如果发送请求后传输连接失败，并且浏览器重新打开连接并重新发送请求，则 requestStart 返回新请求的值。
responseStart 和 responseEnd：分别代表浏览器收到从服务器端（或缓存、本地资源）收到响应的第一个字节和最后一个字节数据（或关闭传输连接之前，以先到者为准）的时刻。
domLoading：当浏览器将 document.readyState 设置为 loading 的时间节点，也就是浏览器开始解析html文档的时间节点。
domInteractive：当浏览器将 document.readyState 设置为 interactive 的时间节点。domInteractive 并非 DOMReady，它早于 DOMReady 触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点。
domContentLoadedEventStart：代表 DOMContentLoaded 事件触发的时间节点。

MDN：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
domContentLoadedEventEnd：代表 DOMContentLoaded 事件完成的时间节点，此刻用户可以对页面进行操作，也就是jQuery中的domready时间。
domComplete：html文档完全解析完毕的时间节点。
loadEventStart和loadEventEnd：分别代表 load 事件触发和结束的时间节点。当未触发load 事件时，值为 0，当未完成 load 事件时 loadEventEnd 为 0 。

window.performance API

window.performance 的原型 Performance 提供了一些API。MDN 文档

getEntrires()

window.performance.getEntries() 可以用来统计静态资源相关的时间信息。

它返回一个 PerformanceEntry 对象列表。

每个 PerformanceEntry 对象代表 performance 时间列表中的单个指标数据（performance metric），例如静态资源加载信息。

PerformanceEntry 可以在应用运行过程中通过手动创建（例如调用performance.mark()），此外在加载资源（例如图片、script、css等）时，也会被动生成。

PerformanceEntry 属性：

name：该 PerformanceEntry 的名字
- 如果是加载资源（PerformanceResourceTiming）生成的，就是资源url
- 或者是调用performance.mark(name)传入的名字
entryType：类型，PerformanceEntry 的类型及对应的entryType：
- PerformanceNavigationTiming -> navigation
- PerformancePaintTiming -> paint
- PerformanceResourceTiming -> resource
- PerformanceMark -> mark
- PerformanceFrameTiming -> frame
- PerformanceMeasure -> measure
startTime：指标上报时的时间
duration：请求花费的时间
以及其他与 window.performance.timing 一样的属性（PerformancePaintTiming除外）