利用JavaScript檢測(cè)CPU使用率自己寫的
更新時(shí)間：2014年03月22日 14:47:59 作者：
這篇文章主要介紹了自己寫的一個(gè)利用JavaScript檢測(cè)CPU使用率的方法,需要的朋友可以參考下
之前在玉伯的Github Issues里看到了使用JS檢測(cè)CPU使用率的方法，覺得很贊。
特別自己實(shí)現(xiàn)了一下，另外加了一個(gè)繪制直方圖的功能可以直觀看到CPU使用率的情況。
效果請(qǐng)見：傳送門
實(shí)現(xiàn)思想
其實(shí)就是setInterval，利用當(dāng)前時(shí)間減去上一次執(zhí)行timer記錄的時(shí)間，得到時(shí)間差來(lái)反映CPU的延遲，側(cè)面反映了CPU的使用率。
var data = [],t;
var cpuTimer = setInterval(function(){
t && data.push(Data.now()-t);
t = Data.now();
},500);
理論上得到data應(yīng)為[500,500,500,500,500...],但實(shí)際上CPU肯定會(huì)略微延遲,data可能為[501,502,502,501,503...]。如果CPU使用率很高的話,延遲會(huì)很大,data就會(huì)變?yōu)閇550,551,552,552,551...]。通過(guò)判斷data的變化可以初步推斷CPU的使用率。
使用直方圖直觀表示CPU使用率
我們通過(guò)繪制data的直方圖，可以看到數(shù)據(jù)的波動(dòng)情況。當(dāng)直方圖中某一時(shí)段數(shù)值陡升，證明那一時(shí)刻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只是為了顯示效果,
// ~~為數(shù)值取整相當(dāng)于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();
}
}
特別自己實(shí)現(xiàn)了一下，另外加了一個(gè)繪制直方圖的功能可以直觀看到CPU使用率的情況。
效果請(qǐng)見：傳送門
實(shí)現(xiàn)思想
其實(shí)就是setInterval，利用當(dāng)前時(shí)間減去上一次執(zhí)行timer記錄的時(shí)間，得到時(shí)間差來(lái)反映CPU的延遲，側(cè)面反映了CPU的使用率。
復(fù)制代碼 代碼如下:
var data = [],t;
var cpuTimer = setInterval(function(){
t && data.push(Data.now()-t);
t = Data.now();
},500);
理論上得到data應(yīng)為[500,500,500,500,500...],但實(shí)際上CPU肯定會(huì)略微延遲,data可能為[501,502,502,501,503...]。如果CPU使用率很高的話,延遲會(huì)很大,data就會(huì)變?yōu)閇550,551,552,552,551...]。通過(guò)判斷data的變化可以初步推斷CPU的使用率。
使用直方圖直觀表示CPU使用率
我們通過(guò)繪制data的直方圖，可以看到數(shù)據(jù)的波動(dòng)情況。當(dāng)直方圖中某一時(shí)段數(shù)值陡升，證明那一時(shí)刻CPU使用率較高。
復(fù)制代碼 代碼如下:
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只是為了顯示效果,
// ~~為數(shù)值取整相當(dāng)于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();
}
}
相關(guān)文章
JavaScript常見的函數(shù)中的屬性與方法總結(jié)
當(dāng)定義和調(diào)用函數(shù)時(shí)，JavaScript?函數(shù)對(duì)象會(huì)自動(dòng)具有一些特定的屬性，本文為大家總結(jié)了一些常見的屬性和方法，感興趣的小伙伴可以了解一下2023-05-05
本文章通過(guò)實(shí)例代碼給大家詳細(xì)介紹js中正則表達(dá)式的全局匹配模式 /g的用法，需要的朋友參考下2017-04-04
Bootstrap每天必學(xué)之輪播（Carousel）插件
Bootstrap每天必須之輪播（Carousel）插件,Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式，感興趣的小伙伴們可以參考一下2016-04-04
UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)功能(uniapp做微信小程序)
uniapp開發(fā)小程序,先授權(quán)用戶信息后再出現(xiàn)手機(jī)號(hào)授權(quán)的頁(yè)面進(jìn)行手機(jī)號(hào)授權(quán),完成后返回上一頁(yè)面并把信息存入后臺(tái)以及前臺(tái)緩存中,方便使用,這篇文章主要介紹了UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)（uniapp做微信小程序）,需要的朋友可以參考下2024-08-08
下面小編就為大家分享一篇用JS實(shí)現(xiàn)非首屏圖片延遲加載的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了在微信小程序里使用watch和computed的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript頁(yè)面倒計(jì)時(shí)功能完整示例
這篇文章主要介紹了JavaScript頁(yè)面倒計(jì)時(shí)功能,結(jié)合完整實(shí)例形式分析了javascript計(jì)時(shí)器、時(shí)間運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
本文主要介紹了javascript的異步編程相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
根據(jù)某年某周獲取一周的日期。如開始日期規(guī)定為星期四到下一周的星期五為一周，需要的朋友可以參考下2014-06-06
uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法
計(jì)時(shí)器在日常開發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08