Yu Bo의 GitHub 문제에서 CPU 사용을 감지하기 위해 JS를 사용하는 방법을 보았습니다.
나는 그것을 직접 구현하고 CPU 사용을 시각적으로보기 위해 히스토그램을 그리는 함수를 추가했습니다.
효과 : 포털을 참조하십시오
아이디어를 실현하십시오
실제로, CPU 지연을 반영하기 위해 시차를 얻기 위해 타이머 레코드에 의해 실행 된 마지막 시간을 빼기 위해 현재 시간을 사용하여 CPU 사용률을 간접적으로 반영하는 SetInterval입니다.
코드 사본은 다음과 같습니다.
var data = [], t;
var cputimer = setInterval (function () {
t && data.push (data.now () -t);
t = data.now ();
}, 500);
이론적으로 데이터는 [500,500,500,500 ...] 여야하지만 실제로 CPU는 약간 지연되며 데이터는 [501,502,502,501,503 ...] 일 수 있습니다. CPU 사용률이 높으면 대기 시간이 매우 커지고 데이터는 [550,551,552,552,551 ...]가됩니다. 데이터 변화를 판단함으로써 CPU 사용률은 처음에 추론 될 수 있습니다.
히스토그램을 사용한 CPU 사용의 직관적 인 표현
데이터의 히스토그램을 그려서 데이터의 변동을 볼 수 있습니다. 히스토그램에서 특정 기간의 값이 급격히 상승하면 CPU 사용률이 그 순간에 높음을 증명합니다.
코드 사본은 다음과 같습니다.
함수 drawhisto (데이터) {
var cvs = document.getElementById ( 'canvas');
ctx = cvs.getContext ( '2d');
var width = cvs.width,
높이 = cvs.height,
histowidth = 너비 / 크기;
// 히스토그램을 다시 칠하십시오
ctx.fillstyle = "#fff";
ctx.fillRect (0,0, 너비, 높이);
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 = ~~ ((데이터 [i] - 속도 + 5) / 20 * (높이 -10));
ctx.moveto (x+histowidth/2, 높이);
ctx.lineto (x+histowidth/2, height-y);
ctx.stroke ();
}
}