利用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 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
js实现文字选中分享功能
Jan 25 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
vue实现微信分享功能
Nov 28 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
js实现随机点名功能
Dec 23 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
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Python显示进度条的方法
2014/09/20 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
普通员工辞职信
2014/01/17 职场文书
家教广告词
2014/03/19 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
基于python实现银行管理系统
2021/04/20 Python
Python使用Kubernetes API访问集群
2021/05/30 Python
python元组打包和解包过程详解
2021/08/02 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技