概述

近来在做一个上报相干的需求，该需求指定上班的内容中包括页面纪录的事宜、要求消费的事宜、以及DOM衬着所要完成的时刻等。
为此查阅了大批的文档，收集了许多材料，所以一气呵成，把本身所相识的记录下来，轻易今后查询。

performance对象引见

浏览器暴露给js的一个接口，能够经由历程这个接口检察用户接见网站的衔接竖立时刻、dns时刻等信息。运用该api时需要在页面完整加载完成以后才运用，最简朴的要领是在window.onload事宜中读取种种数据，由于许多值必需在页面完整加载以后才得出。

浏览器支撑状况

IE9和chrome6以上的版本都支撑：

pc端

1. window.performance : ie9
2. window.webkitPerformance : chrome6-9
3. window.performance : chrome10+

挪动端

1. android4.0

performance是ECMAScript5中新增的一个特征，关于该特征，所支撑的浏览器并不多。

属性和要领

属性

• performance.timing ：performance对象的timing属性指向一个对象，它包括了种种与浏览器机能有关的时刻数据，供应浏览器处置惩罚网页各个阶段的耗时，这也是本文引见的重点。
• performance.navigation ：网页导航的相干对象。
• performance.memory ：浏览器内存状况相干对象。

要领

• performance.getEntries ：浏览器猎取网页时，会对网页中每个对象（剧本文件、样式表、图片文件等等）发出一个HTTP要求。
• performance.mark：mark要领用于为响应的视点做标记。
• performance.now：performance.now要领返回当前网页自从performance.timing.navigationStart到当前时刻之间的微秒数（毫秒的千分之一）

上报相干内容

上报相干的内容，大部分在performance.timing内里，performance.timing中包括的属性有：

• navigationStart：预备加载新页面的肇端时刻
• redirectStart：假如发作了HTTP重定向，而且从导航最先，中心的每次重定向，都和当前文档同域的话，就返回最先重定向的timing.fetchStart的值。其他状况，则返回0
• redirectEnd：假如发作了HTTP重定向，而且从导航最先，中心的每次重定向，都和当前文档同域的话，就返回末了一次重定向，吸收到末了一个字节数据后的谁人时刻.其他状况则返回0
• fetchStart：假如一个新的资本猎取被提议，则 fetchStart必需返回用户代办最先搜检其相干缓存的谁人时刻，其他状况则返回最先猎取该资本的时刻
• domainLookupStart：返回用户代办对当前文档所属域举行DNS查询最先的时刻。假如此要求没有DNS查询历程，如长衔接，资本cache,以至是当地资本等。 那末就返回 fetchStart的值
• domainLookupEnd：返回用户代办对完毕对当前文档所属域举行DNS查询的时刻。假如此要求没有DNS查询历程，如长衔接，资本cache，以至是当地资本等。那末就返回 fetchStart的值
• connectStart：返回用户代办向服务器服务器要求文档，最先竖立衔接的谁人时刻，假如此衔接是一个长衔接，又或许直接从缓存中猎取资本（即没有与服务器竖立衔接）。则返回domainLookupEnd的值
  -(secureConnectionStart)：可选特征。用户代办假如没有对应的东东，就要把这个设置为undefined。假如有这个东东，而且是HTTPS协定，那末就要返回最先SSL握手的谁人时刻。 假如不是HTTPS， 那末就返回0
• connectEnd：返回用户代办向服务器服务器要求文档，竖立衔接胜利后的谁人时刻，假如此衔接是一个长衔接，又或许直接从缓存中猎取资本（即没有与服务器竖立衔接）。则返回domainLookupEnd的值
• requestStart：返回从服务器、缓存、当地资本等，最先要求文档的时刻
• responseStart：返回用户代办从服务器、缓存、当地资本中，吸收到第一个字节数据的时刻
• responseEnd：返回用户代办吸收到末了一个字符的时刻，和当前衔接被封闭的时刻中，更早的谁人。一样，文档能够来自服务器、缓存、或当地资本
• domLoading：返回用户代办把其文档的 “current document readiness” 设置为 “loading”的时刻
• domInteractive：返回用户代办把其文档的 “current document readiness” 设置为 “interactive”的时刻.
• domContentLoadedEventStart：返回文档发作 DOMContentLoaded事宜的时刻
• domContentLoadedEventEnd：文档的DOMContentLoaded 事宜的完毕时刻
• domComplete：返回用户代办把其文档的 “current document readiness” 设置为 “complete”的时刻
• loadEventStart：文档触发load事宜的时刻。假如load事宜没有触发，那末该接口就返回0
• loadEventEnd：文档触发load事宜完毕后的时刻。假如load事宜没有触发，那末该接口就返回0

上报的内容

上报的内容是经由历程上面的performance.timing各个属性的差值构成的，经常使用的有：

• DNS查询耗时 ：domainLookupEnd – domainLookupStart
• TCP链接耗时 ：connectEnd – connectStart
• request要求耗时 ：responseEnd – responseStart
• 剖析dom树耗时 ： domComplete – domInteractive
• 白屏时刻 ：responseStart – navigationStart
• domready时刻 ：domContentLoadedEventEnd – navigationStart
• onload时刻 ：loadEventEnd – navigationStart

协助文档

performance对象：高精度时刻戳

window.performance 详解

运用简约的 Navigation Timing API 测试网页加载速率（不完整译文）

Chrome Developer Tools之收集监控与调优

关键字搜刮：performance.timing 、performance 上报