利用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();
}
}

时间: 2014-03-20

JavaScript获取当前cpu使用率的方法

本文实例讲述了JavaScript获取当前cpu使用率的方法.分享给大家供大家参考,具体如下: 想获取当前系统cpu的使用率,如果允许使用hta,可以使用以下的代码获取当前cpu的使用率(较为精确) setInterval(function() { var locator=new ActiveXObject ("WbemScripting.SWbemLocator"); var service=locator.ConnectServer("."); var cpu=

让任务管理器中的CPU跳舞的js代码

之前在<编程之美>的书中看到有关控制任务管理器中CPU占用率的文章.感觉很意思.一直想自己做一次.但我在C语言方面的水平有限.因此不能直接用找到代码实践这个过程.不过最近经常在用javascript,所以就想到用javascript实现一下.结果还不错.代码在下面,只要在桌面上建一个html文件,把代码放进去,用浏览器打开就可以看了.因为我用的机器是双核的,所以效果不太好.希望有高手帮我改进一下这个程序. 复制代码 代码如下: <html> <head> <scr

关于网页中的无缝滚动的js代码

随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页 观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInterval()和c

在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

1 插入行 var num = 1; function addRow() { num ++; InsertRow(tableList," "+num+"新行 "); } function InsertRow(table,rowHtml) { var o=document.createElement("div"),ol; o.innerHTML=" "+rowHtml+" " ol=o.childNodes[

html中table数据排序的js代码

对了,注意那个innerText和innerHTML 复制代码 代码如下: function sortCells(event) { var obj = event.target; var count = 0; count是记录点击次数的,根据奇偶进行升序或降序 if(!obj.getAttribute("clickCount")){ obj.setAttribute("clickCount", 0); } else { count = parseInt(obj.ge

文本框中,回车键触发事件的js代码[多浏览器兼容]

判断是否按下的为回车非常简单: 复制代码 代码如下: function EnterPress(){ if(event.keyCode == 13){ ... } } IE6的onkeypress会接受"回车事件",而onkeydown不会接受 IE8的onkeypress不会接受"回车事件",而onkeydown会接受 ...不用纠结于此,两个都写上吧 复制代码 代码如下: <input type="text" onkeypress=&qu

form中限制文本字节数js代码

/*  value: 值:  byteLength:数据库字节长度  title:字段中文名称  attribute:属性名称  使用方法说明: 添加 (1) onkeyup="limitLength(this.value,100,'名称','name')"           (2)  id="name" 或[struts标签]styleId="name"  注意:id名称和 attribute属性名称要一样 例子:<textarea  

JavaScript程序开发之JS代码放置的位置

JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?下面来看一下. 一般来说有两种方式,写在界面上和使用.js文件. 1.1界面上的Head部分 可以直接放在head标签内,如下代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>testPage</title> <script type=&quo

asp.net中button控制先执行js再执行后台程序的方法

本文实例讲述了asp.net中button控制先执行js再执行后台程序的方法.分享给大家供大家参考.具体分析如下: 在.net中要实现button控制点击之后先执行js再执行后台程序这个看上去没什么难度,这里我们就一起来看一个asp.net中button控制先执行js再执行后台程序的实现方法,希望可以帮助到各位. 关于button这个服务器控件,我一直想减少它向服务器提交数据.那些检测,还是在客户端实现就好了. 这就需要javascript,但是我发现仅仅有javascript还是不够的.but

利用types增强vscode中js代码提示功能详解

使用 types 增强vscode中javascript代码提示功能 微软的vscode编辑器是开发typescript项目的不二首选,其本身也是采用typescript开发的. 使用过ts的同学都知道 *.d.ts 类型声明文件,其管理工具,从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示,类型检查提供了有力支持. 我们也可以使用类型声明文件,增强vscode编辑javascript时的智能提示. 关于vscode这方面更深的说明,请访问以下链

JS 中使用Promise 实现红绿灯实例代码(demo)

要求 使用promise 实现红绿灯颜色的跳转 绿灯执行三秒后 黄灯执行四秒后 红灯执行五秒 html 实现如下: <ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul> 定义一个