利用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一点特殊用法
May 28 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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开发中常用的字符串操作函数
2011/02/08 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
python访问sqlserver示例
2014/02/10 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
老公爱的承诺书
2014/03/31 职场文书
施工安全责任书范本
2014/07/24 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
创业计划书之便利店
2019/09/05 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers