What The Best Frame Rate For Animation On The Web

catalogue

The standard of fluent animation
Method 1: with the help of chrome developer tools
Method 2: with the help of frame timing API

Blink kernel early compages
The subtle difference between JS animation and CSS animation
What is the frame timing API?
Frame timing API

Method 3: with the help of the asking blitheness frame API

Using request animation frame to calculate FPS principle

The standard of fluent animation

Showtime, sort out some concepts. FPS represents the number of picture updates per 2d. We unremarkably meet a continuous picture is composed of a still picture, each moving picture is called a frame, FPS is a physical quantity to describe the "frame" change speed.

Theoretically, the higher the FPS is, the smoother the animation volition be. At present, the screen refresh rate of well-nigh devices is 60 times / s, so more often than not speaking, the blitheness effect is the best when the FPS is 60 frame / s, that is, the consumption time of each frame is 16.67ms.

Of grade, friends who often play FPS games must know that FPS games such as eating chicken / csgo recommend the use of 144hz refresh rate brandish. 144hz display refers to the brandish with 144hz refresh rate per second. Compared with the normal display refresh speed of threescore per 2d, the screen display is more fluent. Therefore, the 144hz brandish is more suitable for the get-go person shooting game where the viewing angle always keeps high speed.

However, this is merely a loftier refresh rate feature provided by the monitor. For our web animation, it depends on the browser, and the refresh charge per unit of most browsers is sixty times per second.

Intuitive experience, unlike frame charge per unit experience:

If the frame charge per unit can reach fifty-threescore FPS, the animation will be quite smooth and comfortable;
The animation with frame rate between xxx and l FPS varies from person to person in terms of sensitivity and condolement;
Animation with frame rate beneath 30 FPS makes people feel apparently stuck and uncomfortable;
Blitheness with great frame rate fluctuation tin can also make people feel stuck.

OK, and so how tin can nosotros accurately get the current FPS value of our folio animation?

Method 1: with the help of chrome developer tools

Chrome provides powerful functions for developers. In the developer tool, we can call upwards the FPS meter pick as follows:

With this button, y'all can offset the real-time frame charge per unit observation and folio GPU utilization.

Disadvantages:

This can only detect a few pages at a time, and it needs to be observed manually in existent time
Information tin merely be subjective feelings, and there is not a very accurate data constantly reported or nerveless

So we demand a more than intelligent arroyo.

Method 2: with the help of frame timing API

Before introducing the following method, continue to do some basic knowledge popularization.

Blink kernel early on architecture

Take blink rendering page equally an case. For the early Chrome browser, each folio tab corresponds to an independent render procedure, which includes the main thread and synthesis thread. Early on chrome kernel architecture:

The primary thread is mainly responsible for:

Adding and execution of JavaScript
CSS style calculation
Layout adding
Drawing page elements as a bitmap (paint), that is, rasterization (rasterization)
Give bitmap to limerick thread

The composition thread is mainly responsible for:

Upload the bitmap (graphics layer) to GPU in the grade of texture
Calculate the visible and upcoming visible parts of the page (scrolling)
CSS animation processing
Tells the GPU to describe a bitmap to the screen

OK, in the clouds, something. In fact, after knowing these two threads, the adjacent concept is to clarify the subtle differences betwixt CSS animation and JS animation (of form, they are web animation).

The subtle difference between JS blitheness and CSS animation

For JS animations, their run-time frame charge per unit is the total time consumed by the main thread and synthesis thread. For smooth animation, we hope that the time consumption of each frame is kept within 16.67ms;

For CSS animation, because its process is non affected by the master thread, nosotros promise to become the time consumed by the synthesis thread, and the cartoon frequency of the synthesis thread likewise reflects the process of scrolling and CSS animation.

The chief conclusion I want to depict in a higher place is. If nosotros can know the time consumed by each frame of the principal thread and synthesis thread, nosotros can roughly go the frame rate of the corresponding spider web animation. So can the frame timing API mentioned above assist us get to this betoken in time.

What is the frame timing API?

Frame timing API is one of the members of Web Performance timing API standard.

Web functioning timing API is a set up of performance API standards launched by W3C, which is used to aid developers accurately analyze and command all aspects of website functioning, and improve the performance of Web sites.

Information technology contains many subclasses of API, which perform different functions, as follows (excerpt from using functioning API to quickly analyze spider web front end-end operation, of course, yous can also encounter the introduction of the original English version: Web Performance timing API)

How to use information technology? Take navigation timing, performance timeline and resource timing as examples. For browsers compatible with it, it is exposed and mounted on window.performance in the class of read-only attributes.

Print window.performance in the panel, and cheque the timing holding

What exercise a serial of variables in this object represent? It represents every important time bespeak in the whole loading process of our page. You can have a detailed look at this figure

Through this figure and the above window.performance.timing, we can easily count the time consumption of each important node on the folio. This is the strength of the web performance timing API. Those who are interested tin study it in item and use it in folio statistics.

