Event Loop

此图来自网络个人笔记 - 仅供参考

进程和线程

$\underline{进程：}$
计算机的核心是CPU，承担了所有执行中的计算任务。
每个车间负责不同的任务。对于操作系统来说：一个任务就相当于一个进程。
CUP的内核可以控制同时执行进程的数量。
通常任务数量大于CUP的内核数量，操作系统轮流让各个任务交替执行。

$\underline{线程：}$
多个工人(线程)可通过每个车间(进程)的入口和出口(I/O)，完成自己的任务。
可通过(I/O)共享资源；
抢占资源，内核枷锁；

$\underline{通常情况下一个进程同时只能执行一个任务如果存在多个进程时：}$
排队：因为一个进程只能执行一个任务，可通过等待前面的任务完成后再进行后面的任务。
新建进程1：使用fork命令，为每个任务新建一个进程。
新建进程2：因为进程太耗费资源，所以可通过一个进程包含多个线程，由线程完成任务。

Event Loop 的提出

JavaScript 是单线程语言，所有任务都在一个进程上完成。
如果采用排队的方式，如果遇到大量的线程任务，页面会出现“假死”的状态。无法及时响应用户的操作。

多线程可共享资源、且有可能篡改彼此的运行结果，对于JavaScript浏览器脚本语言来说太过复杂。

绿色部分为程序运行时间，红色部分为请求响应时间。由于(I/O)操作很慢，所以此线程的大部分时间都在等待返回结果。这种运行方式也被称为“同步模式(I/O)或堵塞模式”。

多线程占用多倍系统资源，同时也闲置多倍资源。
Event Loop 为解决此问题诞生。

作用定义

$\underline{Event Loop 是一个程序结构，用于等待和发送消息和事件。}$
在程序中设置两个进程：一个负责程序本身的运行，称为“主线程”；另一个负责主线程与其他进程（(I/O)操作）的通信。被称为“Event Loop线程”

主线程绿色部分，表示运行时间，橙色部分表示空闲时间。每当遇到I/O操作时，主线程会让Event Loop通知响应的I/O程序。继续向后运行，所以不存在红色的等待时间。等待I/O程序执行完成后，Event Loop 线程再把结果返回主线程。主线程调用事先设定的回调函数，完成整个任务。

由于橙色区域为空闲时间，主线程可运行更多的任务，提高了效率。被称为“异步模式或非阻塞模式”

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

bar();
foo();
baz();

被Event Loop通知响应的任务可称宏任务，没有被Event Loop通知的任务可称微任务。

$\underline{练习题目：}$

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);

参考文章

blog.csdn.net/MFWSCQ/arti…