深入领略前端机能监控

在同样的收集情形下，有两个同样能满意你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，假如让你选择，你会用哪一个？

页面的机能题目是前端开拓中一个重要环节，但一向以来我们没有较量好的本领，来检测页面的机能。直到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各阶段的机能参数。

（编辑：河北网）

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