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


Posted in Javascript onMarch 22, 2014

之前在玉伯的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(); 
} 
}
Javascript 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 #Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 #Javascript
js获得网页背景色和字体色的方法
Mar 21 #Javascript
页面装载js及性能分析方法介绍
Mar 21 #Javascript
Js冒泡事件详解及阻止示例
Mar 21 #Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 #Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 #Javascript
You might like
php实现字符串反转输出的方法
2015/03/14 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
VueJS全面解析
2016/11/10 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Vue数据绑定简析小结
2019/05/07 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Python处理文本换行符实例代码
2018/02/03 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python列表与元组的异同详解
2019/07/02 Python
python django生成迁移文件的实例
2019/08/31 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
python学习笔记之多进程
2020/08/06 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
函授药学自我鉴定
2014/02/07 职场文书
党课培训心得体会
2014/09/02 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
经理助理岗位职责
2015/02/02 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis