html页面性能分析,前端性能监控之performance

如果我们想要对一个网页进行性能监控，那么使用window.performance是一个比较好的选择。

我们通过window.performance可以获取到用户访问一个页面的每个阶段的精确时间,从而对性能进行分析。

一、页面性能监控

1、利用performance.timing来监控网页的性能

网页的整个生命周期

PerformanceTiming属性如下

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

如何获取PerformanceTiming

我们可以直接使用JS语法即可获取到

var mytiming =window.performance.timing;

console.log(mytiming)

利用timing分析网页

DNS查询耗时 ：domainLookupEnd -domainLookupStart

TCP链接耗时 ：connectEnd-connectStart

SSL安全连接耗时: connectEnd-secureConnectionStart

request请求耗时 ：responseEnd-responseStart

解析dom树耗时 ： domComplete-domInteractive

首次渲染时间/白屏时间 ：responseStart -navigationStart

domready时间：domContentLoadedEventEnd-navigationStart

onload时间(总下载时间) ：loadEventEnd- navigationStart

2、利用window.performance.getEntriesByType("navigation")来监控网页的性能

window.performance.getEntriesByType("navigation")和performance.timing实际上是大同小异的，

只是说这个window.performance.getEntriesByType("navigation")的时间更精确

如何获取window.performance.getEntriesByType("navigation")

我们可以直接使用JS语法即可获取到

console.log(mytiming)

利用timing分析网页

DNS查询耗时 ：domainLookupEnd -domainLookupStart

TCP链接耗时 ：connectEnd-connectStart

SSL安全连接耗时: connectEnd-secureConnectionStart

request请求耗时 ：responseEnd-responseStart

解析dom树耗时 ： domComplete-domInteractive

首次渲染时间/白屏时间 ：responseStart -startTime

domready时间 ：domContentLoadedEventEnd-startTime

onload时间(总下载时间) ：duration

二、页面资源监控

1、页面资源时间介绍

资源加载时间是指：网页打开的过程中，各个图片、JS、CSS文件加载的时间。

资源加载的各个阶段的时间戳，如重定向、DNS查询、TCP连接建立。这些阶段和他们的属性名在图中列出。

或者这么看也行

应用开发者可以使用这些属性值去计算某个阶段的耗时长度，用来帮助诊断性能问题。

我们还可以使用Chrome浏览器的开发者模式查看：

Queueing: 请求被阻塞，放入等待队列中等待。

一般以下几个原因会被阻塞：

如果这个资源加载优先级比较低，比如图片(html/css/js的优先级比图片高)，那么图片请求就会被渲染引擎阻塞，等待优先级高的资源加载完成才从队列中取出，等待发送。

我们知道浏览器对同一域名下对TCP连接的并发数有限制(防止资源被消耗殆尽)，chrome这边是6，那么如果同一域名下请求多于6的话，后面的请求就会被阻塞。

等待释放TCP连接

Stalled: 等待发送所用的时间，原因同上。

DNS Lookup:DNS查询时间

Initail connection:建立TCP连接所用的时间

SSL:建立SSL连接所用的时间

Request sent:发出请求的时间，通常不到一毫秒

TTFB:第一字节时间，即请求发出到接受到服务器第一个字节的时间，如果这个时间太长，一般有两个原因：

网络太差

服务器响应太慢

一般建议不要这个阶段的时间不要超过200毫秒。

Content Download:资源下载时间，如果被阻塞，则这个时间会很长，或者资源过大也会导致下载时间过长。例如js执行时间过长，那么图片加载下来的时间就会被拉到很长。

2、Resource Timing API

那么我们怎么获取这个资源时间呢？直接使用JS代码调用这些公共接口即可：

var resources = window.performance.getEntriesByType('resource');

console.log(resources);

startTime

在资源提取开始的时间。该值等于fetchStart。

duration

资源完成下载的总时间，它是responseEnd和startTime属性之间的差异。

redirectStart

重定向的开始时间。

redirectEnd

紧接在收到最后一次重定向响应的最后一个字节后。

fetchStart

如果是应用缓存在实现请求，将采集 fetchStart 时间。

domainLookupStart

DNS请求开始时间

domainLookupEnd

DNS请求结束时间

connectStart

开始建立与服务器的连接时间(TCP握手时间)。

connectEnd

在浏览器完成与服务器的连接以检索资源之后(TCP握手结束时间)。

secureConnectionStart

在浏览器启动握手过程之前，以保护当前连接(如果正在使用 TLS 或 SSL 将在握手(确保连接安全)开始时开始)。

requestStart

浏览器开始从服务器请求资源之前(在对某个资源的请求被发送到服务器后立即采集。)。

responseStart

在浏览器收到服务器响应的第一个字节后(服务器初始响应请求的时间)。

responseEnd

在浏览器收到资源的最后一个字节之后或紧接在传输连接关闭之前，以先到者为准(请求结束并且数据完成检索的时间)。

transferSize

表示获取资源的大小(以八位字节为单位)的数字。 包括响应头字段和响应payload body的大小。

encodedBodySize

在删除任何应用的内容编码之前，从payload body的提取(HTTP或高速缓存)接收的大小(以八位字节为单位)的数字。

