JavaScript估算CPU使用率的两种实现思路
本文介绍了在JavaScript中获取当前CPU使用率的两种方法。首先介绍了允许使用HTA时，通过ActiveXObject调用WMI接口获取精确的Win32_Processor负载百分比。其次探讨了在普通网页环境中，利用定时器间隔执行密集计算并对比时间差，从而粗略估算CPU繁忙程度的方案，并提供了相关示例代码。
本文介绍了一种在JavaScript中获取当前CPU使用率的方法，供读者参考。
HTA环境下精确获取CPU使用率
若环境允许使用HTA（HTML Application），可以通过以下代码精确获取当前系统的CPU使用率。
setInterval(function() {
var locator=new ActiveXObject ("WbemScripting.SWbemLocator");
var service=locator.ConnectServer(".");
var cpu=new Enumerator (service.ExecQuery("SELECT * FROM Win32_Processor")).item();
document.title = cpu.LoadPercentage;
}, 1000);
网页环境中CPU使用率的粗略估算方法
若无法使用上述HTA方式，在常规网页中是否有更合适的方法进行粗略估算？
其核心思路是利用定时器，设定固定的执行间隔（例如500ms）。每次调用时，计算从开始计时到本次执行的实际耗时。如果实际耗时与设定间隔基本一致（差值约等于500ms），则说明CPU负载正常；如果实际耗时明显大于设定间隔（如大于500ms），则可根据超出数值的大小来判定CPU的繁忙程度。由于不同机器的CPU处理能力存在差异，该方法仅为粗略估算，结果不完全准确，且对系统参数有较强的依赖性。
function cpuSimulator() {
var J = 100,
getNow = function() {
return new Date().getTime();
};
!(function() {
var I = document.createElement("div"),
s = 50,
fn = function(l) {
l = 1;
var now = getNow();
var c = 1;
while (c < J) {
if (now > D + c*s) {
l++;
}
c++;
}
D = getNow();
I.innerHTML = "CPU：" + l/J * 100 + "%";
},
t = setInterval(fn, 500),
D = getNow();
I.style.cssText = "width:80px; height:20px; position:fixed !important; _position:absolute; top:10px; right:10px; border:1px solid #406c99; padding:2px; color:#f00;";
document.body.appendChild(I);
fn();
})();
}
若希望判定更为精准，需调整定时器的执行时间以及时间差值的对比逻辑。
早在几年前，ajax.com上已有人提供此类示例。使用方式较为简单，只需在需要监测的网页地址栏中输入特定代码即可。
具体代码如下：
javascript:(function(s){s.type='text/javascript';s.src='http://www.3site.eu/JPU/IJPU.js';document.getElementsByTagName('head')[0].appendChild(s)})(document.createElement('script'));
在当前页面右上角会出现一个小图标，该图标分为5个等级，分别代表当前CPU的任务负载状况（等级过高说明CPU使用率较高）。需注意，这仅是一个大概的估算，精度有限。
这里有一个在线演示示例：
<html>
<head>
<script type="text/javascript" src="http://www.3site.eu/JPU/JPU.js">
<!--//
JPU - by WebReflection
//-->
</script>
<script type="text/javascript">
<!--//
function randomString(){
for(var i = 0, a = []; i < Math.ceil(Math.random() * 123456789); i++)
a[i] = String.fromCharCode(Math.round(Math.random() * 50) + 30);
return a.join("");
};
onload = function(){
setInterval(function(){
var div = document.getElementById("demo");
div.appendChild(document.createTextNode(randomString()));
}, 300);
};
//-->
</script>
<style type="text/css">
div{overflow:hidden;width:80%;height:80%;color:#FFF;}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
其核心代码IJPU较为简短，可供参考：
/* (C) Andrea Giammarchi */
(function (J, P, U) {
var a = 'appendChild',
c = 'createElement',
e = 'addEventListener',
d = document,
l = "load",
w = window;
(function () {
var i = setInterval(function (l) {
l = 1;
D = new Date - D;
if (D > 700) l++;
if (D > 650) l++;
if (D > 600) l++;
if (D > 550) l++;
s(J = l < J ? --J : l);
D = new Date
}, 500),
b = d.body,
s = function () {
I.className = U + J
},
I = d[c]('p'),
C = d[c]('link'),
D = new Date;
C.rel = 'stylesheet';
C.type = 'text/css';
C.href = P + U + '.css';
s(b[a](C), b[a](I)); /*@cc_on setInterval(function(){I.style.top=document.body.scrollTop+"px"},50)@*/
})()
})(5, 'http://www.3site.eu/JPU/', 'JPU');
希望本文所述内容对大家的JavaScript程序设计有所帮助。
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41