這篇文章主要介紹了自己寫的一個利用JavaScript檢測CPU使用率的方法,需要的朋友可以參考下
之前在玉伯的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(); } }