decodedBodySize

在删除任何应用的内容编码之后，从消息正文( message body )的提取(HTTP或缓存)接收的大小(以八位字节为单位)的数字。

serverTiming

包含服务器时序度量( timing metrics )的PerformanceServerTiming 条目数组。

那么，我们可以根据这些时间属性，对某些资源进行解析：

整个过程时间: responseEnd -startTime 或者 duration

查看DNS查询时间: domainLookupEnd-domainLookupStart

查看TCP三次握手时间(HTTP): connectEnd-connectStart

SSL握手时间(HTTPS协议会有SSL握手)：connectEnd-secureConnectionStart

TTFB(首包时间)：responseStart-startTime

响应时间(剩余包时间): responseEnd- responseStart

附上官方例子

各阶段资源时间

functioncalculate_load_times() {//Check performance support

if (performance ===undefined) {

console.log("= Calculate Load Times: performance NOT supported");return;

}//Get a list of "resource" performance entries

var resources = performance.getEntriesByType("resource");if (resources === undefined || resources.length <= 0) {

console.log("= Calculate Load Times: there are NO `resource` performance records");return;

}

console.log("= Calculate Load Times");for (var i=0; i < resources.length; i++) {

console.log("== Resource[" + i + "] - " +resources[i].name);//Redirect time

var t = resources[i].redirectEnd -resources[i].redirectStart;

console.log("... Redirect time = " +t);//DNS time

t = resources[i].domainLookupEnd -resources[i].domainLookupStart;

console.log("... DNS lookup time = " +t);//TCP handshake time

t = resources[i].connectEnd -resources[i].connectStart;

console.log("... TCP time = " +t);//Secure connection time

t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";

console.log("... Secure connection time = " +t);//Response time

t = resources[i].responseEnd -resources[i].responseStart;

console.log("... Response time = " +t);//Fetch until response end

t = (resources[i].fetchStart > 0) ? (resources[i].responseEnd - resources[i].fetchStart) : "0";

console.log("... Fetch until response end time = " +t);//Request start until reponse end

t = (resources[i].requestStart > 0) ? (resources[i].responseEnd - resources[i].requestStart) : "0";

console.log("... Request start until response end time = " +t);//Start until reponse end

t = (resources[i].startTime > 0) ? (resources[i].responseEnd - resources[i].startTime) : "0";

console.log("... Start until response end time = " +t);

}

}

资源大小

/*应用程序资源的大小可能会影响应用程序的性能，因此获取有关资源大小的准确数据非常重要(尤其是对于非托管资源)。该PerformanceResourceTiming接口具有三个属性，可用于获取有关资源的大小数据。该transferSize属性返回获取的资源的大小(以八位字节为单位)，包括响应头字段和响应有效载荷主体。该encodedBodySize属性返回从有效内容主体的提取(HTTP或缓存)接收的大小(以八位字节为单位)，然后再删除任何应用的内容编码。decodedBodySize从抓取(HTTP或高速缓存)的接收到的返回的大小(以字节)消息主体，之后除去任何施加的内容编码。*/

functiondisplay_size_data(){//Check for support of the PerformanceResourceTiming.*size properties and print their values

//if supported.

if (performance ===undefined) {

console.log("= Display Size Data: performance NOT supported");return;

}var list = performance.getEntriesByType("resource");if (list ===undefined) {

console.log("= Display Size Data: performance.getEntriesByType() is NOT supported");return;

}//For each "resource", display its *Size property values

console.log("= Display Size Data");for (var i=0; i < list.length; i++) {

console.log("== Resource[" + i + "] - " +list[i].name);if ("decodedBodySize" inlist[i])

console.log("... decodedBodySize[" + i + "] = " +list[i].decodedBodySize);elseconsole.log("... decodedBodySize[" + i + "] = NOT supported");if ("encodedBodySize" inlist[i])

console.log("... encodedBodySize[" + i + "] = " +list[i].encodedBodySize);elseconsole.log("... encodedBodySize[" + i + "] = NOT supported");if ("transferSize" inlist[i])

console.log("... transferSize[" + i + "] = " +list[i].transferSize);elseconsole.log("... transferSize[" + i + "] = NOT supported");

}

}

在W3C Web性能工作组给我们带来的 导航计时 在2012年，它是现在市面上几乎所有的主流浏览器。导航计时定义了一个JavaScript API，用于测量主页的性能。例如：//导航时间

var t =performance.timing，

pageloadtime= t.loadEventStart-t.navigationStart，

dns= t.domainLookupEnd-t.domainLookupStart，

tcp= t.connectEnd-t.connectStart，

ttfb= t.responseStart-t.navigationStart;

拥有主页的计时指标很棒，但是要诊断现实世界的性能问题，通常有必要深入研究各个资源。因此，我们拥有更新的 Resource Timing规范。该JavaScript API提供与导航计时类似的计时信息，但为每个单独的资源提供。一个例子是：//资源计时

var r0 = performance.getEntriesByType("resource")[0]

加载时间=r0.duration，

dns= r0.domainLookupEnd-r0.domainLookupStart，

tcp= r0.connectEnd-r0.connectStart，

ttfb= r0.responseStart-r0.startTime;