"JavaScript High performance animations and page rendering" notes

Preface: Long time did not read my Gmail mailbox, lunch break opened to look at, see Infoq recommended a "JavaScript high-performance animation and page Rendering" article, a cursory look, very praise! Speak very detailed, to a lot of details are very good, very easy to understand. So ... Notes born

　　1, fps-frame per second frame

　　The page is that each frame change is drawn by the system (GPU or CPU). But this kind of drawing is different from the drawing of the PC game, its highest drawing frequency is limited by the display's refresh frequency (not the video card), so the highest drawing frequency is only 60 frames per second (frame per second, the following FPS abbreviation). Corresponds to the 60Hz of the display.

　　2, 60Hz and 60fps What is the relationship?

　　There is no relationship. fps represents the frequency at which the GPU renders the screen, and Hz indicates how often the display is refreshed . A static picture, you can say that the picture fps is 0 frames per second, but absolutely not say that the screen refresh rate is 0Hz, that is, the refresh rate does not change with the content of the image. The game is good browser, we talk about dropped frames , refers to GPU rendering screen frequency reduction. such as falling to 30fps or even 20fps, but because of the visual persistence principle, we see the picture is still motion and coherence.

　　3, why settimeout or SetInterval to control the drawing page there is a problem?

　　First,the timer calculates that the delay is not accurate enough . The delay calculation relies on the browser's built-in clock , and the accuracy of the clock depends on how often the clock is updated (Timer resolution).

　　IE8 and its previous version of IE have an update interval of 15.6 milliseconds . Suppose you set the settimeout delay to 16.7ms, then it will update two 15.6 milliseconds to trigger the delay. This also means that 15.6 x 2-16.7 = 14.5 milliseconds is delayed for no reason.

16.7ms

DELAY: |------------|

CLOCK: |----------|----------|

15.6ms 15.6ms

So even if you set the delay to settimeout to 0ms, it will not trigger immediately . At present, Chrome and ie9+ browser update frequency is 4ms (if you are using a laptop, and in the battery rather than power mode, in order to save resources, the browser will update the frequency of the same as the system time, also means that the update frequency is lower).

Step back, if the timer resolution can reach 16.7MS, it also faces an asynchronous queue problem. Because the callback function in the asynchronous relationship settimeout is not executed immediately, it needs to join the wait queue. The problem is that if there is a new synchronization script that needs to be executed while waiting for a delay trigger, the synchronization script will not be queued after the timer's callback, but is executed immediately.

Again, suppose the timer resolution is capable of reaching 16.7ms, and assuming that the async function is not delayed, the animation using the Timer control is still unsatisfactory. -- Vertical sync problem

"JavaScript High performance animations and page rendering" notes