阅读 84

Event Loop

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 为解决此问题诞生。

作用定义

EventLoop是一个程序结构,用于等待和发送消息和事件。\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();
复制代码

inout.gif

被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…

www.jianshu.com/p/bfc3e319a…

文章分类
前端
文章标签