web性能分析之performance

本文主要介绍通过performance分析web性能

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

window.performance.timing (PerformanceTiming)

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


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

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


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

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

window.performance.memory (memoryInfo)

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


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

window.performance.mark(“name”)

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


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

window.performance.measure(“name”)

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


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 事件发生时刻）到调用该方法时刻的毫秒数