window.requestAnimationFrame()
Tell the browser that you want to execute an animation and ask the browser to call the specified callback to update the animation before the next redraw. This method takes as an argument a callback function that is executed before the browser’s next redraw
The business scenario
Draw a Chinese character with canvas, and the back end returns all the pixels of Chinese character. At the beginning, setInterval is used to execute the drawing, and it will be very slow as the stroke moves to the end, just like a turtle climbing. Finally, frame animation is used to achieve this.
The animation principles
You see that the image is refreshing at 60 times per second, so high that you can’t feel it refreshing. The essence of animation is to let the human eye see the visual effect of the change caused by the refresh of the image, and this change should be carried out in a coherent and smooth way. The visual retention effect of human eyes, the impression of the current position of the image stays in the brain does not disappear, then the image is moved to the next position, so you can see the image in smooth movement, this is the visual effect of animation.
1.setTimeOut
The setTimeout execution only changes the image properties in memory, and this change will not be updated to the screen until the next time the screen refreshes. If the two are out of step, it is possible to skip the action in one frame and update the image in the next.
2.requestAnimationFrame
RequestAnimationFrame moves at the pace of the system refresh. It ensures that the callback function is executed only once in each screen refresh interval, thus avoiding frame loss and animation stuttering.
The advantages and disadvantages
setTimeOut:
- Good compatibility
- When the page is hidden or minimized, setTimeout still performs the animation task in the background. Because the page is invisible or unavailable at this time, it is meaningless to refresh the animation, which is a complete waste of CPU resources
- The execution time of setTimeout is not fixed. In Javascript, the setTimeout task is put into an asynchronous queue. Only after the main thread is finished, the task in the queue will be checked to see whether the task needs to be executed. Therefore, the actual execution time of setTimeout is usually later than the set time.
- The refresh frequency is affected by the screen resolution and screen size, so the refresh frequency may be different for different devices. SetTimeout can only set a fixed interval, which may not be the same as the refresh time of the screen.
requestAnimationFrame
- Disadvantages: Poor compatibility
- Advantages: When a page is not active, the screen refresh task for that page is also paused, so requestAnimationFrame that follows the system stops rendering, and when the page is active, the animation continues where it left off, saving CPU overhead.