利用JavaScript检测CPU使用率并绘制直方图

利用JavaScript检测CPU使用率并绘制直方图

此前在玉伯的Github Issues中了解到一种使用JS检测CPU使用率的方法，思路非常巧妙。

笔者在此基础上进行了独立实现，并额外增加了绘制直方图的功能，以便更直观地观察CPU使用率的实时状态。

具体运行效果可访问：传送门

实现思想

实现思想

核心逻辑基于setInterval定时器。通过计算当前时间与上一次执行timer记录时间之间的差值，获取时间延迟。这种延迟间接反映了CPU的使用率状况。

 
var data = [],t;
var cpuTimer = setInterval(function(){
t && data.push(Data.now()-t);
t = Data.now();
},500);

理论上，data数组中的数值应恒为[500,500,500,500,500...]，但实际运行中CPU必然存在微小延迟，因此data可能呈现[501,502,502,501,503...]的波动。若CPU使用率极高，延迟会显著增加，data数值将变为[550,551,552,552,551...]。通过分析data数组的变化趋势，即可初步推断CPU的使用率水平。

使用直方图直观表示CPU使用率

使用直方图直观表示CPU使用率

通过绘制data数组的直方图，可以清晰展示数据的波动情况。当直方图中特定时段的数值出现陡升时，表明该时刻CPU使用率较高。

 
function drawHisto(data){
var cvs = document.getElementById('canvas');
ctx = cvs.getContext('2d');
var width = cvs.width,
height = cvs.height,
histoWidth = width / size;
// 重绘直方图
ctx.fillStyle = "#fff";
ctx.fillRect(0,0,width,height);
ctx.beginPath();
ctx.lineWidth = histoWidth/2;
ctx.strokeStyle = '#000';
for( var i = 0, len = data.length; i < len; i++){
var x = i * histoWidth,
// +5、/20、-10只是为了显示效果,
// ~~为数值取整相当于Math.floor()
y = ~~( (data[i] - speed + 5) / 20 * (height-10) );
ctx.moveTo( x+histoWidth/2, height );
ctx.lineTo( x+histoWidth/2, height-y );
ctx.stroke();
} 
}