草庐IT

EventLoop

wxiaonan 2023-03-28 原文

?EventLoop

JS是单线程的,也就是,同一时间只能做一件事情。所以一旦遇到大量任务或者耗时的任务时,比如加载高清图片,网页就会“假死”,无法响应用户的行为。为了防止这种阻塞,才有了同步和异步的概念。而EventLoop,即事件循环机制,就是我们经常使用异步的原理。

同步任务

  • 非耗时的任务,指的是在主线程上排队执行的那些任务
  • 只有前一个任务执行完毕,才能执行后一个任务
console.log('111')
console.log('222')
console.log('333')

上述就是简单的同步任务,会按照顺序输出111,222,333

异步任务

  • 耗时任务,异步任务由JS委托给宿主环境进行执行
  • 当异步任务执行完之后,会通知JS主线程执行异步任务的回调函数

比如说发一个网络请求,主程序需要等到接收到数据后再去做其他的事情。当异步完成后,可能程序正在做其他的事情,所以即使异步完成了也需要在一旁等待,等到程序空闲下来才有时间继续执行。

异步任务分为宏任务和微任务。

为了防止一个函数执行时间过长阻塞后面的代码:

  • 会先将同步代码压入执行栈中,在主线程上依次执行;
  • 将异步代码推入任务队列,任务队列又分为宏任务队列和微任务队列;
  • 因为宏任务队列的执行时间较长,所以微任务队列要优先于宏任务队列。
  • 如果执行栈中的所有同步任务执行完毕,就会读取任务队列,将可运行的异步任务添加到执行栈中,开始执行。

宏任务

每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)

浏览器为了能够使得JS内部宏任务与DOM任务能够有序的执行,会在一个宏任务执行结束后,在下一个宏任务执行开始前,对页面进行重新渲染。所以宏任务执行是在DOM渲染之后。

宏任务包括:

  • 异步Ajax请求
  • setTimeout、setInterval
  • postMessage
  • 文件操作

微任务

微任务就是在当前任务结束之后立即执行的任务。微任务在渲染之前执行,所以它的响应速度相比宏任务会更快,因为无需等渲染。

微任务包括:

  • Promise.then、.catch、.finally
  • process.nextTick

运行机制

  • 先执行主线程中的同步任务
  • 遇到异步宏任务,就将其放入宏任务队列中
  • 遇到异步微任务,就将其放入微任务队列中
  • 主线程任务执行完后,从微任务队列中取出任务到主线程中,直到微任务队列为空。在这个过程中,如果遇到微任务中又有微任务,会将其依次放入微任务队列中
  • 微任务执行完毕后,从宏任务队列中取出任务到主线程中。在一个宏任务的执行过程中,如果遇到微任务,就会将其放入到微任务队列中。
  • 每一个宏任务执行完之后,都会检查是否存在正在等待执行的微任务,如果有就会先将所有微任务执行完,再执行下一个宏任务。

根据上述的解释,先来判断一下这段代码的输出结果

setTimeout(function(){
	console.log('1')
})
new Promise(function(resolve){
	console.log('2')
	resolve()
}).then(function(){
	console.log('3')
})
console.log('4')

正确的输出结果是:2431

执行的过程:

①先执行所有的同步任务(第5行、第10行)

②再执行微任务(第8行,promise.then是微任务)

③在执行下一个宏任务(第2行,setTimeout是宏任务)

再看一个复杂的例子

console.log('1');
setTimeout(() => {
	console.log('2');
	new Promise(function(resolve) {
		console.log('3')
		resolve()
	}).then(function() {
		console.log('4')
	})
})

new Promise(function(resolve) {
	console.log('5')
	resolve()
}).then(function() {
	console.log('6')
})

setTimeout(() => {
	console.log('7')
	new Promise(function(resolve) {
		console.log('8')
		resolve()
	}).then(function() {
		console.log('9')
	})
})

输出的结果为:156234789

需要注意的点就是执行完每个宏任务,都会把微任务队列中的执行完,才能再执行下一个宏任务

