利用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字典探测用户名工具
Oct 05 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
为什么node.js不适合大型项目
Apr 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
PHP 数组实例说明
2008/08/18 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python中包的用法及安装
2020/02/11 Python
python logging设置level失败的解决方法
2020/02/19 Python
Python 面向对象部分知识点小结
2020/03/09 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
销售工作岗位职责
2013/12/24 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
vue里使用create, mounted调用方法
2022/04/26 Vue.js