H5 new API | requestIdleCallback – requestAnimationFram

Article directory

• Browser rendering mechanism
• • event loop mechanism
  • • Macro queue and micro queue
    • Event loop process in browser
  • requestAnimationFrame(rAF)
  • • requestAnimationFrame API
  • requestIdleCallback
  • • requestIdleCallback API
    • Task splitting
    • • Usage scenarios of requestIdleCallback

Browser rendering mechanism

• Will each round of Event Loop be accompanied by rendering?
• At which stage is requestAnimationFrame executed, before or after rendering? Before or after microTask?
  requestAnimationFrame is executed before re-rendering the screen
• At which stage is requestIdleCallback executed? How to implement it? Before or after rendering?
  requestIdleCallback is executed after rendering the screen, and whether it is available for execution depends on the browser’s scheduling.

Event loop mechanism

Function: The function of the event loop mechanism is to coordinate events, user interaction, scripts, rendering and network tasks, etc.

Macro queue and micro queue

An event loop has one or more macro queues and a micro queue

A macro queue is a collection in data structure (called a task queue), and the event loop processing model will obtain a runnable task from the selected task queue. Microqueues are FIFO first-in-first-out queues.

• macro task
  • setTimeout, setInterval
  • setImmediate(node unique)
  • DOM events, Ajax events
  • User interaction, user operation events
  • script (whole code)
  • indexDB operation
• microtasks
  • process.nextTick
  • Promise some methods, such as .then
  • Async/Await (actually promise)
  • MutationObserver (html5 new feature)

Event loop process in browser

• Synchronous tasks and asynchronous tasks enter different execution environments. Synchronous tasks are placed in the execution stack, and asynchronous tasks are placed in the task queue.

1. Execute synchronous code first
2. Check the microtask queue, execute and clear the microtask queue. If a new microtask is added during the execution of the microtask, it will also be executed in this step.
3. Enter the update rendering stage to determine whether rendering is required (based on screen refresh rate, page performance, etc.). Not every round of the event loop will perform browser rendering
4. If not, start the next cycle and take out a macro task for execution. After a macro task is executed, clear the micro queue and then check whether it is needed. cycle this process

DOM modifications will not cause rendering immediately. The rendering thread and the Javascript thread are mutually exclusive. You must wait for the Javascript schedule to be executed or the thread to hang before rendering can be performed.
This scheduling can be regarded as the completion of an event loop. One event loop = macro task (the first time is synchronization code) + micro task

requestAnimationFrame(rAF)

What

requestAnimationFrame is a new API in H5 similar to setTimeout, which tells the browser to execute before re-rendering the screen. The main use is to redraw web pages frame by frame.

rAF is an officially recommended API that should be used to make some smooth animations. When making animations, it is inevitable to change the DOM. If you change the DOM after rendering, you can only wait until the next round of rendering opportunities. Went to draw it

Advantages
Calling time: Called before re-rendering.
The biggest advantage of requestAnimationFrame is that the system determines the execution timing of the callback function. Ensure that the callback function is only executed once during each screen refresh interval to avoid frame loss

If the browser does not render, will requestAnimationFrame not be called? If requestAnimationFrame does too many things, it will cause frequency reduction, such as refreshing 60 times per second instead of refreshing 30 times per second.

requestAnimationFrame API

Basic syntax: requestAnimationFrame (callback)
Return value: The only value in the callback function list. You can use cancelAnimationFrame to pass in the request ID to cancel the callback function.

Description

1. requestAnimationFrame does not manage callback functions, which means calling requestAnimationFrame with the same callback function multiple times will cause the callback to be executed multiple times in the same frame.
   The return value of rAF is the only value in the callback function list. It can be understood that even if it is the same callback function, the values in the callback function list are different.
   So use it with cancelAnimationFrame.
2. When requestAnimationFrame() is running in a background tab or a hidden