On the understanding of requestAnimationFrame () function
problem description
the problem stems from the use of the requestAnimationFrame () API in a small DEMO, that uses canvas"s getContext ("2d") object
in MDN, he explains:
this method tells the browser that you want to execute the animation and requests the browser to call the specified function to update the animation before the next redraw . This method can be called when you need to update the screen. Execute the callback function before the next redrawing of the browser. The number of callbacks is usually 60 per second, but most browsers usually match the refresh rate recommended by the W3C.
here are a few questions
questions are:
1. Can this function be understood as a timer of 1000 Acme 60?
2. If not, is that the equivalent of a listener that listens to redraw the event and then executes it? So will this function be triggered for every frame I"ve written before?
3. The understanding of redrawing. I understand that the redrawing here is that the picture has changed. In that case, for example, if I draw a circle or a window-sized filled rectangle with canvas, is it a redrawing?
to understand requestAnimationFrame , you must first understand the event loop event loop. It is embarrassing to see the following figure
,
,
,,
,,
,
requestAnimationFrame,,requestAnimationFrame,,, 1000/60 ,,,alert().
setTimeout,requestAnimationFrame,,,,,..
,,.
requestAnimationFrame ,,.
,,requestAnimationFrame,,
. If you only consider chrome and firefox , the experience of using requestAnimationFrame will be very good. If you want to be compatible with more, you need to consider more compatible solutions.
for more details, please refer to the video in the first link, which is very vivid
.
< H2 > add (reply to comments) < / H2 >
what I mean is that the whole event cycle is Synchronize, that is, if you are still in the execution stack, receive the task notification, turn on the task switch, and enter the task list in the idle time for execution, this is Synchronize, instead of jumping directly to the task list, and rendering is the same.
by async of micro and macro tasks, you mean that their specific execution functions are asynchronous. But the procedure to call them is Synchronize.
for example, the following code
[Front-end performance] High performance scrolling scroll and page rendering optimization
