self_javascript 기술로 작성된 CPU 사용량을 JavaScript를 사용하여 감지

이전에 Yubo의 Github Issues에서 JS를 사용하여 CPU 사용량을 감지하는 방법을 보고 매우 멋지다고 생각했습니다.
직접 구현하고, CPU 사용량을 시각적으로 확인할 수 있도록 히스토그램을 그리는 기능을 추가했습니다.

효과에 대해서는 다음을 참조하십시오. Portal

구현 아이디어

는 실제로 setInterval입니다. 이는 현재 시간을 사용하여 마지막 타이머 실행으로 기록된 시간을 빼서 CPU 사용량을 반영하는 CPU 지연을 반영하는 시간 차이입니다.

코드 복사 코드는 다음과 같습니다.

var data = [],t
var cpuTimer = setInterval(function(){
t && data.push(Data.now()-t);
t = Data.now();
},500); >

이론적으로는 데이터가 [500,500,500,500,500...]이어야 하지만 실제로는 확실히 CPU가 약간 지연되어 데이터가 [501,502,502,501,503...]이 될 수 있습니다. CPU 사용량이 높으면 지연 시간이 길어지고 데이터가 [550,551,552,552,551...]이 됩니다. 데이터의 변화를 판단함으로써 초기에 CPU 사용량을 유추할 수 있습니다.

히스토그램을 사용하여 CPU 사용량을 시각적으로 표현합니다

데이터의 히스토그램을 그리면 데이터의 변동을 확인할 수 있습니다. 특정 기간 동안 히스토그램의 값이 급격히 상승하면 그 순간 CPU 사용량이 높다는 것을 증명합니다.

코드 복사 코드는 다음과 같습니다.

function drawHisto(data){
var cvs = document.getElementById('canvas');
ctx = cvs.getContext('2d');
var width = cvs.width,
height = cvs.height,
histoWidth = 너비 / 크기 ; ;
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 = ~ ~( (data[i] - 속도 5) / 20 * (높이-10) );
ctx.moveTo( x histoWidth/2, height )
ctx.lineTo( x histoWidth/2, height- y ) ;
ctx.Stroke()
}
}