利用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 textContent与innerText的异同分析
Oct 22 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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 str_pad 函数用法简介
2009/07/11 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
Document 对象的常用方法
2009/07/31 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
Python实现类继承实例
2014/07/04 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python标准库sched模块使用指南
2017/07/06 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
决定成败的关键——创业计划书
2014/01/24 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
奠基仪式策划方案
2014/05/15 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
募捐感谢信
2015/01/22 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers