前端性能监控

W3C性能小组引入的新的API window.performance，目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对象。放置在global环境下，通过JavaScript可以访问到它。

使用性能API

探测和兼容performance：

var performance = window.performance || window.msPerformance || window.webkitPerformance;
if(performance){
  // 支持性能 API
}

performance api结构

performance.memory 显示内存的占用情况，是一个动态值：
- usedJSHeapSize：表示：JS 对象（包括V8引擎内部对象）占用的内存数
- totalJSHeapSize：可使用的内存
- jsHeapSizeLimit：内存大小限制
performance.navigation 显示页面的来源信息
- redirectCount：重定向的话，页面通过几次重定向跳转而来，默认为0；
- type：表示页面打开的方式
  - 0 表示 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）
  - 1 表示 TYPE_RELOAD 通过 window.location.reload() 刷新的页面
  - 2 表示 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）
  - 255 表示 TYPE_UNDEFINED 非以上方式进入的页面
performance.onresourcetimingbufferfull属性是一个在resourcetimingbufferfull事件触发时会被调用的 event handler 。它的值是一个手动设置的回调函数，这个回调函数会在浏览器的资源时间性能缓冲区满时执行。
performance.timeOrigin 是一系列时间点的基准点，可以精确到万分之一毫秒

performance.timing:是一系列关键时间点，它包含了网络、解析等一系列的时间数据

// timing 下属性详情
timing:{
  // 同一个浏览器上一个页面卸载(unload)结束时的时间戳。如果没有上一个页面，这个值会和fetchStart相同。
  navigationStart: 1543806782096,
  // 上一个页面unload事件抛出时的时间戳。如果没有上一个页面，这个值会返回0。
  uploadEventStart: 1543806782523,
  // 第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0。
  redirectStart: 0,
  redirectEnd: 0,
  // 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
  fetchStart: 1543806782096,
  // DNS 域名查询开始的UNIX时间戳。
  // 如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和fetchStart一致。
  domainLookupStart: 1543806782096,
  // DNS 域名查询完成的时间,如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
  domainLookUpEnd: 1543806782096,
  //  HTTP（TCP） 返回浏览器与服务器之间的连接建立时的时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 fetchStart一致。
  connectStart: 1543806782099,
  // HTTP（TCP） 域名查询结束的时间戳。
  connectEnd: 1543806782227,
  // HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0。
  secureConnectionStart: 1543806782162,
  // 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳。
  requestStart: 1543806782241,
  // 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。
  responseStart: 1543806782516,
  // 返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时
  responseEnd: 1543806782537,
  // 当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的时间戳。
  domLoading: 1543806782573,
  // 当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的时间戳。
  domInteractive: 1543806783203,
  // 当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的时间戳。
  domContentLoadedEventStart: 1543806783203,
  // 当所有需要立即执行的脚本已经被执行（不论执行顺序）时的时间戳。
  domContentLoadedEventEnd: 1543806783216,
  // 当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的时间戳
  domComplete: 1543806783796,
  // load事件被发送时的时间戳。如果这个事件还未被发送，它的值将会是0。
  loadEventStart: 1543806783796,
  // 当load事件结束，即加载事件完成时的时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0.
  loadEventEnd: 1543806783802
}

可以帮助我们获取页面的Domready时间、onload时间、白屏时间等，以及单个页面资源在从发送请求到获取到rsponse各阶段的性能参数。

对我们比较有用的页面性能数据大概包括如下几个，这些参数是通过上面的performance.timing各个属性的差值组成的，它是精确到毫秒的一个值，计算方法如下：

重定向耗时：redirectEnd - redirectStart
DNS查询耗时：domainLookupEnd - domainLookupStart
TCP链接耗时：connectEnd - connectStart
HTTP请求耗时：responseEnd - responseStart
解析dom树耗时： domComplete - domInteractive
白屏时间：responseStart - navigationStart
DOMready时间：domContentLoadedEventEnd - navigationStart
onload时间：loadEventEnd - navigationStart，也即是onload回调函数执行的时间。

