利用JavaScript检测CPU使用率自己写的

2014-03-22 24

之前在玉伯的Github Issues里看到了使用JS检测CPU使用率的方法,觉得很赞。
特别自己实现了一下,另外加了一个绘制直方图的功能可以直观看到CPU使用率的情况。

效果请见:传送门

实现思想

其实就是setInterval,利用当前时间减去上一次执行timer记录的时间,得到时间差来反映CPU的延迟,侧面反映了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使用率

我们通过绘制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(); 
} 
}
展开阅读全文

更多Javascript文章

JavaScript 编程引入命名空间的方法
Jun 29 17
JavaScript实现简单的二级导航菜单实例
Apr 15 10
JS获取和修改元素样式的实例代码
Aug 06 23
JavaScript实现前端实时搜索功能
Mar 26 22
基于nodejs+express4.X实现文件下载的实例代码
Jul 13 19
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 11
javascript实现固定侧边栏
Feb 09 48
手机访问当前页面