在前端的业务场景中,很多情况都需要根据用户的电脑使用情况,使用不同的策略,比如电脑卡顿的时候,需要做一些降级的处理。但是浏览器又不支持获取电脑的cpu使用率。很多场景下都会比较难处理(之前在网上有看到过使用计时器统计时差,比如100ms的计时器,偏差越大表示cpu的利用率越高,但是个人测试下来不是特别好用)。Chrome在125版本中推出了新的API,支持获取当前电脑的cpu使用情况。可以根据不同的状态针对业务做一些降级,用于改善用户体验。
效果
此处使用了一个工具,可以看到当cpu利用率处于不同阶段的时候,前端页面会收到不同的状态回调。
API
PressureObserver
新的类名字叫做PressureObserver。通过PressureObserver.observe方法来监听cpu状态的变化。
每次cpu压力发生变化的时候会触发回调,返回当前cpu的状态(PressureRecord)。
PressureRecord
interface PressureRecord {
source: "cpu";
state: "nominal" | "fair" | "serious" | "critical";
time: number;
}
- source
- 表示压力变化的项,目前只支持cpu
- state
- 表示目前的状态
- nominal 表示很好
- fair 表示压力略微升高,但是整体性能依然不错
- serious 表示能耗大幅升高,应该考虑降低能耗
- critical 表示能耗已经非常高,应该采取降级措施
- 表示目前的状态
- time
- 压力变化的时间戳
代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>前端页面性能监控</title>
</head>
<body>
<div id="div" style="white-space: pre-line;"></div>
<script>
let div = document.getElementById("div");
function callback(records) {
const lastRecord = records[records.length - 1];
const date = new Date(lastRecord.time);
div.innerHTML += `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()} state:` + lastRecord.state + '\r\n';
}
try {
const observer = new PressureObserver(callback);
observer.observe("cpu", { sampleInterval: 1000 });
} catch (error) {
div.innerHTML += `不支持PressureObserver方法\r\n`;
}
</script>
</body>
注意事项
此方法需要在页面是active的状态下才会触发回调。