优化

重定向优化：重定向的类型分三种，301（永久重定向），302（临时重定向），304（Not Modified）。304是用来优化缓存，非常有用，而前两种应该尽可能的避免。

DNS优化: 一个是减少DNS的请求次数，另一个就是进行DNS预获取（Prefetching ） ;下面是DNS Prefetch的方法：

<html>
<head>
  <title>腾讯网</title>
  <link rel="dns-prefetch" href="//mat1.gtimg.com"  />
  <link rel="dns-prefetch" href="//inews.gtimg.com"  />
  <link rel="dns-prefetch" href="//wx.qlogo.cn"  />
  <link rel="dns-prefetch" href="//coral.qq.com" />
  <link rel="dns-prefetch" href="//pingjs.qq.com"  />

TCP请求优化:TCP的优化大都在服务器端，前端能做的就是尽量减少TCP的请求数，也就是减少HTTP的请求数量。减少TCP请求的方式有两种，一种是资源合并，对于页面内的图片、css和js进行合并，减少请求量。另一种使用长链接，使用http1.1，在HTTP的响应头会加上 Connection:keep-alive。
使用Websocket进行通信，全程只需要建立一次TCP链接。
HTTP请求优化:使用内容分发网络（CDN）和减少请求。也可以使用本地缓存策略，尽量减少对服务器数据的重复获取。
渲染优化:在浏览器端的渲染过程，如大型框架，vue和react，它的模板其实都是在浏览器端进行渲染的，不是直出的html。这会导致白屏时间增加，在必要的情况下可以在服务端进行整个html的渲染，从而将整个html直出到我们的浏览器端，而非在浏览器端进行渲染。
script 外链加入到页面底部，也可以使用 defer 或 async 延迟执行。defer 和 async 的区别就是 defer 是有序的，代码的执行按在html中的先后顺序，而 async 是无序的，只要下载完毕就会立即执行。或者使用异步的编程方法，比如settimeout，也可以使用多线webworker，它们不会阻碍 DOM 的渲染。
1
2
<script async type="text/javascript" src="app1.js"></script>
<script defer type="text/javascript" src="app2.js"></script>

方法集合

performance.now()
返回一个当前页面执行的时间的时间戳，用来精确计算程序执行时间,比Date.now()精准；performance.now() 的时间是以恒定速率递增的，不受系统时间的影响（系统时间可被人为或软件调整）。performance.timing.navigationStart + performance.now() 约等于 Date.now()。
1
2
3
4
5
//某一段代码执行了多少时间。
let t0 = window.performance.now();
doSomething();
let t1 = window.performance.now();
console.log("doSomething函数执行了" + (t1 - t0) + "毫秒.")

performance.mark()

mark方法用来自定义添加标记时间。使用方法如下

var nameStart = 'markStart';
var nameEnd   = 'markEnd';
// 函数执行前做个标记
window.performance.mark(nameStart);
for (var i = 0; i < n; i++) {
    doSomething
}
// 函数执行后再做个标记
window.performance.mark(nameEnd);
// 然后测量这个两个标记间的时间距离，并保存起来
var name = 'myMeasure';
window.performance.measure(name, nameStart, nameEnd);
//保存后的值可以通过 performance.getEntriesByname( 'myMeasure' )或者 performance.getEntriesByType（'measure'）查询。

Performance.clearMeasures():从浏览器的性能输入缓冲区中移除自定义添加的 measure
Performance.getEntriesByName():返回一个 PerformanceEntry 对象的列表，基于给定的 name 和 entry type
Performance.getEntriesByType():返回一个 PerformanceEntry 对象的列表，基于给定的 entry type
Performance.measure():在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定名称的时间戳
Performance.toJSON():是一个 JSON 格式转化器，返回 Performance 对象的 JSON 对象