Я видел метод использования JS для обнаружения использования процессора в проблемах Yu Bo's GitHub, и я подумал, что это здорово.
Я реализовал это сам и добавил функцию рисования гистограмм, чтобы визуально увидеть использование ЦП.
Смотрите эффект: портал
Понять идею
Фактически, это SetInterval, который использует текущее время для вычтения времени в прошлый раз, выполняемое записи таймера, чтобы получить разницу во времени, чтобы отразить задержку ЦП, что косвенно отражает скорость использования ЦП.
Кода -копия выглядит следующим образом:
var data = [], t;
var cputimer = setInterval (function () {
t && data.push (data.now ()-t);
t = data.now ();
}, 500);
Теоретически, данные должны быть [500 500 500 500 500 ...], но на самом деле ЦП определенно будет немного задержать, и данные могут быть [501,502,502,501,503 ...]. Если уровень использования ЦП высок, задержка будет очень большой, а данные станут [550 551 552 552 551 ...]. Оценивая изменение данных, скорость использования ЦП может быть первоначально выведена.
Интуитивное представление использования процессора с использованием гистограммы
Нарисовав гистограмму данных, мы можем увидеть колебания данных. Когда стоимость определенного периода времени в гистограмме резко возрастает, это доказывает, что в тот момент скорость использования ЦП высока.
Кода -копия выглядит следующим образом:
Функция Drawhisto (data) {
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';
для (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, высота);
ctx.lineto (x+histowidth/2, height-y);
ctx.stroke ();
}
}