事件循环机制

时间  2019-12-09
标签 事件 循环 机制 繁體版
原文   原文链接
将本身读到的比较好的文章分享出来，你们互相学习，各位大佬有好的文章也能够留个连接互相学习，万分感谢！

线程与进程

关于线程与进程的关系能够用下面的图进行说明：ios

clipboard.png

  • 进程比如图中的工厂，有单独的专属本身的工厂资源。
  • 线程比如图中的工人，多个工人在一个工厂中协做工做，工厂与工人是 1:n的关系。
  • 多个工厂之间独立存在。

而官方的说法是：git

  • 进程是 CPU资源分配的最小单位。
  • 线程是 CPU调度的最小单位。

从更直观的例子来看，能够打开任务管理器查看，第一个 tab即是进程列表，每个进程占有的 CPU资源和内存资源的比例很直观的展现出来。github

clipboard.png

为何js是单线程

初学计算机语言的时候，不管是 C、C++仍是 JAVA，都是支持多线程，恰恰 JavaScript是单线程，不支持多线程，这也跟 JavaScript的做用有关，都知道 JavaScript是主要运行在浏览器的脚本语言，最终操做的是页面的 DOM结构，当两个 JavaScript脚本同时修改页面的同一个 DOM节点时，浏览器该执行哪一个呢？因此当时设计 JavaScript时，便要求当前修改操做完成后方可进行下一步修改操做。ajax

浏览器是支持多进程

一样咱们打开浏览器的任务管理器，如下图为例：浏览器

clipboard.png

浏览器的每个 tab页都是一个进程，有对应的内存占用空间、 CPU使用量以及进程ID。 新打开一个 tab页时，都会新建一个进程，因此就有一个 tab页对应一个进程的说法，可是这种说法又是错误的，由于浏览器有本身的优化机制，当咱们打开多个空白的 tab页时，浏览器会将这多个空白页的进程合并为一个，从而减小了进程的数量个数。多线程

浏览器内核

浏览器内核中有多个进程在同步工做，今天涉及到的浏览器的进程主要包括如下进程：异步

  • Browser 进程

主进程，主要负责页面管理以及管理其余进程的建立和销毁等，常驻的线程有：函数

  • GUI渲染线程
  • JS引擎线程
  • 事件触发线程
  • 定时器触发线程
  • HTTP请求线程

GUI渲染线程oop

  • 主要负责页面的渲染，解析HTML、CSS，构建DOM树，布局和绘制等。
  • 当界面须要重绘或者因为某种操做引起回流时，将执行该线程。
  • 该线程与JS引擎线程互斥，当执行JS引擎线程时，GUI渲染会被挂起，当任务队列空闲时，JS引擎才会去执行GUI渲染。

JS引擎线程布局

  • 该线程固然是主要负责处理 JavaScript脚本，执行代码。
  • 也是主要负责执行准备好待执行的事件，即定时器计数结束，或者异步请求成功并正确返回时，将依次进入任务队列，等待 JS引擎线程的执行。
  • 固然，该线程与 GUI渲染线程互斥，当 JS引擎线程执行 JavaScript脚本时间过长，将致使页面渲染的阻塞。

事件触发线程

  • 主要负责将准备好的事件交给 JS引擎线程执行。
  • 好比 setTimeout定时器计数结束， ajax等异步请求成功并触发回调函数，或者用户触发点击事件时，该线程会将整装待发的事件依次加入到任务队列的队尾，等待 JS引擎线程的执行。

定时器触发线程

  • 顾名思义，负责执行异步定时器一类的函数的线程，如： setTimeout，setInterval。
  • 主线程依次执行代码时，遇到定时器，会将定时器交给该线程处理，当计数完毕后，事件触发线程会将计数完毕后的事件加入到任务队列的尾部，等待JS引擎线程执行。

HTTP请求线程

  • 顾名思义，负责执行异步请求一类的函数的线程，如： Promise，anxios，ajax等。
  • 主线程依次执行代码时，遇到异步请求，会将函数交给该线程处理，当监听到状态码变动，若是有回调函数，事件触发线程会将回调函数加入到任务队列的尾部，等待JS引擎线程执行。

多个线程之间配合工做，各司其职。

  • Render 进程
浏览器渲染进程（浏览器内核），主要负责页面的渲染、JS执行以及事件的循环。

同步任务和异步任务

  • 同步任务 便可以当即执行的任务，例如 console.log() 打印一条日志、声明一个变量或者执行一次加法操做等。
  • 异步任务 相反不会当即执行的事件任务。异步任务包括宏任务和微任务(后面会进行解释~)。

  • 常见的异步操做：

    • Ajax
    • DOM的事件操做
    • setTimeout
    • Promise的then方法
    • Node的读取文件

下图给出了同步任务与异步任务的执行流程：

clipboard.png

  • 栈 就像是一个容器，任务都是在栈中执行。
  • 主线程 就像是操做员，负责执行栈中的任务。
  • 任务队列 就像是等待被加工的物品。
  • 异步任务完成注册后会将回调函数加入任务队列等待主线程执行。
  • 执行栈中的同步任务执行完毕后，会查看并读取任务队列中的事件函数，因而任务队列的函数结束等待状态，进入执行栈，开始执行。

那么任务究竟是如何入栈和出栈的呢？能够用一小段代码进行解释。

入栈与出栈

如下面的代码为例：

console.log(1);
    function fn1(){
        console.log(2);
    }
    function fn2(){
        console.log(3);
        fn1();
    }
    setTimeout(function(){
        console.log(4);
    }, 2000);
    fn2();
    console.log(5);

clipboard.png

因此上面代码运行的结果为：1,3,2,5,4。

宏任务和微任务

