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

來源:互聯網
上載者:User
之前在玉伯的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();
}
}
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.