gpacquisitor.js

这是一个监测前端性能的插件，可以通过回调函数定制获取数据后的操作。

由于依赖于浏览器原生方法window.performance，目前的兼容性可从这里查看：https://caniuse.com/#feat=nav-timing

安装依赖

npm install gpacquisitor.js --save

引入项目中

const acquisitor = require('gpacquisitor.js');

acquisitor.report(url, rate);

提供数据

目前可以捕捉并返回对应的数据：

• base（Onject）：

| 属性 | 描述 |重要|原因| |:--------------:|:-------------:|:-------------:|:-------------:| | url | 页面地址 |√|基础信息| | ua | 设备号 |√|基础信息| | loadPage| DNS解析时间 |√|几乎代表了用户等待页面可用的时间| | domReady| 解析 DOM 树结构的时间 |√|DOM 树嵌套太多？| | redirect| 重定向的时间 |√|拒绝重定向，尽量保持为0| | lookupDomain| DNS 查询时间 |√|DNS 预加载？使用了太多不同的域名导致域名查询的时间太长？| | ttfb | 读取页面第一个字节的时间|√|加异地机房？加CDN 处理？加带宽？加 CPU 运算速度？| | request | 内容加载完成的时间|√|gzip 压缩？静态资源压缩？| | loadEvent| 执行 onload 回调函数的时间 |√|减少onload 回调函数里执行不必要操作？延迟加载、按需加载的策略？| | appcache| 脚本加载时间 |可选|| | unloadEvent| onload事件时间 |可选|| | connect| 页面加载时间 |可选||

• entries（Array）：item：

| 属性 | 描述 | |:--------------:|:-------------:| |name|资源名称，也是资源的绝对路径| |type|资源类型| |initiatorType|谁发起的请求（link：link 标签，script：script 标签，redirect：重定向）| |duration|加载时间| |timing|具体计算时间（Array）|

• entries（Array）：item.timing：

| 属性 | 描述 | |:--------------:|:-------------:| |redirect|重定向的时间| |lookupDomain|DNS 查询时间| |request|内容加载完成的时间| |connect|TCP 建立连接完成握手的时间|