利用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按字节截取字符串
Apr 24 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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
推荐一篇入门级的Class文章
2007/03/19 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
组织关系转移介绍信
2014/01/16 职场文书
出纳员岗位责任制
2014/02/11 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
保密工作责任书
2014/04/16 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
写给父母的感谢信
2015/01/22 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android