JavaScript监控当前cpu使用状况

也许在你面试的某一天，突然问你一个问题：“如何粗略的计算出当前系统cpu的使用情况？”

JavaScript的应用分很多场景，在面对并发量过千万的平台，对JavaScript的性能将会越来越严格，而在面试中是一定会考察以下三条：算法、性能优化、业务分析，会不停的追问你有没有更好解决方法

回到题目，想获取当前系统cpu的使用率，如果允许使用hta，可以使用以下的代码获取当前cpu的使用率(较为精确)

setInterval(function() {
    var locator=new ActiveXObject ("WbemScripting.SWbemLocator");
    var    service=locator.ConnectServer(".");

    var cpu=new Enumerator (service.ExecQuery("SELECT * FROM Win32_Processor")).item();
    document.title = cpu.LoadPercentage;
}, 1000);

如果不允许使用上面的方法，在正常的网页中是否有更合适的方法进行粗略的估算？

思路就是用一个定时器，假设间隔执行时间为500ms，当调用它时，判断从开始计时到本次执行所用时间，如果两者之差 == 500 则基本上可以认定为比较正常，如果 > 500+ 则针对不同的值来判定cpu的繁忙状况（因为不同的机器，CPU处理能力不太一样，所以这个最多只是粗略的估算不完全准确，对系统的一些参数有较强的依赖性）

function cpuSimulator() {
    var J = 100,
        getNow = function() {
            return new Date().getTime();
        };

    !(function() {
        var I = document.createElement("div"),            
            s = 50,            
            fn = function(l) {
                l = 1;

                var now = getNow();
                var c = 1;
                while (c < J) {
                    if (now > D + c*s) {
                        l++;
                    }
                    c++;
                }
                
                D = getNow();

                I.innerHTML = "CPU：" + l/J * 100 + "%";
            },
            t = setInterval(fn, 500),
            D = getNow();
            
            I.style.cssText = "80px; height:20px; position:fixed !important; _position:absolute; top:10px; right:10px; border:1px solid #406c99; padding:2px; color:#f00;";
            document.body.appendChild(I);
            
            fn();
    })();
}

如果想判定的更为精准，那只能在定时器的执行时间和对差值的对比上进行调整了。

在搜索javascript cpu相关的文章中，发现早在几年前ajax.com上就有人已经写出来这样的例子了。使用起来还比较简单，直接在你的需要监测的网页地址栏中输入：

javascript:(function(s){s.type='text/javascript';s.src='http://www.3site.eu/JPU/IJPU.js';document.getElementsByTagName('head')[0].appendChild(s)})(document.createElement('script'));

在当前页面右上角会出现一个小图标，它分为5个等级，分别代表当前cpu高度任务的状况（过高则说明CPU使用率是比较高的，只能进行一个大概的估算，不是很精确）

这里有一个在线例子：


<html> 
<head> 
<script
    type="text/javascript"
    src="http://www.3site.eu/JPU/JPU.js"
><!--//
    JPU - by WebReflection
//--></script> 
<script type="text/javascript"><!--//
function randomString(){
    for(var    i = 0, a = []; i < Math.ceil(Math.random() * 123456789); i++)
        a[i] = String.fromCharCode(Math.round(Math.random() * 50) + 30);
    return    a.join("");
};
onload = function(){
    setInterval(function(){
        var    div = document.getElementById("demo");
        div.appendChild(document.createTextNode(randomString()));
    }, 300);
};
//--></script> 
<style type="text/css">div{overflow:hidden;80%;height:80%;color:#FFF;}</style> 
</head> 
<body><div id="demo"></div></body> 
</html>

它整个IJPU的代码比较简短，可以参考一下：

/* (C) Andrea Giammarchi */
(function (J, P, U) {
    var a = 'appendChild',
        c = 'createElement',
        e = 'addEventListener',
        d = document,
        l = "load",
        w = window;
    (function () {
        var i = setInterval(function (l) {
            l = 1;
            D = new Date - D;
            if (D > 700) l++;
            if (D > 650) l++;
            if (D > 600) l++;
            if (D > 550) l++;
            s(J = l < J ? --J : l);
            D = new Date
        }, 500),
            b = d.body,
            s = function () {
                I.className = U + J
            },
            I = d[c]('p'),
            C = d[c]('link'),
            D = new Date;
        C.rel = 'stylesheet';
        C.type = 'text/css';
        C.href = P + U + '.css';
        s(b[a](C), b[a](I)); /*@cc_on setInterval(function(){I.style.top=document.body.scrollTop+"px"},50)@*/
    })()
})(5, 'http://www.3site.eu/JPU/', 'JPU');