异步任务分为宏任务和微任务，宏任务队列能够有多个，微任务队列只有一个。

宏任务和微任务的执行方式在浏览器和 Node 中有差别。

宏任务（macrotask）

script(全局任务)， setTimeout， setInterval， setImmediate， I/O， UI rendering

微任务（macrotask）

process.nextTick， Promise.then()， Object.observe， MutationObserver

在微任务中 process.nextTick 优先级高于Promise

当一个异步任务入栈时，主线程判断该任务为异步任务，并把该任务交给异步处理模块处理，当异步处理模块处理完打到触发条件时，根据任务的类型，将回调函数压入任务队列。

  • 若是是宏任务，则新增一个宏任务队列，任务队列中的宏任务能够有多个来源。
  • 若是是微任务，则直接压入微任务队列。

因此上图的任务队列能够继续细化一下：

clipboard.png

那么当栈为空时，宏任务和微任务的执行机制又是什么呢？

Event Loop

到这里，除了上面的问题，咱们已经把事件循环的最基本的处理方式搞清楚了，但具体到异步任务中的宏任务和微任务，尚未弄明白。咱们能够先顺一遍执行机制：

  • 从全局任务 script开始，任务依次进入栈中，被主线程执行，执行完后出栈。
  • 遇到异步任务，交给异步处理模块处理，对应的异步处理线程处理异步任务须要的操做，例如定时器的计数和异步请求监听状态的变动。
  • 当异步任务达到可执行状态时，事件触发线程将回调函数加入任务队列，等待栈为空时，依次进入栈中执行。

到这问题就来了，当异步任务进入栈执行时，是宏任务仍是微任务呢？

  • 因为执行代码入口都是全局任务 script，而全局任务属于宏任务，因此当栈为空，同步任务任务执行完毕时，会先执行微任务队列里的任务。
  • 微任务队列里的任务所有执行完毕后，会读取宏任务队列中拍最前的任务。
  • 执行宏任务的过程当中，遇到微任务，依次加入微任务队列。
  • 栈空后，再次读取微任务队列里的任务，依次类推。

实例解析

回到最开始的那段代码，如今咱们能够一步一步的看一下执行顺序。

console.log(1);
setTimeout(function(){
    console.log(2);
}, 0);
setTimeout(function(){
    console.log(3)
},2000)
console.log(4);
  • 从全局任务入口，首先打印日志 1，
  • 遇到宏任务 setTimeout，交给异步处理模块，咱们暂且先记为 setTimeout1，
  • 再次遇到宏任务 setTimeout，交给异步处理模块，咱们暂且先记为 setTimeout2，
  • 顺序执行，打印日志 4，
  • 此时同步任务已执行完毕，读取宏任务队列的任务，先执行 setTimeout1的回调函数，由于定时器的等待时间为 0秒，因此会直接输出 2，可是 W3C在 HTML标准中规定，规定要求 setTimeout中低于 4ms的时间间隔算为 4ms，
  • 因为浏览器在执行以上三步时，并未耗时好久，因此当宏任务 setTimeout1执行完时， setTimeout2的等待时间并未结束，因此在 2秒后打印日志 3，实际上并未等待2秒。

下面咱们能够再看一个实例：

setTimeout(function(){
        console.log(1);
        Promise.resolve().then(function(){
            console.log(2)
        })
    },0)

    setTimeout(function(){
        console.log(3)
    },0)
    Promise.resolve().then(function(){
        console.log(4)
    });
    console.log(5)

当代码中遇到了异步请求的事件，又该如何执行，根据上面总结的执行机制，又该获得什么样的结果？

第一轮循环

  • 一样从全局任务入口，遇到宏任务 setTimeout，交给异步处理模块，咱们暂且先记为 setTimeout1，因为等待时间为 0，直接加入宏任务队列。
  • 再次遇到宏任务 setTimeout，交给异步处理模块，咱们暂且先记为 setTimeout2，一样直接加入宏任务队列。
  • 遇到微任务 then()，加入微任务队列。
  • 最后遇到打印语句，直接打印日志 5。

第一轮循环结束后，能够画出下图：

clipboard.png

第二轮循环

  • 栈空后，先执行微任务队列中的 then()方法，输出 4，此时微任务队列为空。

clipboard.png

  • 读取宏任务队列的最靠前的任务 setTimeout1。
  • 先直接执行打印语句，打印日志 1，又遇到微任务 then()，加入微任务队列。第二轮循环结束。

clipboard.png

第三轮循环

  • 先执行微任务队列中的 then()方法，输出 2，此时微任务队列为空。

clipboard.png

  • 继续读取宏任务队列的最靠前的任务 setTimeout2。
  • 直接执行打印语句，打印日志 3。第三轮循环结束，执行完毕。

clipboard.png

最后咱们是咱们的boss，欢迎你们在评论区留言写出本身心中的那个正确答案。

console.log(1);

setTimeout(function(){
    console.log(2);
    new Promise(function(resolve, reject){
        console.log(3);
        resolve();
    }).then(function(){
        console.log(4);
    })
})

new Promise(function(resolve, reject){
    console.log(5);
    resolve();
}).then(function(){
    console.log(6);
})

setTimeout(function(){
    console.log(7)
})

setTimeout(function(){
    console.log(8);
    new Promise(function(resolve, reject){
        console.log(9);
        resolve();
    }).then(function(){
        console.log(10);
    })
})

new Promise(function(resolve){
    console.log(11);
    resolve();
}).then(function(){
    console.log(12)
})

console.log(13)

github地址：https://github.com/ABCDdouyaer/a_article_per_day/tree/master/0001
原文连接：https://mp.weixin.qq.com/s/9_hZX_xWSr3Gd1X_2_WOsA

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程