利用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获取和设置CheckBox状态的简单方法
Jul 05 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
JavaScript函数柯里化
Nov 07 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实现的获取URL信息的类
2007/01/02 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
深入解析php之apc
2013/05/15 PHP
php的常量和变量实例详解
2017/06/27 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
毕业生物理教师求职信
2013/10/17 职场文书
银行职业规划书范文
2013/12/28 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
三方股东合作协议书
2014/10/28 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
节约用电倡议书
2015/04/28 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书