前端性能监控系统-优快云博客

本文链接：https://blog.youkuaiyun.com/huiskai/article/details/118517212

本文档详述了一款开源前端性能监控系统的搭建过程及主要性能指标，包括实时统计页面性能、AJAX、脚本错误、资源加载等。系统基于Koa2+Gulp+Mysql，涉及Node.js、MySQL的安装配置，以及样例数据导入。此外，还介绍了如何运行项目并登录系统进行性能分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端性能监控系统是一个开源的前端性能监控工具，它的主要功能就是监控前端页面的Ajax性能、资源加载性能、脚本错误等性能指标，该工具具有非常全面的前端性能指标采集和展示功能，是前端性能分析不可多得的工具。
本文是《前端性能监测工具》的后续文章，如需要了解什么是前端性能监测工具可移步该文章，本文主要介绍了前端性能监控系统的主要监控指标、系统搭建过程。

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

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

npm -v

图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

图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

图4.4 root的临时密码

以root用户登录数据库

mysql -uroot -p

修改root密码

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

验证修改

mysql> show variables like 'character%';

图4.5 默认字符集

mysql> show variables like 'character%';

图4.6 默认排序规则

5 导入样例数据到Mysql

选择数据库

mysql> show databases;

图5.1 数据库列表

mysql> use mysql;

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

mysql> select user,authentication_string,host from user;

图5.2 mysql的user和host信息

导入样例数据

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

图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,
}