1. Why is javascript single threaded?

It has something to do with the original design of javascript. At the earliest, javascript was a scripting language running in the browser to realize dynamic interaction on the page. Dom operation is the core of realizing the page, so javascript is a single thread, otherwise there will be thread synchronization problem:

For example, when multiple threads operate on a DOM element at the same time, the browser does not know which operation to take, causing the code to execute out of order

Javascript is single-threaded, which means that the browser has multiple tasks queued up to be completed one by one. The advantage of this mode is that it is safer. The downside is that if we encounter a particularly time-consuming task, subsequent tasks will wait for that task to complete, which will cause the page to freeze and cause congestion.

The javascript language can’t handle a large number of time-consuming tasks. To address this problem, javascript divides execution tasks into two modes: synchronous and asynchronous

2. Synchronization mode

Synchronous mode means that our javascript code should be executed sequentially, and the following code should wait for the completion of the previous line of code to be executed in a queue. Most javascript codes are executed in synchronous mode

3. Asynchronous mode

Asynchronous mode means that our javascript code doesn’t wait for the previous code to finish executing.

We will perform the code into the call stack, if it is direct execution of synchronization, if is asynchronous in the message queue, to be performed, wait until all of the code has been completed our event loop to play, it can monitor the call stack and tasks in the message queue, when after all the tasks in the call stack, It pulls the callback functions from the message queue and pushes them onto the call stack to start executing until the loop ends

4. Event Loop

The main thread reads events from the message queue in a Loop, so the whole mechanism is called an Event Loop. The Event Loop is the javascript execution mechanism

5. Message queues

The message queue is a place where asynchronous tasks are temporarily stored. Our asynchronous code will be stored in the message queue. After the synchronous code execution is completed, the Event loop will take out asynchronous tasks from the message queue and put them into the call stack for execution again.

6. Macro tasks, micro tasks

Macro task: the code executed in the current call stack becomes the macro task, including the main code fast, timer microtask: the macro task is executed, the next macro task before the start of the task, can be understood as a callback function

Operation mechanism:

  1. Executes a macro task in the execution stack
  2. When a microtask is encountered during execution, add the microtask to the message queue
  3. The task in the microtask queue is executed immediately after the current macro task is executed
  4. After the microtask is completed, the next macro task is placed in the message queue and placed in the call stack via eventLoop for execution.

Summary of exercises