利用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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JS高级运动实例分析
Dec 20 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
关于PHP中的Class的几点个人看法
2006/10/09 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python内建数据结构详解
2016/02/03 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
劳动实践课感言
2014/02/01 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
电影建国大业观后感
2015/06/01 职场文书
黄河绝恋观后感
2015/06/08 职场文书
冰雪公主观后感
2015/06/16 职场文书
房屋所有权证明
2015/06/19 职场文书
Python字符串常规操作小结
2022/04/03 Python