有关EventLoop的更多相关文章

  1. node.js - Nodejs EventLoop(带集群模块)和Golang Scheduler的比较 - 2

    在nodejs中,主要批评者基于其单线程事件循环模型。nodejs最大的缺点是无法在应用程序中执行CPU密集型任务。为了演示目的,让我们以while循环为例(这可能类似于一个返回十万条记录的db函数,然后在nodejs中处理这些记录。)while(1){x++}此类代码将阻塞主堆栈,因此事件队列中等待的所有其他任务将永远没有机会执行。(而在web应用程序中,新用户将无法连接到该应用程序)。但是,可以使用像cluster这样的模块来利用多核系统并部分解决上述问题。Cluster模块允许创建一个由独立进程组成的小型网络,这些进程可以共享服务器端口,这使Node.js应用程序可以访问服务器的

  2. linux - MIO EventLoop 未针对 TcpStream 运行 - 2

    我是一名Rust初学者,正在为异步IO问题而苦苦挣扎。我决定使用mio.我已经阅读了一些源代码和教程,但仍有一些基本部分我不明白。我正在使用netcat-k-l127.0.0.19999设置服务器。然后我用cargo(下面的代码)运行简单的测试。我期待看到“准备好”或“滴答声”的panic。但它永远不会发生,测试会永远运行。externcratemio;usemio::*;#[allow(unused_imports)]usemio::tcp::TcpStream;#[allow(dead_code)]structMyHandler;implHandlerforMyHandler{ty

  3. 搞懂EventLoop机制 - 2

    写在最前:本文转自掘金#JavaScript是单线程的语言事件循环EventLoop,这是目前浏览器和NodeJS处理JavaScript代码的一种机制,而这种机制存在的背后,正是因为JavaScript是单线程语言。单线程和多线程最简单的区别就是:单线程同一个事件只能做一件事情,而多线程同一个时间能做多件事情。调用栈CallStack在JavaScript运行的时候,主线程会形成一个栈,这个栈主要是解释器用来最终函数执行流程的一种机制。通常这个栈被称为调用栈CallStack或者执行栈。调用栈,顾名思义是具有LIFO(后进先出,LastinFirstOut)的结构。调用栈内存放的是代码执行期

  4. EventLoop - 2

    ?EventLoopJS是单线程的,也就是,同一时间只能做一件事情。所以一旦遇到大量任务或者耗时的任务时,比如加载高清图片,网页就会“假死”,无法响应用户的行为。为了防止这种阻塞,才有了同步和异步的概念。而EventLoop,即事件循环机制,就是我们经常使用异步的原理。同步任务非耗时的任务,指的是在主线程上排队执行的那些任务只有前一个任务执行完毕,才能执行后一个任务console.log('111')console.log('222')console.log('333')上述就是简单的同步任务,会按照顺序输出111,222,333异步任务耗时任务,异步任务由JS委托给宿主环境进行执行当异步任务

  5. EventLoop - 2

    ?EventLoopJS是单线程的,也就是,同一时间只能做一件事情。所以一旦遇到大量任务或者耗时的任务时,比如加载高清图片,网页就会“假死”,无法响应用户的行为。为了防止这种阻塞,才有了同步和异步的概念。而EventLoop,即事件循环机制,就是我们经常使用异步的原理。同步任务非耗时的任务,指的是在主线程上排队执行的那些任务只有前一个任务执行完毕,才能执行后一个任务console.log('111')console.log('222')console.log('333')上述就是简单的同步任务,会按照顺序输出111,222,333异步任务耗时任务,异步任务由JS委托给宿主环境进行执行当异步任务

  6. js EventLoop、宏任务和微任务 - 2

    1.javascript是单线程的语言javascript是一门单线程执行的编程语言。也就是说,同一时间只能做一件事情。如下:如果有多个任务要执行,执行其他任务时,其他任务都要进行等待52.png1.1单线程执行任务队列的问题如果前一个任务非常耗时,则后续的任务不得不一直等待,从而导致程序假死的问题。2.同步任务和异步任务为了防止某个耗时任务导致程序假死的问题,javascript把待执行的任务分为了两类。同步任务又叫做非耗时任务,指的是在主线程上排队执行的那些任务只有前一个任务执行完毕,才能执行后一个任务异步任务又叫做非耗时任务,异步任务由javascript委托给宿主环境进行执行当异步任务

  7. js EventLoop、宏任务和微任务 - 2

    1.javascript是单线程的语言javascript是一门单线程执行的编程语言。也就是说,同一时间只能做一件事情。如下:如果有多个任务要执行,执行其他任务时,其他任务都要进行等待52.png1.1单线程执行任务队列的问题如果前一个任务非常耗时,则后续的任务不得不一直等待,从而导致程序假死的问题。2.同步任务和异步任务为了防止某个耗时任务导致程序假死的问题,javascript把待执行的任务分为了两类。同步任务又叫做非耗时任务,指的是在主线程上排队执行的那些任务只有前一个任务执行完毕,才能执行后一个任务异步任务又叫做非耗时任务,异步任务由javascript委托给宿主环境进行执行当异步任务

随机推荐