Event Loop 和消息队列

最新推荐文章于 2023-02-23 20:25:00 发布

song-jian

最新推荐文章于 2023-02-23 20:25:00 发布

阅读量311

点赞数 1

文章标签：队列

本文链接：https://blog.csdn.net/sjyssn/article/details/107562060

版权

Event Loop and 消息队列

1.我们都知道javascript是一门单线程、异步、非阻塞、解析类型脚本语言

单线程
异步
非阻塞
事件循环消息队列微任务宏任务

2.单线程与多线程

javascript 的设计就是为了处理浏览器网页的交互（DOM操作处理，UI动画等）决定了他是一门单线程语言。如果有多个线程同时在操作DOM,那网页将会是一团糟，由此我们就可以知道处理任务是一件接着一件处理，从上网下执行的

3.JS引擎线程

其实，JavaScript 单线程指的是浏览器中负责解释和执行JavaScript代码的只有一个线程，但是浏览器的渲染进程是提供多个线程的，如下：

JS引擎线程
事件触发进程
定时触发器线程
异步Http请求线程
GUI渲染进程（GUI渲染线程负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时，该线程就会执行。在Javascript引擎运行脚本期间,GUI渲染线程都是处于挂起状态的，也就是说被冻结了。）
当遇到计时器、DOM事件监听或者是网络请求的任务时，JS引擎会将它们直接交给 webapi，也就是浏览器提供的相应线程（如定时器线程为setTimeout计时、异步http请求线程处理网络请求）去处理，而JS引擎线程继续后面的其他任务，这样便实现了异步非阻塞。
定时器触发线程也只是为 setTimeout(…, 1000) 定时而已，时间一到，还会把它对应的回调函数(callback)交给任务队列去维护，JS引擎线程会在适当的时候去任务队列取出任务并执行。
JS引擎线程什么时候去处理呢？消息队列又是什么？

4.事件循环与消息队列

JavaScript 通过事件循环 Event Loop 的机制来解决这个问题

其实事件循环机制和任务队列的维护是由事件触发线程控制的。

事件触发线程同样是浏览器渲染引擎提供的，它会维护一个任务队列。

JS引擎线程遇到异步（DOM事件监听、网络请求、setTimeout计时器等…），会交给相应的线程单独去维护异步任务，等待某个时机（计时器结束、网络请求成功、用户点击DOM），然后由事件触发线程将异步对应的回调函数加入到消息队列中，消息队列中的回调函数等待被执行。

同时，JS引擎线程会维护一个执行栈，同步代码会依次加入执行栈然后执行，结束会退出执行栈。

如果执行栈里的任务执行完成，即执行栈为空的时候（即JS引擎线程空闲），事件触发线程才会从消息队列取出一个任务（即异步的回调函数）放入执行栈中执行。

消息队列是类似队列的数据结构，遵循先入先出(FIFO)的规则。

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
一但"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复，这种机制就被称为事件循环（event loop)

blockchain

上面说到了异步，JavaScript 中有同步代码与异步代码。，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

5.宏任务（macro-task）和微任务(micro-task)

宏任务：主代码块，setTimeout setTimeval等（可以看到，事件队列中的每一个都是宏任务，现在被称为宏任务队列）
微任务：Promise process.nextTick等

JS引擎线程首先执行主代码块。

每次执行栈执行的代码就是一个宏任务，包括任务队列(宏任务队列)中的，因为执行栈中的宏任务执行完会去取任务队列（宏任务队列）中的任务加入执行栈中，即同样是事件循环的机制。

在执行宏任务时遇到Promise等，会创建微任务（.then()里面的回调），并加入到微任务队列队尾。

micro-task必然是在某个宏任务执行的时候创建的，而在下一个宏任务开始之前，浏览器会对页面重新渲染(task >> 渲染 >> 下一个task(从任务队列中取一个))。同时，在上一个宏任务执行完成后，渲染页面之前，会执行当前微任务队列中的所有微任务。

也就是说，在某一个macro-task执行完后，在重新渲染与开始下一个宏任务之前，就会将在它执行期间产生的所有micro-task都执行完毕（在渲染前）

执行机制：

执行一个宏任务（栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS引擎线程继续，开始下一个宏任务（从宏任务队列中获取）

blockchain

一个event loop有一个或者多个task队列。task任务源非常宽泛，比如ajax的onload，click事件，基本上我们经常绑定的各种事件都是task任务源，还有数据库操作（IndexedDB ），需要注意的是setTimeout、setInterval、setImmediate也是task任务源。总结来说task任务源：

script
setTimeout
setInterval
setImmediate
I/O
requestAnimationFrame
UI rendering
微任务 micro-task(Job)
microtask 队列和task 队列有些相似，都是先进先出的队列，由指定的任务源去提供任务，不同的是一个 event loop里只有一个microtask 队列。另外microtask执行时机和Macrotasks也有所差异

process.nextTick
promises
Object.observe
MutationObserver
宏任务和微任务的区别
宏队列可以有多个，微任务队列只有一个,所以每创建一个新的settimeout都是一个新的宏任务队列，执行完一个宏任务队列后，都会去checkpoint 微任务。
一个事件循环后，微任务队列执行完了，再执行宏任务队列
一个事件循环中，在执行完一个宏队列之后，就会去check 微任务队列

eg

new Promise((resolve) => {
      console.log('new Promise(macro task 1)');
      resolve();
    }).then(() => {
      console.log('micro task 1');
      setTimeout(() => {
        console.log('setTimeout1');
      }, 500)
    })

    setTimeout(() => {
      console.log('setTimeout2');
    }, 100)

    console.log('========== 结束==========');

async function f1() {
      await f2()
      console.log('f1结束')
    }
    async function f2() {
      await f3()
      console.log('f2结束')
    }
    async function f3() {
      console.log('f3结束')
    }
    f1()
    new Promise(res => {
      console.log('new Promise')
      res()
    }).then(res => {
      console.log('promise第一个then')
    }).then(res => {
      console.log('promise第二个then')
    })

console.log('1');

    setTimeout(function () {
      console.log('2');
      Promise.resolve().then(function () {
        console.log('3');
      })
      new Promise(function (resolve) {
        console.log('4');
        resolve();
      }).then(function () {
        console.log('5')
      })
    })
    Promise.resolve().then(function () {
      console.log('6');
    })
    new Promise(function (resolve) {
      console.log('7');
      resolve();
    }).then(function () {
      console.log('8')
    })

    setTimeout(function () {
      console.log('9');
      Promise.resolve().then(function () {
        console.log('10');
      })
      new Promise(function (resolve) {
        console.log('11');
        resolve();
      }).then(function () {
        console.log('12')
      })
    })

song-jian

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Event Loop 和消息队列

Event Loop and 消息队列1.我们都知道javascript是一门单线程、异步、非阻塞、解析类型脚本语言单线程异步非阻塞事件循环消息队列微任务宏任务2.单线程与多线程javascript 的设计就是为了处理浏览器网页的交互（DOM操作处理，UI动画等）决定了他是一门单线程语言。如果有多个线程同时在操作DOM,那网页将会是一团糟，由此我们就可以知道处理任务是一件接着一件处理，从上网下执行的3.JS引擎线程其实，JavaScript 单线程指的是浏览器中负责解释和执行J
复制链接

扫一扫