More articles

preface

Sort out the event mechanism, mainly the browser, which Node doesn’t delve into, and doesn’t say much about, node

Event Loop

  • jsisSingle threadthe
  • Single threaded tasks are divided intoSynchronization taskandAsynchronous tasks
  • Asynchronous tasksIs divided intoMacro task(MacroTask) andMicro tasks(MicroTask)

Here’s how the Event Loop is executed:

Starting from the script, in order to enter task execution stack, and synchronize tasks are executed directly in the main thread, when you meet the asynchronous task asynchronous task will enter the asynchronous processing module and register the corresponding callback function, after the completion of the registered callback function into the task queue (micro tasks into micro task queue, confronted with a task macro to open a new macro task queue). When the execution stack is empty after the synchronization task is executed, the system executes the tasks in the stack one by one. Before each macro task is executed, the system checks whether there are microtasks. If there are microtasks, all tasks in the microtask queue are executed before the macro task is executed

Each macro task opens a new task queue, and only a small task queue, macro tasks that the new task, micro tasks will join the task queue, so when you start a new macro tasks, if there is a new task in the micro task queue, again micro tasks first, and see a demo:

console.log(1)
setTimeout(() = >{
    console.log(2)
    Promise.resolve(3).then(res= >console.log(res))
}, 0)
setTimeout(() = >{
    console.log(4)},0)
Promise.resolve(5).then(res= >console.log(res))
console.log(6)
// Execution result: 1 6 5 2 3 4
// 1 6 5 2: Normal logical synchronization => micro task => macro task
// Execute 4 to check if there are any tasks in the microtask queue, then execute 3, then execute macro task 4
Copy the code

Macro tasks & micro tasks

Common macro tasks:

  • Script (global task)
  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI render

Common microtasks:

  • Promise.then()/catch()/finally()
  • MutationObserver
  • process.nextTick(node.js)

The difference between:

Macro task Micro tasks
Who initiated The node/browser Js engine
Running successively after First,
Trigger a new Tick. will Don’t

If an interviewer asks you what a macro task is and what a micro task is, and you’ve already said a lot, why not tell them the difference

setTimeout&requestAnimationFrame

  • setTimeout

W3C stipulated in THE HTML standard that setTimeout interval below 4ms is counted as 4ms

SetTimeout (similar to setInterval) is often used for animation, but according to the Event Loop mechanism we learned earlier, setTimeout does not actually execute according to the actual set time, as follows:

const startTime = new Date().getTime();
setTimeout(() = >{
  console.log(` time:The ${new Date().getTime()-startTime}`); // Time difference: 1348
},1000);
for(let i = 0; i<10000; i++){console.log(1)}// We set the execution time to 1s, but the actual execution time will exceed 1s
Copy the code

Another problem is that the refresh frequency is affected by the screen resolution and screen size, so we cannot determine the refresh frequency of the screen, and setTimeout can only set a fixed value, so the time when we update the animation will be inconsistent with the screen refresh frequency, leading to the problem of frame loss

  • requestAnimationFrame

RequestAnimationFrame (function) tells the browser that you want to execute an animation and asks the browser to call the specified callback to update the animation before the next redraw, i.e. the timing of updating the animation is up to the browser

The other two advantages are:

CPU saving: Page hidden (not visible), animation stopped

Browser optimization: The browser has optimized the requestAnimationFrame animation

Looking at some three.js earlier, the animation is almost always requestAnimationFrame

conclusion

Peach wood in the peach blossom nunnery, peach flower nunnery under peach fairy. Peach blossom immortal planted peach trees, and pick peach blossom for wine money! The good life!