To monitor the stutter of web pages, we must start with FPS.
FPS comes from the concept of video or games, that is, the number of frames per second, which represents the fluency of the video or game. As the saying goes, it is "no card".
What is the FPS of web pages in the field of front-end development?
What is the FPS of a webpage?
The content of the web page is constantly changing, and the FPS of the web page is only the frame rate when the browser renders these changes. The higher the frame rate, the smoother the webpage feels to the user, otherwise it will feel stuck.
In Chrome, you can view the FPS of the webpage through the developer tools :
Note that the webpage is not always needed, what the tool sees is that each update is the FPS value.
The optimal frame rate is 60, which means it is rendered once every 16.5ms.
You can also view the frame rate of the browser through performance tools such as Chrome or Firfox:
The green histogram represents the frame rate when the page is redrawn, and Frames is the time it takes to render each frame.
Another way to give webpage FPS
FPS extension is an extension of Chrome that can display the FPS value of the current webpage, that is, whether the page is stuck.
This tool obtains the page FPS in a different way than the browser itself. It does not use the browser's native API ( under development ). This kind of tool has a unique approach, which is achieved 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);
}
The code is taken from "Wireless Performance Optimization: FPS Test" by the front-end team of Taobao .
The popular explanation is that through the requestAnimationFrame API to execute some JS code regularly, if the browser is stuck, the rendering frequency cannot be well guaranteed. The frame in 1s cannot reach 60 frames, which can indirectly reflect the browser's rendering frame rate. For details about requestAnimationFrame API, you can refer to the documentation on MDN .
How to monitor the webpage?
Why monitor first? For example, in the national live broadcast , we must pay attention to the user's experience in watching the video. Any webpage or player freeze will make the user crazy. So it must be monitored to guide optimization.
Finally, back to the topic of this article, how to monitor the webpage stuck?
Taking the national live broadcast method as an example, using the FPS extension similar method, the FPS value of the web page is calculated once per second to obtain a list 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…
Then report to the big data platform for analysis through the common log channel.
So how to confirm that the webpage is stuck through FPS? According to our observations on stuttering, three consecutive FPSs below 20 can be considered as stuttering.
function isBlocking(fpsList, below, last) {
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
}
Of course, this is just an experience, but it can be used as a relative measure.
In this way, we got the statistics of webpage stalls:
Next, you can optimize our webpage with data support for the problem of Caton!
Service recommendation
