利用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 jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
Javascript动画效果(3)
Oct 11 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 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通过修改header强制图片下载的方法
2015/03/24 PHP
php实现微信发红包
2015/12/05 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python使用KNN算法手写体识别
2018/02/01 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
django加载本地html的方法
2018/05/27 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python判断自身是否正在运行的方法
2019/08/08 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
周年庆典邀请函范文
2014/01/24 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
Java基础——Map集合
2022/04/01 Java/Android