深入理解前端性能监控

在同样的网络环境下，有两个同样能满足你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，如果让你选择，你会用哪一个？

页面的性能问题是前端开发中一个重要环节，但一直以来我们没有比较好的手段，来检测页面的性能。直到W3C性能小组引入的新的API window.performance，目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对象。放置在global环境下，通过JavaScript可以访问到它。

使用性能API

你可以通过以下方法来探测和兼容performance：

var performance = window.performance ||   
    window.msPerformance ||   
    window.webkitPerformance;  
if (performance) {  
    // 你的代码  
} 

先来了解一下performance的结构：

performance.memory是显示此刻内存占用情况，它是一个动态值，其中：

usedJSHeapSize表示：JS 对象（包括V8引擎内部对象）占用的内存数

totalJSHeapSize表示：可使用的内存

jsHeapSizeLimit表示：内存大小限制

通常，usedJSHeapSize不能大于totalJSHeapSize，如果大于，有可能出现了内存泄漏。

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: {  
        // 同一个浏览器上一个页面卸载(unload)结束时的时间戳。如果没有上一个页面，这个值会和fetchStart相同。  
    navigationStart: 1543806782096,  
    // 上一个页面unload事件抛出时的时间戳。如果没有上一个页面，这个值会返回0。  
    unloadEventStart: 1543806782523,  
    // 和 unloadEventStart 相对应，unload事件处理完成时的时间戳。如果没有上一个页面,这个值会返回0。  
    unloadEventEnd: 1543806782523,  
    // 第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0。  
    redirectStart: 0,  
    // 最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的时间戳。  
    // 如果没有重定向，或者重定向中的一个不同源，这个值会返回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） 返回浏览器与服务器之间的连接建立时的时间戳。  
        // 如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。  
    connectEnd: 1543806782227,  
    // HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0。  
    secureConnectionStart: 1543806782162,  
    // 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳。  
    requestStart: 1543806782241,  
    // 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。  
        //如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。  
    responseStart: 1543806782516,  
    // 返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时  
        //（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳。  
    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各阶段的性能参数。

（编辑：甘孜站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!