页面监控指标

标签：

h5提供内置的performance对象，对页面的加载时间，内存消耗和浏览器状态。

1.内存消耗

memory : {

　　usedJSHeapSize :    16100000 , // JS 对象（包括V8引擎内部对象）占用的内存，一定小于 totalJSHeapSize

　　totalJSHeapSize : 35100000 , // 可使用的内存

　　jsHeapSizeLimit : 793000000 // 内存大小限制

}

2.页面的来源信息

navigation : {

redirectCount : 0 , // 如果有重定向的话，页面通过几次重定向跳转而来

type : 0            // 0   即 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）

                    // 1   即 TYPE_RELOAD  通过 window.location.reload() 刷新的页面

                    // 2   即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）

                    // 255 即 TYPE_UNDEFINED    非以上方式进入的页面

} ,

3.各个时间段的时间。

   3.1第一阶段。去获取最终页面之前的浏览器消耗的时间

   // 在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等

     navigationStart : 1441112691935 ,

  // 前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0

    unloadEventStart : 0 ,

   // 和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳

   unloadEventEnd : 0 ,

  3.2第二阶段。 重定向消耗的时间

   // 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0

    redirectStart : 0 ,

  // 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0

    redirectEnd : 0 ,

  3.3 第三阶段。去DNS消耗的时间

   // 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前

   fetchStart : 1441112692155 ,

   // DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等

   domainLookupStart : 1441112692155 ,

   // DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等

   domainLookupEnd : 1441112692155 ,

  3.4 第四阶段。建立TCP连接消耗的时间

　　// HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等

　　// 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间

　　connectStart : 1441112692155 ,

　　// HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等

　　// 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间

　　// 注意这里握手结束，包括安全连接建立完成、SOCKS 授权通过

　　connectEnd : 1441112692155 ,

　　// HTTPS 连接开始的时间，如果不是安全连接，则值为 0

　　secureConnectionStart : 0 ,

  3.5 数据发送和接收过程

    // HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存

    // 连接错误重连时，这里显示的也是新建立连接的时间

    requestStart : 1441112692158 ,

   // HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存

   responseStart : 1441112692686 ,

   // HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存

   responseEnd : 1441112692687 ,

 3.6 解析dom树的过程

　　// 开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件

　　domLoading : 1441112692690 ,

　　// 完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件

　　// 注意只是 DOM 树解析完成，这时候并没有开始加载网页内的资源

　　domInteractive : 1441112693093 ,

    dom树解析完成触发DOMContentLoaded事件。

3.7 加载资源的过程

　　// DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件

　　domComplete : 1441112693214 ,

　　// load 事件发送给文档，也即 load 回调函数开始执行的时间

　　// 注意如果没有绑定 load 事件，值为 0

　　loadEventStart : 1441112693214 ,

　　// load 事件的回调函数执行完毕的时间

　　loadEventEnd : 1441112693215

4.通过performance.now()来计算程序执行的时间。

  performance.now()返回了以微秒（百万分之一秒）为单位的时间，它比Date()更加精确，同时执行不受到环境的影响。

function getFunctionTimeWithPerformance ( func ) {   

    var timeStart = window . performance . now ( ) ;

    // 执行开始

    func ( ) ;

    // 执行结束

    var timeEnd = window . performance . now ( ) ;

    // 返回执行时间

    return ( timeEnd - timeStart ) ;

}

页面监控指标

标签：

原文地址：http://www.cnblogs.com/liuyinlei/p/5369929.html