This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

I. Event loop mechanism

Macro task

It’s a big, independent task. The browser completes one macro task and rerenders the page before the next macro task executes. It mainly includes creating document objects, parsing HTML, executing main JS code, running scripts and various events such as page loading, user input, Ajax, timer setTimeout and so on

Micro tasks

Is a task that is executed immediately (in batches) after the execution of the current macro task. If there are microtasks, the browser will clear them before rerendering the page. For example, promise. then callback functions, DOM changes, etc.

Here you can guess the execution order of macro and micro tasks:

console.log('1');

setTimeout(function () {
  console.log('2');
}, 0);

Promise.resolve()
  .then(function () {
    console.log('3');
  })
  .then(function () {
    console.log('4');
  });

console.log('5');
Copy the code

Resolution:

The two console. logs in the above code are always executed first by the synchronization code, so the answer is 1,5

Then it’s up to the setTimeout or the promise to execute first

  • Since setTimeout is a macro task, it is executed last, even if the delay time is 0
  • Resolve is a microtask that executes 3 and 4 twice.

The order of execution is: 1,5,3,4,2

Conclusion: Sync code is executed first, then microtask is executed, then macro task is executed immediately after macro task is executed, then browser render

You can click: to experience the sequence of macro and micro tasks

The Event Loop mechanism

Because the browser needs to deal with JS, script execution, event parsing, rendering, etc., some of which are synchronous and some of which are asynchronous, it is very complex and not coordinated, so it needs event loop mechanism.

This is how the browser works to coordinate tasks such as event handling, script execution, network requests, and rendering

Vue batch asynchronous update strategy

Vue uses nextTick to implement asynchronous updates in flushSchedulerQueue

asynchronous

Vue update() method (address: core observer watcher.js), dep.notify() after watcher perform the update, perform the queue operation.

Whenever a change is detected, vUE opens a queue and caches all data updates that occur in the same event loop.

batch

If a watcher is fired multiple times, it is pushed to the queue only once, and de-duplication (each watcher has a unique ID) avoids unnecessary computational work and DOM manipulation. Then in the next event loop, vUE flushes the queue to do the actual work.

The asynchronous strategy

Vue internally performs batch tasks for asynchronous queues using promise. then, MutationObserver, or setImmediate, or replaces them with macro task setTimeout if those environments do not support it.

nextTick(flushSchedulerQueue); FlushSchedulerQueue is asynchronously put into the microtask queue. TimerFunc () is then executed asynchronously, as promised. Then and MutationObserver determine whether the environment supports final notification updates;

Finally asynchronous update series to write relatively simple, we had better download the source code with a breakpoint to see the execution order will be more deep, finally thank you for reading ~