页面性能监控sdk

浏览器兼容性

请参考：http://caniuse.com/#feat=nav-timing

优势

• 浏览器原生支持，准确性高
• 能够获取到更多的数据，例如DNS解析时间、重定向时间、白屏时间、首屏时间等
• 支持页面首次渲染时间的采集
• 可定制化程度高
• 支持在网页加载完成后进行数据采集和发送，减少页面的性能损耗

使用示例（支持 commonjs 、umd、ES模块引入）

Using npm:

$ npm install zyl-performance-sdk --save

main.js入口文件引入:

import Performance from 'zyl-performance-sdk'

if (process.env.NODE_ENV === 'production') { // development环境下不建议频繁上报
    new Performance({
      url: 'https://xxx.com/log/', // 上报服务端url
      params: { // params中可以通过post方式传入服务端的额外参数，
        log_level: 'INFO', // 级别
        timestamp: Date.now(), // 上报时间
        application: 'xxx', // 项目名
        platform: 'web', // 平台
        env:  'dev', // 环境
        content: 'content' // 上报页面性能指标字段，可以指定任意字符串类型，默认content字段
      },
    }).start()
}

采集的数据说明

默认情况下脚本将会采集以下数据（详细计算公式可参看采集脚本）：

|参数 |类型 |描述 | |:-------------:|:-------------:|:-----:| |t_dns|number|DNS解析时间| |t_tcp|number|服务器连接时间| |t_request|number|服务器响应时间| |t_response|number|网页文档下载时间| |t_firstPaint|number|首屏渲染时间| |t_domready|number|DOM Ready时间（总和）| |t_onload|number|onload时间（总和）| |t_white|number|白屏时间| |t_all|number|全部过程时间| |userAgent|string|浏览器用户代理信息| |appName|string|浏览器名称| |appVersion|string|浏览器版本号| |platform|string|浏览器操作系统或者硬件平台| |href|string|当前页面url| |hostname|string|当前页面域名| |pathname|string|当前页面路劲| |search|string|当前页面携带参数|