CPU占比探测用js来检查当前系统cpu的占用比例,通过 setTimeout 的方式探测 CPU 的大小,这样可以实现网页游戏中动画等耗时操作的自动调节。这个原理是很多人都知道的,就是用JS来踩点.

1
2
3
4
5
6
7
8
9
10
var data = []
var t
function () {
t && data.push(Date.now() - t)
t = Date.now()
setTimeout(pulse, 50)
}
pulse()

就是每隔 50ms 打一下点。理想情况下,data 的值应该是

data = [50, 50, 50, 50, …]

但实际情况,data 会是

data = [51, 52, 50, 52, …]

当 CPU 比较忙时,data 的数据变成

data = [81, 102, 90, 62, …]

即 CPU 越忙,data 数据项会越大。这样,记录一系列 data 值,就可以绘制出 CPU 占比趋势图,和通过任务管理器看到的 CPU 趋势图非常接近。

采用这样的思路,用js来画出cpu图片只需要下面的条件:
1 data数据不能无限增长,要控制数组长度.于是就用Array.shift()来控制
2 学习chartjs这个开源库,很简单,看看chartjs的文档就行了.chartjs中文文档
3 用自己的智慧.(饿,是显而易见的操作).来写个简单的实现

以下就是实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

大专栏  CPU踩点图d>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="marchen" />
<title>cpu踩点图</title>
<script src="http://cdn.bootcss.com/Chart.js/0.2.0/Chart.min.js"></script>
</head>
<body>
<header>
<h1>CPU踩点图</h1></header>
<canvas id="myChart" width="1000" height="800" style="border:1px solid red">
dont support canvas!
</canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = null; //数据结构
var timer = []; //x轴数字
var i = 0; //迭代数字
var info = []; //绘图信息
var timeInt = 50; //时间间隔ms
var timerNum = 20 //x轴参数个数
var t; //打点取值时间
var op = {
scaleOverride: true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: 40,
//Number - The value jump in the hard coded scale
scaleStepWidth: 1.5,
//Number - The scale starting value
scaleStartValue: 50,
animation: false
}
function drawCpu() {
//打点取值
t && info.push(Date.now() - t);
t = Date.now();
if (info.length > timeInt) info.shift(); //控制数组长度
//先前处理
timer.push(i++);
if (timer.length > timerNum) timer.shift();
data = {
labels: timer,
datasets: [{
fillColor: "rgba(40,20,0,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: info
}]
}
new Chart(ctx).Bar(data, op);
setTimeout("drawCpu()", timeInt);
}
drawCpu();
</script>
</body>
</html>

So,javascript能干什么?我想这个问题不用问了吧,虽然他的运行速度没有c那么快,但是编程的思想是一样的,c能做的事,为何js不能做呢?还可以试着用js来检测电脑性能,可以用来做很多有趣的事情.

掌握一门语言很幸福.

你能想着,我会编程,别人不会,那是多美的事情?do u think so?

CPU踩点图的更多相关文章

  1. Java程序线上故障排查

    目录 一.Linux 内存和cpu 网络 磁盘 /proc文件系统 二.JVM Java堆和垃圾收集器 gc日志分析 JVMTI介绍 Attach机制 java自带工具 三.三方工具 jprofile ...

  2. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  3. 【转】GPU 与CPU的作用协调,工作流程、GPU整合到CPU得好处

    在不少人的心目中,显卡最大的用途可能就只有两点--玩游戏.看电影,除此之外,GPU并没有其他的作用了.但是随着微软IE9的正式发布,不少人突然发现,微软一直提到一个名词:GPU硬件加速,从而也让不少人 ...

  4. JavaScript 踩坑心得— 为了高速(上)

    一.前言 很多情况下,产品的设计与开发人员一直想打造一套高品质的解决方案,从而快速.平稳地适应产品迭代.速度是衡量产品适应性的真正且唯一的标准,而且,这并不是笔者的一家之言. 「速度是衡量适应能力的真 ...

  5. Weblogic的Admin server进程将CPU消耗尽问题解决

    1.serverCPU被耗尽,持续100% 以下附nmon图 2.两个weblogicadmin server进程将CPU耗尽 问题:24298进程,占用百分之四千多的CPU资源 23529进程,占用 ...

  6. 《C++之那些年踩过的坑(附录一)》

    C++之那些年踩过的坑(附录一) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. [版权声明]转载请注明原文来自 ...

  7. CentOS7.2上用KVM安装虚拟机window10踩过的坑

    最近两个星期一直在琢磨kvm安装window10操作系统,并且通过桥接模式与外界通信,经历了九九八十一难,终于搞定.下面就记录以下我们在探索的过程中踩过的坑. 安装KVM 1. 系统要求:需要一台可以 ...

  8. 高CPU业务场景下的任务分发方案Gearman搭建一览

      Gearman是当年LiveJournal用来做图片resize的,大家也明白图片resize是一个高CPU的操作,如果让web网站去做这个高CPU的功能,有可能会拖垮你的 web应用,那本篇我们 ...

  9. 童话故事 --- CPU的贴身侍卫ITCM和ICache

    "叮铃铃- 叮铃铃-" "谁呀?"黛丝博士打开了家门,"哇,高飞,你怎么来了?" 高飞狗:"好久不见,想来看看你,还买了你最喜欢吃 ...

随机推荐

  1. typescript-学习使用ts-3

    函数 函数参数 参数及返回值类型 function add(x: number, y: number): number { return x + y } 可选参数 function add(x: nu ...

  2. IT人员职业发展规划

  3. 吴裕雄--天生自然TensorFlow高层封装:Keras-RNN

    # 1. 数据预处理. from keras.layers import LSTM from keras.datasets import imdb from keras.models import S ...

  4. echart图表demo

    <!DOCTYPE html><html><head> <title>echarts</title></head><scr ...

  5. Hibernate相关概念及序列化和持久化的区别

    hibernate是一种ORM(object relation mapping,对象关系映射)框架,所谓的对象关系映射,通俗的说,就是把JAVA对象保存到关系型数据库中. hibernate要做的事, ...

  6. redis维护节点常用操作

    维护节点 添加主节点 hash槽重新分配 添加从节点 删除结点 1 添加主节点 集群创建成功后可以向集群中添加节点,下面是添加一个master主节点 添加7007结点作为新节点 执行命令:./redi ...

  7. scala slick mysql utf8mb4 支持

    语言  scala sql包  slick 3.2.0 数据库  mysql https://stackoverflow.com/questions/36741141/scala-slick-jdbc ...

  8. python之接口开发

    一.接口开发的思路 1.启动一个服务: 2.接受客户端传过来的数据: 3.登录,注册,支付等功能 4.操作数据库,拿到数据: 5.返回数据: import flask server=flask.Fla ...

  9. Outlook邮件的右键菜单中添加自定义按钮

    customUI代码如下: <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"> ...

  10. 《C程序设计语言》练习 1-12

    #include<stdio.h> /*编写一个程序,以每行一个单词的形式打印其输入*/ main() { int c; c=getchar(); while(c!=EOF) { if ( ...