web worker

  • Single thread not only ensures the execution order but also limits the efficiency of javaScript, so Web worker technology is developed. This technology makes javaScript a multithreaded language.
Multithreading with Web Worker technology has many limitations
  • All new threads are completely controlled by the main thread and cannot execute independently. This means that these “threads” actually belong to the child threads of the main thread
  • These child threads do not have permission to perform I/O operations and can only share some tasks such as computation with the main thread
  • Strictly speaking, these threads are not fully functional, so this technique does not change the single-threaded nature of the javascript language

Browser environment js engine event loop mechanism

Execution stack and event queue
  • As javaScript code executes, different variables are stored in different locations in memory: heap and stack
  • The stack holds some basic types of variables and Pointers to objects
  • There are some objects in the heap
  1. Execution stack
  • When a method is called, JS generates the corresponding execution environment of the method, called the execution context
  • The execution environment contains the method’s private scope, the pointer to the upper scope, the method’s parameters, the defined variables, and the scoped this object
  • Js is single-threaded and can only execute one method at a time, so these methods are queued on the execution stack.
  1. Js code execution
  • When a script is executed for the first time, the JS engine parses the code, adds the synchronized code to the stack in the order it is executed, and then starts from scratch
  • When a method is executed, js adds the method’s execution environment to the execution stack, and then enters the execution environment to continue executing the code
  • When the code in this execution environment completes and returns the result, the JS exits the execution environment and is destroyed, returning to the previous execution environment
  1. The event queue
  • Instead of waiting for an asynchronous event to return a result, the JS engine suspends the event and continues to perform other tasks in the execution stack.
  • When an asynchronous event returns a result, JS adds the event to a different queue from the current stack, called the event queue
  • Being placed on an event queue does not execute its callback immediately, but instead waits for all tasks in the current execution stack to complete
  • When the main thread is idle, it looks for any work in the event queue. If so, the main thread will fetch the first event, place the corresponding callback on the stack, and execute the synchronization code. And so on and so on and so on and so on and so on and so on and so on and so on. This process is called the “event loop.

The stack represents what we call the execution stack, the Web apis represent asynchronous events, and the callback queue is the event queue.

Macro Task vs. Micro Task

  1. Different asynchronous events are classified into two categories
  • Macro task

setInterval() setTimeout()

  • Micro tasks

new Promise() new MutaionObserver()

  • When the execution queue is empty, the main thread checks for events on the microtask queue. If not, fetch an event from the macro task queue and add the corresponding event back to the current stack. If it exists, it will execute the corresponding callback of the events in the queue, until the microtask queue is empty, and then fetch the first event from the macro task queue.
  • The pre-execution stack immediately processes all events in the microtask queue before fetching an event from the macro task queue. Microtasks are always executed before macro tasks in the same event loop.
setTimeout(function() {
    console.log(1);
});

new Promise(function(resolve, reject) {
    console.log(2)
    resolve(3)
}).then(function(val) {
    console.log(val);
})

console.log(4)
/ / 2 3 4 1
Copy the code
  • Inside the promise parentheses is the execute now function. So print 2 first