Vi um método de usar o JS para detectar o uso da CPU nos problemas do Yu Bo de Yu Bo antes, e achei ótimo.
Eu mesmo implementei e adicionei uma função de desenhar histogramas para ver visualmente o uso da CPU.
Veja o efeito: Portal
Perceba a ideia
De fato, é o SetInterval, que usa o tempo atual para subtrair o tempo da última vez executado pelo registro do timer para obter a diferença de tempo para refletir o atraso da CPU, que reflete indiretamente a taxa de uso da CPU.
A cópia do código é a seguinte:
var dados = [], t;
var cputimer = setInterval (function () {
t && data.push (data.now ()-t);
t = data.now ();
}, 500);
Em teoria, os dados devem ser [500.500.500.500 ...], mas na verdade a CPU definitivamente atrasará ligeiramente e os dados podem ser [501.502.502.501.503 ...]. Se a taxa de uso da CPU for alta, a latência será muito grande e os dados se tornarão [550.551.552.552.551 ...]. Ao julgar a mudança nos dados, a taxa de uso da CPU pode ser inferida inicialmente.
Representação intuitiva do uso da CPU usando histograma
Ao desenhar um histograma de dados, podemos ver as flutuações dos dados. Quando o valor de um certo período de tempo no histograma aumenta acentuadamente, prova que a taxa de uso da CPU é alta naquele momento.
A cópia do código é a seguinte:
função drawhisto (dados) {
var cvs = document.getElementById ('Canvas');
ctx = cvs.getContext ('2d');
var largura = cvs.width,
altura = cvs.Height,
histowidth = largura / tamanho;
// repintar o histograma
ctx.fillstyle = "#fff";
ctx.FillRect (0,0, largura, altura);
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 tem apenas o objetivo de exibir o efeito,
// ~~ é um valor numérico que é equivalente a math.floor ()
y = ~~ ((dados [i] - velocidade + 5) / 20 * (altura -10));
ctx.moveto (x+histowidth/2, altura);
ctx.lineto (x+histowidth/2, altura-y);
ctx.stroke ();
}
}