Processes and threads

  1. process

Describes how long it takes the CPU to run an instruction and load and save the context

  1. thread

A smaller unit of a process that describes how long it takes to execute an instruction

JS is a single threaded language. What are the benefits of JS being single threaded

Js engine in js runtime blocking the UI rendering (rendering engine work) = = js engine threads and page rendering threads are mutually exclusive Because js can modify the dom structure, if the js UI thread was at work, can lead to unsafe UI rendering, thanks to the js is a single thread, can run to save memory, Saves the time of context switching

What is an eventloop?

As mentioned above, JS language is a single-threaded language, which can only execute one instruction at a certain time. Js code is divided into synchronous code and asynchronous code. In the event cycle, synchronous code is executed first, while asynchronous code (macro task and micro task) is executed after the completion of synchronous code execution.

Execution process:

  1. The synchronous code enters the main thread and executes immediately. The asynchronous code enters the event table event and registers the function.

  2. When the specified Event completes, the Event Table moves this function to the Event Queue.

  3. When the synchronous code is finished (the main thread is empty), the (read asynchronous function) will go to the Event Queue to read the corresponding function and enter the main thread to execute.

  4. This process is repeated over and over again, called an eventloop.

This picture is borrowed from another author

Next we use code to analyze:

SetTimeout (()=>{console.log(' I am the code inside the timer ')}) console.log(' I am the synchronization code ')Copy the code

Conclusion: Synchronous code is executed before asynchronous code is executed

As mentioned above, when the synchronous code on the main thread is finished executing, the asynchronous code is executed on the main thread. Asynchronous tasks can also be divided into macro tasks and micro tasks.

SetTimeout (() => {console.log(' timer '); new Promise((reslove) => { console.log('setTimeout Promise'); reslove() }).then(() => { console.log('setTimeout then'); }) }) new Promise((reslove) => { console.log('Promise'); reslove() }).then(() => { console.log('then'); }) console.log('sss');Copy the code

In this code, there are synchronous tasks and asynchronous tasks. Let’s first distinguish synchronous tasks from asynchronous tasks (in this code, asynchronous tasks include synchronous tasks).

  1. Synchronization task: -. Separate console.log -. New Promise

  2. Asynchronous tasks: setTimeout,new Promise. Then ()

  3. 1. Macro task: setTimeout 2. Micro task:.then()

Parsing code :(micro tasks are executed before macro tasks)

The code is read from the top, the first setTimeout is put into the asynchronous task, and the first newPromise is executed by the synchronous task, printing the Promise, Then () (this is a microtask) is put into the event queue, and console.log is a synchronous task, which enters the main thread to execute the output SSS first, while the asynchronous task ahead is waiting. If () then() then() then() then() then() then() then() then() then() then() then() then() then() then() then() then() then() Output timer, setTimeout Promise, setTimeout then

Let’s summarize: Macrotask and Microtask

What is macro task: script, setTimeout and setInterval, setImmediate, I/O, promise what is micro tasks: process. NextTick, promise. Then, MutationObserver

Again: Promises are macro tasks (executed synchronously), but Promise callbacks are asynchronous tasks that execute after synchronous tasks (such as then, catch, finally).