利用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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
vue.js购物车添加商品组件的方法
Sep 17 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python import自定义模块方法
2015/02/12 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
详解Python中的条件判断语句
2015/05/14 Python
python中的格式化输出用法总结
2016/07/28 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
django和flask哪个值得研究学习
2020/07/31 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
电子商务专业个人的自我评价
2013/11/19 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
主题婚礼策划方案
2014/02/10 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014年护理部工作总结
2014/11/14 职场文书
作息时间调整通知
2015/04/22 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书