This article mainly introduces a way to use JavaScript to detect CPU usage, and need friends to refer to the following
Previously in Yuber GitHub issues saw the use of JS detection of CPU usage, feel very good. A special implementation of its own, plus a rendering of the histogram of the function can visually see the situation of CPU utilization. effect See: Transfer door Realize the idea of is actually setinterval, using the current time minus the last time the timer record, get a lag to reflect the CPU delay, The side reflects the CPU usage rate. Code as follows: var data = [],t; var Cputimer = setinterval (function () { t && Data.push (Data.now ()-T); &nbs P t = Data.now (); },500); Theoretically get Data should be [500,500,500,500,500 ...], but the CPU will certainly be slightly delayed, Data may be [ 501,502,502,501,503. ...]. If the CPU usage is very high, the delay will be very large, data will become [550,551,552,552,551 ...]. By judging the change of data, we can infer the CPU usage rate preliminarily. Use histograms to visually indicate CPU usage We can see the fluctuation of the data by drawing the histogram of the dataset. When the value of a certain period of a vertical graph rises, it is proved that the CPU utilization rate is higher at that time. Code as follows: function Drawhisto (data) { var cvs = document.getElementById (' canvas '); CTX = Cvs.getcontext (' 2d '); var width = cvs.width, height = cvs.height, histowidth = width/size;   ; redrawing histograms Ctx.fillstyle = "#fff"; ctx.fillrect (0,0,width,height); Ctx.beginpath (); Ctx.linewidth = Histowidth/2; ctx.strokestyle = ' #000 '; for (var i = 0, len = data.length; i < Len; i++) { var x = i * hist owidth, //+ 5,/20,-10 is only for the display effect, /~ ~ for numeric values equivalent to Math.floor () y = ~ ((data[i)-speed + 5)/(height-10 ); Ctx.moveto (X+HISTOWIDTH/2, height); ctx.lineto (X+HISTOWIDTH/2, height-y); Ctx.stroke (); } }