Event Loop

Personal notes – for reference only

Processes and threads

Process: ‾\underline{process:} Process: The core of the computer is the CPU, which does all the computing in progress. Each workshop is responsible for a different task. For an operating system: a task is a process. The kernel of CUP can control the number of concurrent processes. Usually the number of tasks is greater than the number of cores in the CUP, and the operating system takes turns to alternate tasks. (4) Threads, which is ‾\underline{thread:} Threads: Multiple workers (threads) complete their tasks through the entrance and exit (I/O) of each workshop (process). Can share resources through (I/O); Seize resources, kernel shackles;

In most cases, a process can only perform one task at a time if there are more than one process:} In most cases, a process can only perform one task at a time if there are more than one process: Because a process can only perform one task, you can wait for the previous task to complete before proceeding to the later task. New process 1: Use the fork command to create a new process for each task. New process 2: Because the process is too expensive, you can use a process containing multiple threads to complete the task.

Event Loop is proposed

JavaScript is a single-threaded language where all tasks are done on a single process. If queuing is used, if a large number of threaded tasks are encountered, the page will appear “suspended” state. Unable to respond to user operations in time. Multithreading, which can share resources and potentially tamper with each other’s results, is too complex for the JavaScript browser scripting language.

The green part is the program run time, and the red part is the request response time. Because (I/O) operations are slow, this thread spends most of its time waiting for results to return. This mode of operation is also known as synchronous mode (I/O) or blocking mode. Multiple threads occupy multiple system resources and idle multiple resources at the same time. Event Loop was created to solve this problem.

Role definition

EventLoop is a program structure for waiting and sending messages and events. ‾\underline{Event Loop is a program structure for waiting and sending messages and events. }EventLoop is a program structure for waiting and sending messages and events. Two processes are set up in the program: one is responsible for the running of the program itself, called the “main thread”; The other is responsible for communication between the main thread and other processes ((I/O) operations). It’s called an Event Loop thread.

The main thread is run time in green and idle time in orange. Whenever an I/O operation is encountered, the main thread tells the Event Loop to notify the responding I/O program. It continues backwards, so there is no red wait time. After the I/O program completes, the Event Loop thread returns the results to the main thread. The main thread calls the preset callback function to complete the task. Since the orange area is free time, the main thread can run more tasks, improving efficiency. It’s called “asynchronous mode or non-blocking mode.”

const foo = () = > console.log("First");
const bar = () = > setTimeout(() = > console.log("Second"), 500);
const baz = () = > console.log("Third");

bar();
foo();
baz();
Copy the code

The task notified by Event Loop can be called macro task, and the task not notified by Event Loop can be called micro task.

4, ‾\underline{exercises 题 :}

var a = 10;
console.log("Script start execution : No1 ===>", a);
function init () {
    var b = 20;
    async function async1 () {
        console.log("Function async1 start execution : No3 ===>", b);
        await async2();
        console.log("Function async2 end execution : No8 ===>", a);
    }
    console.log("Init function in execution : No2 ===>", a);
    async function async2 () {
        a += 30;
        console.log("Function async2 start execution : No4===>", b);
    }
    async1();
    setTimeout(() = >{
        console.log("SetTimeout execution : No11 ===>", b);
    },0)
    var d = undefined;
    new Promise((resolve) = > {
        var c = 40;
        b = 60;
        console.log("Promise start execution : No5 ===>", c);
        resolve();
    }).then(function () {
        c = 50;
        console.log("Promise end execution : No9 ===>", c);
    }).then(function () {
        console.log("Promise error : No10 ===>", d);
    })
    console.log("Init function end in execution : No6 ===>", b);
}
init();
console.log("Script end execution : No7 ===>", a);
Copy the code

Refer to the article

Blog.csdn.net/MFWSCQ/arti…

www.jianshu.com/p/bfc3e319a…