This is the 18th day of my participation in the August More Text Challenge.

preface

Nodejs has an event loop as well. After reviewing many sources, it seems that putting these two event loops together doesn’t serve any purpose other than to make it more difficult to understand. Or separate first, and finally compare.

Event loop mechanism in browser environment

Execution stack and event queue

The execution stack corresponds to synchronous execution, which was explored earlier. A function call generates the execution context of the function, and the execution context of the function is pushed. The execution context of a function includes the variable space, outer to the parent execution context, this pointer, and lexical scope. When the function completes and the variable is still referenced, the variable is not destroyed and remains in memory as a closure. When the function is finished executing and there are no referenced variables, the execution context is removed from the stack.

This whole process is done synchronously.

When you encounter code that needs to be executed asynchronously, such as ajax requests for data, you need to use the concept of an event queue.

Asynchronous code execution flow

1. Instead of waiting for the result of an asynchronous event, the JS engine suspends the event and continues to perform other tasks in the execution stack.

2. When an asynchronous event returns a result, JS adds the event to the event queue.

3. It does not execute its callback immediately after being put into the event queue. Instead, it waits for all tasks in the current execution stack to complete, and when the main thread is idle, it will check whether there are any tasks 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 is why the process is called an Event Loop.

Macro Tasks (commonly known as Task Queues) and Micro Tasks

while(taskQueues.length! = = 0) {stack. Push (taskQueues. Shift ()) stack code / / / / executed this stack there will be a change in the process The execution of function into the stack / / this process may be generated by micro tasks cause microTasks queue length changes while(microTasks.length! ==0){microtasks.shift () // Perform microTasks} stack.pop()}Copy the code

Summary:

Key points of the browser-side event loop execution mechanism:

1. Single threading of JavaScript (introducing multiple threads and manipulating DOM elements at the same time causes problems)

2. Javascript asynchronous operations are executed by other threads of the browser, and the callback function is added to the task queue (generally not specifically referred to as macro tasks, macro queues) after execution.

3. Understand the process of event cycle in the execution process of JavaScirpt, focusing on task queue (macro task) and execution stack. When the stack is empty, it is good to execute the tasks in the microtask queue one by one, without over-parsing.

4. Microtasks, mainly for fine-grained asynchronous tasks. (Macro tasks, by contrast, are coarse-grained. The HTML5 specification specifies a delay of at least 4ms.)