To monitor web traffic, we have to start with the FPS.

FPS is a concept that comes from video or game. FPS is the number of frames per second, which represents the smoothness of the video or game.

What is a web FPS in front end development?

What is a WEB FPS?

Web content is constantly changing, and the FPS of a web page is the frame rate at which the browser renders these changes. The higher the frame rate, the smoother the page feels, and the less it stutters.

In Chrome you can view the FPS of a web page using the developer tools:


Note that web pages are not needed all the time, and the tool sees the FPS value for each update.

The optimal frame rate is 60, or about 16.5ms per rendering.

You can also check your browser’s frame rate using a performance tool like Chrome or Firfox:


The green histogram represents the frame rate at which the page was redrawn, with Frames being the time it took to render each frame.

Another way to give a web FPS

FPS Extension is a Chrome extension that displays the FPS value of the current web page, i.e. whether the page is stuck or not.


Instead of using the browser’s native API (which is being developed), these tools break new ground. This is done through the browser’s requestAnimationFrame API (you can use setInterval Polyfill).

The code is similar:

var lastTime = performance.now();
var frame = 0;
var lastFameTime = performance.now();
var loop = function(time) {
    var now =  performance.now();
    var fs = (now - lastFameTime);
    lastFameTime = now;
    var fps = Math.round(1000/fs);
    frame++;
    if (now > 1000 + lastTime) {
        var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) );
        frame = 0;    
        lastTime = now;    
    };           
    window.requestAnimationFrame(loop);   
}
Copy the code

Code excerpts from taobao front-end teamWireless Performance Optimization: FPS Testing.

The requestAnimationFrame API is used to execute javascript code on a regular basis. If the browser is running late, the render rate is not up to 60 frames in 1s, which can indirectly reflect the browser’s render rate. For details on the requestAnimationFrame API, see the documentation on the MDN.

How to monitor web page lag?

Why monitor in the first place? For example, in the nationwide broadcast, we must pay attention to users’ experience of watching videos. Any lag of web pages or players will make users mad. It must be monitored to guide optimization.

Finally, getting back to the topic of this article, how do you monitor web page congestion?

As an example, use FPS Extension in a similar way to calculate the FPS value of a web page once per second to get a column of data:

. 6,8,11,29,60,58,46,57,57,57,44,59,51,54,0,31,58,56,41,52,51,17,22, 34,51,48,26,26,49,59,59,59,59,52,52,0,45,58,60,59,60,21…

It is then reported to the big data platform for analysis through the common log channel.

So how do you determine if a web page is stuck by FPS? According to our observation of lag, three consecutive FPS below 20 can be considered as the existence of lag on the web page.

function isBlocking(fpsList, below=20, last=3) {
  var count = 0
  for(var i = 0; i < fpsList.length; i++) {
    if (fpsList[i] && fpsList[i] < below) {
      count++;
    } else {
      count = 0
    }
    if (count >= last) {
      return true
    }
  }
  return false
}
Copy the code

Of course this is just an experience, but it can be used as a relative measure.

In this way, we get the statistics of web page lag:


Next, we can optimize our web page in the case of data support for the problem of stuck!

I recommend an active developer community: Nuggets is a technical community for programmers, from big factory technology sharing to front-end development best practices, you won’t miss out on anything.

Front End – Nuggets – Juejin. Im – a community that helps developers grow