前端性能监控图表库前端性能监控开源

转载

mob6454cc7042a2 2024-02-21 16:51:23

文章标签 前端性能监控图表库前端 performance 监控程序 centos 文章分类 运维

1 系统概述

前端性能监控系统（web-performance-monitoring-system，后文简称WPMS）Fork代码的地址：https://github.com/wangweianger/web-performance-monitoring-system，是一款优秀的前端性能监控工具，主要功能包括：

实时统计访问页面真实性能分析
实时统计页面AJAX性能分析
实时统计访问页面脚本错误分析
实时统计页面所有资源加载性能分析
实时统计慢加载资源追踪
设置各项阀值，邮件通知，紧急修改维护
模拟单个http请求，并给出性能指标，可做接口测试
检查线上网页性能，给出详细性能指标

2 主要性能指标

WPMS主要展示了12个性能指标。具体参数如表2.1。

表2.1 WPMS主要性能指标

指标名称	计算方法
平均加载耗时 (s)	loadEventEnd - navigationStart
平均白屏耗时(ms)	responseStart - navigationStart
平均资源加载耗时 (s)	一个页面内所有资源加载的平均时间
平均DOM构建耗时 (s)	domContentLoadedEventEnd - navigationStart
平均解析DOM耗时（s）	domComplete - domInteractive
平均DNS解析耗时（ms）	domainLookupEnd - domainLookupStart
平均TCP连接耗时（ms）	connectEnd - connectStart
平均页面重定向耗时（ms）	redirectEnd - redirectStart
平均unload耗时（ms）	unloadEventEnd - unloadEventStart
平均request请求耗时（ms）	responseEnd - requestStart
平均页面准备耗时（ms）	fetchStart - navigationStart

3 技术栈

项目主要由Koa2 + Gulp + Mysql 搭建的一套后台前端集成模板，通过Gulp-nodemon实时编译刷新node服务，项目通过babel编译。主要依赖组件版本如下：

表3.1 主要依赖组件版本

主要依赖组件名称	版本
Koa	2.2.0
Gulp	3.9.1
Node	8.11.2
Babel	6.24.1
Mysql	5.7.34

项目中还依赖了第三方的ip地址查询服务，由于接口已经废弃，这里直接注释掉相应的代码，暂时不用通过ip查位置服务。

//function getUserIpMsg(){
//    return new Promise(function(resolve, reject) {
//        let ip = ctx.get("X-Real-IP") || ctx.get("X-Forwarded-For") || ctx.ip;
//        userSystemInfo.ip = ip;
//        axios.get(`http://ip.taobao.com/service/getIpInfo.php?ip=${ip}`).then(function (response) {
//            resolve(response.data)
//        }).catch(function (error) {
//            console.log(error)
//            resolve(null)
//        });
//    })
//}
//let datas = await getUserIpMsg();
//if(datas.code == 0) userSystemInfo = datas.data;
//IP = userSystemInfo.ip

4 安装环境

4.1 安装Node

本项目需要node.js支持async await的语法因此node需要7.6版本以上，本文采用8.11.2。

下载官网Node到/opt/目录下（其他目录也可以）

cd /opt/
wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64.tar.xz

解压

tar -xvf node-v8.11.2-linux-x64.tar.xz

解压完成后，更改名字为node

mv node-v8.11.2-linux-x64 node

配置全局使用

ln -s /opt/node/bin/node /usr/local/bin/node
ln -s /opt/node/bin/npm /usr/local/bin/npm

验证安装

node -v

前端性能监控图表库前端性能监控开源_performance

图4.1 node安装成功后版本信息

npm -v

前端性能监控图表库前端性能监控开源_performance_02

图4.2 npm安装成功后版本信息

4.2 安装Mysql

下载并安装MySQL官方的 Yum Repository

wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

yum安装

yum -y install mysql57-community-release-el7-10.noarch.rpm

安装MySQL服务器

yum -y install mysql-community-server

启动MySql

systemctl start mysqld.service

查看MySQL运行状态，如果为active状态，则安装成功，否则根据报错查找原因。

systemctl status mysqld.service

前端性能监控图表库前端性能监控开源_前端性能监控图表库_03

图4.3 MySQL运行状态

修改默认字符集和默认排序规则

vim /etc/my.cnf

修改以下内容

[mysqld]    
character-set-server = utf8mb4   #默认字符集
collation-server = utf8mb4_bin   #默认排序规则

重启Mysql

systemctl restart mysqld.service

查看root用户的密码安装后没有设置root密码，可以通过如下命令查看临时密码。

grep "password" /var/log/mysqld.log

前端性能监控图表库前端性能监控开源_前端_04

图4.4 root的临时密码

以root用户登录数据库

mysql -uroot -p

修改root密码

alter user 'root'@'localhost' identified by 'Pwd125=!';

验证修改

mysql> show variables like 'character%';

前端性能监控图表库前端性能监控开源_监控程序_05

图4.5 默认字符集

mysql> show variables like 'character%';

前端性能监控图表库前端性能监控开源_performance_06

图4.6 默认排序规则

5 导入样例数据到Mysql

选择数据库

mysql> show databases;

前端性能监控图表库前端性能监控开源_前端性能监控图表库_07

图5.1 数据库列表

mysql> use mysql;

查询语句查询到的所有mysql的user和host信息

mysql> select user,authentication_string,host from user;

前端性能监控图表库前端性能监控开源_前端性能监控图表库_08

图5.2 mysql的user和host信息

导入样例数据

mysql> source /home/devs/Repository/web-performance-monitoring-system/web-performance.sql

前端性能监控图表库前端性能监控开源_performance_09

图5.3 导入成功

6 后端配置

修改项目的配置文件，即：src/config.js 中的 DB 配置

export let DB = {
	// 服务器地址
	HOST: 'localhost',

	// 数据库端口号     
	PROT: 3306,

	// 数据库用户名              
	USER: 'root',

	// 数据库密码    
	PASSWORD: 'Pwd125=!',

	// 数据库名称    
	DATABASE: 'mysql',

	// 默认"api_"
	PREFIX: 'web_',

	// 是否等待链接
	WAITFORCONNECTIONS: true,

	// 连接池数量
	POOLLIMIT: 20,

	// 排队限制数量
	QUEUELIMIT: 5,
}