利用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实现焦点滚动图效果 具体方法
Jun 24 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
js中创建对象的几种方式
Feb 05 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
详解TypeScript中的类型保护
Apr 29 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中对数据库操作的封装
2006/10/09 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
Python比较两个图片相似度的方法
2015/03/13 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
答题辅助python代码实现
2018/01/16 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
实现向右循环移位
2014/07/31 面试题
元旦促销方案
2014/03/15 职场文书
婚前协议书怎么写
2014/04/15 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL