Title description:

Differences between browser and Node event loops

Problem solving:

  • Idea 1:

  • One of the main differences is that the browser event loop and nodeJS event loop handle asynchronous events in a different order. Nodejs has micro events; Where Promise belongs to Micro Event, the asynchronous event is processed in a different order than the browser. Nodejs V11.0 has the same order between them

function test () {
   console.log('start')
    setTimeout((a)= > {
        console.log('children2')
        Promise.resolve().then((a)= > {console.log('children2-1')})},0)
    setTimeout((a)= > {
        console.log('children3')
        Promise.resolve().then((a)= > {console.log('children3-1')})},0)
    Promise.resolve().then((a)= > {console.log('children1')})
    console.log('end')
}

test()

// The result of executing the above code below node11 (all macro tasks first, then micro tasks)
// start
// end
// children1
// children2
// children3
// children2-1
// children3-1

// The result of executing the above code on node11 and the browser (macro tasks and micro tasks in sequence)
// start
// end
// children1
// children2
// children2-1
// children3
// children3-1
Copy the code
  • Idea 2:

The browser

The order in which microtasks and macro tasks are executed in the browser is as follows:

  • Executing a Task (macro task)
  • Finish executing the Micro-Task queue (microtask)
  • And so the cycle continues

Html# event-Loops loops do not translate common macro tasks such as setTimeout, setInterval, script, I/O operations, UI rendering, etc. Common micro-tasks include: New Promise().then(callback), MutationObserver(new HTML5 feature), etc.

Node

Node’s event loop is implemented by Libuv.

  • Timers: This stage executes the scheduled setTimeout() and setInterval() callbacks.
  • Pending callbacks: I/O callbacks that are deferred until the next iteration of the loop.
  • Idle, prepare: used only in the system.
  • Poll: Retrieves new I/O events. Performing I/ O-related callbacks (in almost all cases, except for closed callback functions, which are scheduled by timers and setImmediate()), node blocks here.
  • Check detection: The setImmediate() callback function executes here.
  • Close callbacks: some callback functions that are ready to be closed, such as socket.on(‘close’,…) .
The order in which microtasks and macro tasks are executed in Node

Before Node 10:

  • Complete all missions in a phase

  • Finish executing the nextTick queue

  • After executing the contents of the microtask queue Node 11:

  • This is consistent with the browser’s behavior of completing the microtask queue every time a macro task is executed.

  • Thought three? :

:point_down:~~~~ Feel free to add your answers in the comments below.

Read more:

  • The most complete Event Loop (Event Loop) mechanism and examples – digging gold
  • Do you really understand redraw and reflux?
  • From browser multi process to JS single thread, JS running mechanism is the most comprehensive combing
  • Processes and threads in Node.js

❤️ watch two little things

If you find this article inspiring, I’d like you to do me two small favors:

Share this article with your friends/communication group, let more people see it, progress together, grow together!

Pay attention to the public number “IT square head brother alliance”, the public number background reply “resources” free of charge to get my carefully organized front-end advanced resources tutorial

www.javascriptC.com is a platform dedicated to helping developers change the world with code. You can find the top content in the technology world here every day