web 性能分析之 performance

发表于 更新于 分类于

window.performance 允许网页访问某些函数来测量网页和 Web 应用程序的性能。

window.performance.timing (PerformanceTiming)

返回一个 Object，提供了在加载和使用当前页面期间发生的各种事件的性能计时信息。(均为一个无符号 long 型的毫秒数)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
PerformanceTiming.navigationStart // 表示从同一个浏览器上下文的上一个文档卸载(unload)结束时的 UNIX 时间戳。如果没有上一个文档，这个值会和 PerformanceTiming.fetchStart 相同
PerformanceTiming.unloadEventStart // 表示 unload 事件抛出时的 UNIX 时间戳。如果没有上一个文档，或者上一个文档或所需的重定向之一不是同一来源， 这个值会返回 0
PerformanceTiming.unloadEventEnd // 表示 unload 事件处理完成时的 UNIX 时间戳。如果没有上一个文档，或者上一个文档或所需的重定向之一不是同一来源，这个值会返回 0
PerformanceTiming.redirectStart // 表示第一个 HTTP 重定向开始时的 UNIX 时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回 0.
PerformanceTiming.redirectEnd // 表示最后一个 HTTP 重定向完成时（也就是说是 HTTP 响应的最后一个比特直接被收到的时间）的 UNIX 时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回 0
PerformanceTiming.fetchStart // 表示浏览器准备好使用 HTTP 请求来获取(fetch)文档的 UNIX 时间戳。这个时间点会在检查任何应用缓存之前
PerformanceTiming.domainLookupStart // 表示域名查询开始的 UNIX 时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart 一致
PerformanceTiming.domainLookupEnd // 表示域名查询结束的 UNIX 时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart 一致
PerformanceTiming.connectStart // 返回 HTTP 请求开始向服务器发送时的 Unix 毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于 fetchStart 属性的值
PerformanceTiming.connectEnd // 返回浏览器与服务器之间的连接建立时的 Unix 毫秒时间戳。如果建立的是持久连接，则返回值等同于 fetchStart 属性的值。连接建立指的是所有握手和认证过程全部结束
PerformanceTiming.secureConnectionStart // 返回浏览器与服务器开始安全链接的握手时的 Unix 毫秒时间戳。如果当前网页不要求安全连接，则返回 0
PerformanceTiming.requestStart // 返回浏览器向服务器发出 HTTP 请求时（或开始读取本地缓存时）的 Unix 毫秒时间戳
PerformanceTiming.responseStart // 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的 Unix 毫秒时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间
PerformanceTiming.responseEnd // 返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前 HTTP 连接已经关闭，则返回关闭时）的 Unix 毫秒时间戳
PerformanceTiming.domLoading // 返回当前网页 DOM 结构开始解析时（即 Document.readyState 属性变为“loading”、相应的 readystatechange 事件触发时）的 Unix 毫秒时间戳
PerformanceTiming.domInteractive // 返回当前网页 DOM 结构结束解析、开始加载内嵌资源时（即 Document.readyState 属性变为“interactive”、相应的 readystatechange 事件触发时）的 Unix 毫秒时间戳
PerformanceTiming.domContentLoadedEventStart // 返回当解析器发送 DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的 Unix 毫秒时间戳
PerformanceTiming.domContentLoadedEventEnd // 返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的 Unix 毫秒时间戳
PerformanceTiming.domComplete 返回当前文档解析完成，即 Document.readyState 变为 'complete'且相对应的 readystatechange 被触发时的 Unix 毫秒时间戳
PerformanceTiming.loadEventStart // 返回该文档下，load 事件被发送时的 Unix 毫秒时间戳。如果这个事件还未被发送，它的值将会是 0
PerformanceTiming.loadEventEnd // 返回当 load 事件结束，即加载事件完成时的 Unix 毫秒时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是 0

常用计算：
DNS 查询耗时 ：domainLookupEnd - domainLookupStart
TCP 链接耗时 ：connectEnd - connectStart
request 请求耗时 ：responseEnd - responseStart
解析 dom 树耗时 ： domComplete - domInteractive
白屏时间 ：responseStart - navigationStart
domready 时间(用户可操作时间节点) ：domContentLoadedEventEnd - navigationStart
onload 时间(总下载时间) ：loadEventEnd - navigationStart

window.performance.navigation (PerformanceNavigation)

返回一个 Object，返回前给定浏览上下文中网页导航的类型和重定向次数

1
2
3
4
5
6
7
PerformanceNavigation.type; // 表示是如何导航到这个页面的，返回值有（0,1,2,255）四种
// 0: 当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在 url 中直接输入地址
// 1: 点击刷新页面按钮或者通过 Location.reload()方法显示的页面
// 2: 页面通过历史记录和前进后退访问
// 255: 任何其他方式

PerformanceNavigation.redirectCount; // 表示在到达这个页面之前重定向了多少次

window.performance.memory (memoryInfo)

返回一个 Object，返回量化的脚本内存使用率数字

1
2
3
memoryInfo.jsHeapSizeLimit; // 表示 JS 内存大小限制
memoryInfo.totalJSHeapSize; // 表示 JS 堆的当前大小，包括未被任何 JS 对象占用的可用空间，这意味着 usedJsHeapSize 不能大于 totalJsHeapSize（注意，不一定存在活动的 JS 对象的 totalJsHeapSize）
memoryInfo.usedJSHeapSize; // 表示 JS 对象（包括 V8 内部对象）正在使用的内存总量

window.performance.mark(“name”)

在浏览器的性能缓冲区中使用给定名称添加一个 timestamp(时间戳) 。

1
2
3
4
entryType; // 设置为 "mark".
name; // 设置为 mark 被创建时给出的 "name"。
startTime; // 设置为 mark() 方法被调用时的 timestamp 。
duration; // 设置为 "0" (标记没有持续时间).

window.performance.measure(“name”)

在浏览器性能记录缓存中创建了一个名为时间戳的记录来记录两个特殊标志位（通常称为开始标志和结束标志）。 被命名的时间戳称为一次测量（measure）。

1
2
3
4
entryType; // 设置为 "measure".
name; // 设置为 mark 被创建时给出的 "name"。
startTime; // 设置为 mark() 方法被调用时的 timestamp 。
duration; // 设置为 DOMHighResTimeStamp 小节的持续时间（通常是结束标记时间戳减去开始标记时间戳）.

window.performance.getEntriesByType(“mark”)

获取所有的 type 为”mark”PerformanceEntry 对象数组

window.performance.getEntriesByName(“name”)

获取所有的 name 为”name”的 PerformanceEntry 对象数组

window.performance.clearMarks()

清除所有 mark

window.performance.clearMeasures()

清除所有 measure

window.performance.now()

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