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. Hibernate(四)--延迟加载(lazyload)

    hibernate中的延迟加载(lazyload)分属性的延迟加载和关系的延迟加载 属性的延迟加载: 当使用load的方式来获取对象的时候,只有访问了这个对象的属性,hibernate才会到数据库中进 ...

  2. SALESORDERINCOME.QVW

    //销售订单SALESORDER_BASE_TMP:NoConcatenateLOAD T_SAL_ORDER.LE_ID, [T_SAL_ORDER.LCY CODE], T_SAL_ORDER.S ...

  3. linux操作提示：“Can't open file for writing”或“operation not permitted”的解决办法

    在linux上使用vi命令修改一个文件内容的时候,发现无法保存,每次写完使用":q!"命令可以正常退出但是使用":wq!"命令保存文件并退出时出现一下信息提示: ...

  4. binary-heap（二叉堆）原理及C++代码实现

    二叉堆可以看做一个近似的完全二叉树,所以一般用数组来组织. 二叉堆可以分为两种形式:最大堆和最小堆.最大堆顾名思义,它的每个结点的值不能超过其父结点的值,因此堆中最大元素存放在根结点中.最小堆的组织方 ...

  5. java代码实现数据源切换(连接池简单粗暴)

    --最佳实践配置(.yml) gs.oracle: #driverClassName: oracle.jdbc.driver.OracleDriver driverClassName: oracle. ...

  6. python类的书写、调用

    注意:stu1=Luffy('xing',19)   和  Luffy.__init__(stu1,'xing',19) 是等价的. 查看类的使用方法 粘贴一个网上python学习资料

  7. 传统的Servlet在spring boot中怎么实现的?

    传统的Servlet在spring boot中怎么实现的? 本文主要内容: 1:springboot一些介绍 2:传统的servlete项目在spring boot项目中怎么实现的?web.xml.u ...

  8. python语法基础-文件操作-长期维护

    ###############    python-简单的文件操作  ############### # python中文件的操作 # 文件操作的基本套路 # 1,打开文件,默认是是只读方式打开文件 ...

  9. 代码审计中的CSRF

    0x00 背景 CSRF漏洞中文名为“跨站请求伪造”,英文别名为“one-click-attack”.从字面上我们就可以看出,这是一种劫持其他用户进行非法请求的攻击方式,主要用于越权操作,与XSS相比 ...

  10. 直击LG曲面OLED首发现场，高端品质更出众

    简直是太棒了,我可以去看LG曲面OLED电视新品发布会了.这可是LG向中国首次推出的曲面OLED电视.在网上我就已经看到其实曲面OLED电视已经在韩国.美国还有欧洲都上市了,听说现在反响还挺不错.真没 ...