代码
// 性能警报时间，单位：毫秒，超过这个时间会打印警报，可自定义
const ALARM_TIME = 200;
// requestAnimationFrame的id
let monitorFrameTimeId = null;
/**
* 开始监控帧耗时
*/
function startMonitorFrameTime() {
stopMonitorFrameTime();
// 由于启动监控时当前帧可能已经过了一段时间了，所以等到下一帧开始再启动性能监控
// 如果优先启动监控，也可以去掉外面这一层requestAnimationFrame
monitorFrameTimeId = requestAnimationFrame(() => {
console.log("启动性能监控");
// performance.now()拿到的时间比Date精度更高
let lastTime = performance.now();
monitorFrameTimeId = requestAnimationFrame(callback);
function callback() {
const now = performance.now();
const delta = now - lastTime;
lastTime = now;
if (delta >= ALARM_TIME) {
console.warn(`性能警报，当前帧耗时：${delta.toFixed(2)}ms`);
}
monitorFrameTimeId = requestAnimationFrame(callback);
}
});
}
/**
* 停止监控当前帧耗时
*/
function stopMonitorFrameTime() {
if (monitorFrameTimeId != null) {
console.log("停止性能监控");
cancelAnimationFrame(monitorFrameTimeId);
monitorFrameTimeId = null;
}
}
// 监听切换到后台
// 由于切换到后台会暂停网页绘制，导致两次requestAnimationFrame回调的时间被拉长，所以切后台的时候停止箭头
document.addEventListener("visibilitychange", function () {
// 判断当前页面是否隐藏
// this指向了document，this.hidden等价于document.hidden，如果用了箭头函数这里就不能用this了
if (this.hidden) {
console.log("切换到后台");
stopMonitorFrameTime();
} else {
console.log("切换到前台");
startMonitorFrameTime();
}
});
startMonitorFrameTime();
预览
性能警报
前后台切换
日志样式也可以根据自己的喜好修改一下：
const titleStyle = [
`background: #d35400`,
"padding: 0.2em 0.2em 0.2em 0.2em",
`color: #ffffff`,
"font-size: 1em",
"border-radius: 0.2em 0 0 0.2em",
"font-family: SimHei",
].join("; ");
const contentStyle = [
`background: #e67e22`,
"padding: 0.2em 0.2em 0.2em 0.2em",
`color: #ffffff`,
"font-size: 1em",
"border-radius: 0 0.2em 0.2em 0",
"font-family: SimHei",
].join("; ");
console.log("%c%s%c%s", titleStyle, "性能管理器", contentStyle, `性能警报，当前帧耗时：${delta.toFixed(2)}ms`);
性能警报
前后台切换
