performance-monitors

前端性能监控

简介：前端性能监控，实时上报用户浏览站点性能数据；监控的数据有 准备新页面时间耗时、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或者思考分析，然后提问时给出详细的错误相关信息以及个人对问题的理解。

License

MIT Copyright (c) 2019 sky9102