利用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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 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 for 循环语句使用方法详细说明
2010/05/09 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python日志logging模块使用方法分析
2019/05/23 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
党员干部承诺书范文
2014/03/25 职场文书
留学推荐信怎么写
2015/03/26 职场文书
2015年公务员工作总结
2015/04/24 职场文书
高中英语教学反思范文
2016/03/02 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Python Numpy库的超详细教程
2022/04/06 Python