前端性能监控
简介：前端性能监控，实时上报用户浏览站点性能数据；监控的数据有 准备新页面时间耗时、DNS查询耗时、TCP链接耗时、Request请求耗时、解析dom树耗时、页面白屏时间、domready时间、onload执行完成时间时间；可以持续监控、评估、上报数据，及时发现瓶颈，从而优化。
- 目的：解决前端性能监控、评估、预警页面性能的状况、发现瓶颈、从而指导优化工作。
- 功能：记录前端性能信息。
- 范围：任何前端应用
- 使用：两行代码搞定，使用的复杂度几乎降低到了零
为什么要做监控页面性能？
-
1、一个页面性能差的话会影响到很多方面。在公司层面，页面性能会影响公司收益，如用户打开页面等待的太久，用户可能会直接关掉页面，或者下次不再打开了，特别是在移动端用户对页面响应延迟容忍度很低。
-
2、除此之外，页面的加载速度还将直接影响页面的SEO，网页加载速度太慢，用户会直接关掉，这直接增加页面的跳出率，当搜索引擎发现页面跳出率高，搜索引擎会认为该网站对用户的价值不高，从而降低排名。2018年7月谷歌公司新规定，页面访问时间比较长，谷歌公司将会降低该页面的搜索排名。
-
3、虽然性能很重要，但在开发迭代中，开发会有所忽略，性能会随着版本迭代而有所衰减，所以我们需要一个性能监控系统，持续监控，评估，预警页面性能的状况，发现瓶颈，从而指导优化工作。
-
4、页面性能的评估与监控有很多成熟优秀的工具 ，比如gtmetrix 网站，他可以同时查多个分析工具的的结果，会提供许多的建议。
-
5、 但这种方式与真实情况偏离，无法反馈某个地区的整体速度，慢速用户多少，无法反映性能的波动情况，另外除了白屏之类的，我们还有一些功能性的测速，比如页面可点击时间，广告展示的时间等等，这些都是无法模拟监控的。
-
6、为了持续监控不同网络环境下用户访问情况与页面各功能可用情况，我们选择在页面上植入JS来监控线上真实用户数据。具体做法就是用一段代码将用户的数据上报到我们的服务器，通过一个系统将数据汇总，处理，最后图形化数据，方便我们查看各个页面等性能。
特点
- 可拔插
- 代码侵入量小
- 使用灵活方便
使用
npm i performance-monitors -S
Vue 项目：
import PerformanceMonitor from 'performance-monitors';
Vue.use(PerformanceMonitor, {
reportUrl: "http://localhost:10300/performanceMonitor",
appId: "performanceMonitor-1559318109525",
appName: "performanceMonitor",
env: "dev"
});
H5或其他前端 项目：
import PerformanceMonitor from 'performance-monitors/performanceMonitor';
new PerformanceMonitor({
reportUrl: "http://localhost:10300/performanceMonitor",
appId: "performanceMonitor-1559318109525",
appName: "performanceMonitor",
env: "dev"
});
配置参数 options
| 属性 | 说明 | 类型 | 默认值 | 是否可以为空 |
|---|---|---|---|---|
| reportUrl | 性能上报地址 | String | http://localhost:10300/performanceMonitor | N |
| env | 环境：dev、test、uat、pro | String | dev | Y |
| appId | 项目ID | String | Y | |
| appName | 项目名称 | String | Y | |
| timeSpan | 发送数据时的时间戳 | Number | 每次取当前的时间戳 | Y |
| userAgent | userAgent | String | userAgent | Y |
| isSendBeacon | 是否使用高级浏览器支持的 navigator.sendBeacon方法，这个方法可以用来发送一些小量数据，该方法是异步的，且在浏览器关闭请求也照样能发送请求，特别适合上报统计的场景。不支持时使用img的方式上报 | Boolean | false | N |
上报数据
| 属性 | 说明 |
|---|---|
| reportUrl | 上报URL |
| appId | appId |
| env | 环境：dev、test、uat、pro |
| infoType | preformance |
| timeSpan | 当前时间戳 |
| userAgent | userAgent |
| isSendBeacon | 是否使用高级浏览器支持的 navigator.sendBeacon方法 |
| prepareNewPageTime | 准备新页面时间耗时（毫秒） |
| queryDNSTime | DNS查询耗时（毫秒） |
| connectionTCPTime | TCP链接耗时（毫秒） |
| requestTime | request请求耗时（毫秒） |
| analysisDOMTime | 解析dom树耗时（毫秒） |
| whiteScreenTime | 白屏时间（毫秒） |
| domReadyTime | domready时间（毫秒） |
| onloadSuccessTime | onload执行完成时间（毫秒） |
| currenPagetUrl | 当前页面地址 |
问题
- 开发者有问题或者好的建议可以用Issues反馈交流，请给出详细信息。
- 如果有问题需要提问，请在提问前先完成以下过程：
- 请仔细阅读本项目文档，查看能否解决；
- 请提问前尽可能做一些DEBUG或者思考分析，然后提问时给出详细的错误相关信息以及个人对问题的理解。