Frame timing API

OK, we can finally get back to the signal. With the help of frame timing API in Web Functioning timing API, we can easily go the time of primary thread and synthesis thread in each frame. Or it's easier to get the fourth dimension of each frame.

Obtain the records of the render primary thread and the limerick thread. The information contained in each record is basically every bit follows, and the code is illustrated (refer to the programmer feedback needed: frame timing API)

                              var rendererEvents = window.performance.getEntriesByType("renderer"); var compositeThreadEvents = window.performance.getEntriesByType("composite");

Or:

                              var observer = new PerformanceObserver(office(list) {     var perfEntries = list.getEntries();     for (var i = 0; i < perfEntries.length; i++) {         console.log("frame: ", perfEntries[i]);     } });   // subscribe to Frame Timing observer.notice({entryTypes: ['frame']});

The data contained in each record is basically equally follows:

                              {   sourceFrameNumber: 120,   startTime: 1342.549374253   cpuTime: half dozen.454313323 }

Each record includes a unique frame number, frame outset time, and CPU time. By computing the start time of each record, nosotros can calculate the interval between every ii frames, and so as to get whether the frame charge per unit of the animation can achieve sixty FPS.

even so! Have a look at the overall compatibility of the web performance timing API:

Although the frame timing API is good, the compatibility of the frame timing API is not very friendly now. Well, how unfriendly is it. No browser support, in the experimental stage, belongs to the time to come oriented programming. Are yous kidding me? I tin can't utilise it after so long

Method 3: with the help of the request animation frame API

It took then much time to describe the frame timing API, but in the terminate, because of compatibility problems, it couldn't be used at all. All the same, it does not hateful that such a long clarification is useless. From the higher up introduction, we know that if we can get a fixed time indicate in each frame, and so subtracting the 2 can also approximate the time consumed by a frame.

Well, let'due south find another way. This time, we employ the well compatible request animation frame API.

              //Grammar window.requestAnimationFrame(callback);

The method tells the browser that you want to execute the animation and requests the browser to call the specified function to update the blitheness before the next redraw.

You apply this method when you are ready to update the screen. This will require your blitheness function to be executed before the next redraw in the browser. The number of callbacks is usually 60 per second, and near browsers usually friction match the W3C recommended refresh charge per unit.

Using request blitheness frame to calculate FPS principle

The principle is that usually, the method of request blitheness frame will exist executed sixty times in a second, that is, without dropping the frame. Suppose the animation starts at time a and ends at time B, taking 10 Ms. If the middle request animation frame is executed n times, the frame rate of this animation is due north / (B – a).

The core code is as follows, which tin can approximately calculate the page frame rate per 2nd, and nosotros record an extra allframecount, which is used to record the execution times of RAF and calculate the frame charge per unit of each animation

              var rAF = function () {     return (         window.requestAnimationFrame ||         window.webkitRequestAnimationFrame ||         function (callback) {             window.setTimeout(callback, 1000 / 60);         }     ); }();    var frame = 0; var allFrameCount = 0; var lastTime = Appointment.now(); var lastFameTime = Date.at present();    var loop = function () {     var now = Appointment.now();     var fs = (now - lastFameTime);     var fps = Math.circular(1000 / fs);        lastFameTime = now;     //Practise not set to 0, tape the deviation of this value at the commencement and end of the animation to calculate FPS     allFrameCount++;     frame++;        if (now > 1000 + lastTime) {         var fps = Math.round((frame * 1000) / (at present - lastTime));         Console. Log ('${new appointment()} 1s, FPS:', FPS);         frame = 0;         lastTime = now;     };        rAF(loop); }   loop();

OK, find a page with blitheness running continuously to test. You can see that the code runs as follows:

Here, I used a page that I made before to test. I used chrome to telephone call out the FPS meter of the page at the aforementioned time, and compared the real-time FPS values on both sides, which basically matched.

Test page, solar system. You can paste the above lawmaking into the panel of this page to exam the data:

Compared with the frame rate in the upper correct corner, the frame rate is basically the same. In most cases, this method can get the frame rate of Spider web animation very well.

If nosotros need to count the frame rate of a specific animation process, nosotros but need to record the value of allframecount at the outset and cease of the animation, and so split up it by the time consumed in the middle to get the FPS value of a specific animation process.

It is worth noting that there must be an error between the calculation result of this method and the real frame charge per unit, because it takes the time interval betwixt every two primary threads executing JavaScript as one frame, rather than the time consumed past the master thread plus synthetic thread as one frame. But for the present phase, it is a desirable method.

The to a higher place is how to calculate the web animation frame rate FPs in detail. For more information about calculating the web blitheness frame rate FPS, delight pay attention to other related articles of developer!

Source: https://developpaper.com/how-to-calculate-web-animation-frame-rate-fps/

Posted by: stokesfrighters.blogspot.com