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

赞 (0)

相关推荐

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

    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

  • 利用JavaScript检测CPU使用率自己写的

    之前在玉伯的Github Issues里看到了使用JS检测CPU使用率的方法,觉得很赞. 特别自己实现了一下,另外加了一个绘制直方图的功能可以直观看到CPU使用率的情况. 效果请见:传送门 实现思想 其实就是setInterval,利用当前时间减去上一次执行timer记录的时间,得到时间差来反映CPU的延迟,侧面反映了CPU的使用率. 复制代码 代码如下: var data = [],t; var cpuTimer = setInterval(function(){ t && data.p

  • 利用JavaScript写一个简单计算器

    利用JavaScript写一个简单计算器

    效果如下: 参考程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

  • 基于Python实现实时监控CPU使用率

    基于Python实现实时监控CPU使用率

    目录 导语 一.模块简介 二.准备中 三.开始敲代码 3.1 代码内容 3.2 附完整代码 四.效果展示 导语 哈喽!大家好,我是木木子!准时上线给大家更新啦!​ Ps:小故事 前两天有位粉丝朋友在群里问我说,有没有不装一些我们熟知的电脑管理软件但是依然可以查看CPU的使用率方法,或者能够介绍一款比较给力的小插件也好.确实,在生活中有不少人是不喜欢装那些管理软件的. 今天,木木子就给大家介绍一款手写编程代码的小脚本,能够轻松在界面上展示:利用Python实时监控CPU使用率,随时展现.也无需下载

  • JavaScript检测原始值、引用值、属性

    在 JavaScript 中,我们常常会看到这样的代码:变量与 null 的比较(这种用法很有问题),用来判断变量是否被赋予了一个合理的值.比如: var Controller = { process: function(items) { if (items !== null) { // 不好的写法 items.sort(); items.forEach(function(item) { // 执行一些逻辑 }); } } } 在这段代码中, process() 方法显然希望 items 是一个

  • 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性

    在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性,比如:我们有一个网站, 在Windows XP下浏览效果良好,但是到了Ubuntu下,由于许多特性不同,会造成在浏览上的细微差异,甚至会影响到良好的用户体验.这个时候我们就需要利用 Javascript对操作系统的类型以及某些特性进行判断,分而治之,从而实现网站在跨平台浏览时候保持良好的用户体验. 下边的代码实现对Windows.Mac.Linux.Unix擦作系统的判断: 复制代

  • golang中定时器cpu使用率高的现象详析

    golang中定时器cpu使用率高的现象详析

    前言: 废话少说,上线一个用golang写的高频的任务派发系统,上线跑着很稳定,但有个缺点就是当没有任务的时候,cpu的消耗也在几个百分点. 平均值在3%左右的cpu使用率.你没有任务的时候,cpu还跑到3%,这个说不过去呀.通过查看进程pidstat捕获得知,system系统的cpu消耗也不少. sys的cpu占用率高一般是由于大量的syscall系统调用引起的-. 下面的截图是用strace统计出来的系统调用-. 我们发现  futex 和 pselect6 的syscall非常的多-. 

  • C++获取特定进程CPU使用率的实现代码

    近来发现笔记本在关闭屏幕后风扇转得特别快,打开屏幕后看任务管理器,风扇马上减速,也没有发现大量占用CPU的进程.于是想写一个小程序在后台记录每个进程的CPU使用情况,揪出锁屏后占用CPU的进程.于是自己写了一个C++类CPUusage,方便地监视不同进程的CPU占用情况.本人编程还只是个新手,如有问题请多多指教( •̀ ω •́ )! 计算原理为调用GetProcessTimes(),与上次调用得到的结果相减得到CPU占用时间,再除以两次调用的时间差,从而得到占用百分比.其中OpenProces

  • 详解Linux CPU负载和CPU使用率

    CPU负载和 CPU使用率 这两个从一定程度上都可以反映一台机器的繁忙程度. cpu使用率反映的是当前cpu的繁忙程度,忽高忽低的原因在于占用cpu处理时间的进程可能处于io等待状态但却还未释放进入wait. 平均负载(load average)是指某段时间内占用cpu时间的进程和等待cpu时间的进程数,这里等待cpu时间的进程是指等待被唤醒的进程,不包括处于wait状态进程. 以上分析可以看出,一台机器很有可能处于低cpu使用率高负载的情况,因此看机器的繁忙程度应该结合两者,从实际的使用情况观

  • Linux杀不死的进程之CPU使用率700%解决方法

    1. 问题发现 [root@zwlbs3 ~]# top i. 发现有个进程CPU使用率居然700%,COMMAND 是一些随机的字符串组成,完了~ 中标了:第一想到就是"沙雕"它,kill 命令给我上. [root@zwlbs3 ~]# kill -9 "PID" ii. 但是发现 kill 该进程平静一会后又启动了. 注:老图复用,PID.COMMAND 都有变化. 2. 查看进程的详细信息 [root@zwlbs3 ~]# cd /proc/748/ [roo

随机推荐