利用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 格式字符串的应用
Mar 29 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 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
mysql5详细安装教程
2007/01/15 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
python妙用之编码的转换详解
2017/04/21 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python3判断url链接是否为404的方法
2018/08/10 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
医学毕业生自荐信
2013/10/11 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
表彰大会新闻稿
2015/07/17 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis