Recently, I encountered the event-loop in the process of learning Node.js. I will summarize my own experience and share it with you.

Is Javascript really single-threaded?

Those of you who are familiar with Javascript know that Javascript runs in a single thread, so if you put an alert in your code, the system pops a box for you, and the rest of the code blocks, which it does. Because if the system gives you the new Thread function, two threads update a DOM at the same time, there will be no fight.

In many cases, asynchro is needed to improve the user experience. So the Promise, Callback, setTimeoutt, setInterval, And asynchronous programming interfaces like Ajax, which we use most often, allow us to develop products that are better user experience.

Then again, if these asynchronous programming interfaces are used in a project, how they work, and how to effectively control their running order, we need to figure out, and share briefly below.

Before we start, let’s talk about processes and Threads.

Why process and thread, I use the most simple and popular words, you use the browser Chrome, is a multi-process browser; The setTimeout, setInterval, XMLHttpRequest classes that you write in development, are new threads that open up in a process.

What a mess. Don’t worry. Draw pictures.

As you can see from the image above, a Chrome page is a web page, which is also a process. At the same time, in a web page, we’ll write a lot of code with API calls like Promise, Callback, setTimeoutt, setInterval, Ajax(XMLHttpRequest class) that will start their own thread to run, A web page (process) contains multiple threads.

  • The browser event trigger thread (used to control the event loop and hold setTimeout, browser events, ajax callback functions)
  • Timer trigger thread (setTimeout timer thread)
  • Asynchronous HTTP request thread (Ajax request thread)

Event-loop for browsers

  1. All synchronization tasks are executed on the main thread in the Stack memory diagram (the Stack box), forming an execution Stack, which also represents the scope Stack.
  2. In addition to the main thread, there is a task queue (callback Quere box). Whenever an asynchronous task (thread by thread) has a run result, an event (callback function) is placed in the task queue.
  3. Once all synchronization tasks in the execution stack are completed, the system reads the task queue and puts the events in the queue (callback functions) into the execution stack to be executed in sequence
  4. The main thread reads events from the task queue in a continuous loop.

Event-loop for Node.js

  1. The Node.js code we write is handed over to the V8 engine for processing.
  2. The Node.js Api (setTimeout, setInterval, setImmediate, I/O, Process. nextTick, Promise, etc.) may be called in the code, and node is turned over to the Libuv library.
  3. Libuv implements asynchronous IO through blocking operations and multi-threading, which means that libuv is completely asynchronous internally, which is the core of Node.js’s biggest feature, event-driven.
  4. Through event-driven (Callback function), the result is put into the event queue and finally handed to our application.

Macro and micro tasks

Task queues can be divided into macro tasks and micro tasks

Macro-task: Script (global task), setTimeout, setInterval, setImmediate, I/O, UI rendering.

Micro-task: Process. nextTick, native Promise(some implemented promises put then methods in macro tasks), Object.observe(deprecated), MutationObserver

Javascript Event-loop simplification (2)