利用JavaScript檢測CPU使用率自己寫的_javascript技巧

之前在玉伯的Github Issues裡看到了使用JS檢測CPU使用率的方法，覺得很讚。
特別自己實現了一下，另外加了一個繪製直方圖的功能可以直觀看到CPU使用率的情況。

效果請見：傳送門

實現思想

其實就是setInterval，利用當前時間減去上一次執行timer記錄的時間，得到時間差來反映CPU的延遲，側面反映了CPU的使用率。

複製程式碼 程式碼如下:

var data = [],t


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){
cv document。 ;

// 重繪直方圖
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 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();
}
}