美文网首页
JS异步、event loop、微任务、宏任务

JS异步、event loop、微任务、宏任务

作者: 逆风飘游的鱼 | 来源:发表于2019-08-04 08:55 被阅读0次

https://juejin.im/post/5be5a0b96fb9a049d518febc

“JavaScript 是单线程、异步、非阻塞、解释型脚本语言。”

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

为什么要有同步异步?

单线程语言:JavaScript 的设计就是为了处理浏览器网页的交互(DOM操作的处理、UI动画等),决定了它是一门单线程语言。如果有多个线程,它们同时在操作 DOM,那网页将会一团糟。

那如果一个任务的处理耗时(或者是等待)很久的话,如:网络请求、定时器、等待鼠标点击等,后面的任务也就会被阻塞,也就是说会阻塞所有的用户交互(按钮、滚动条等),会带来极不友好的体验。

其实事件循环event loop机制和消息队列的维护是由事件触发线程控制的。

事件触发线程同样是浏览器渲染引擎提供的,它会维护一个消息队列。JS引擎线程遇到异步(DOM事件监听、网络请求、setTimeout计时器等...),会交给相应的线程单独去维护异步任务,等待某个时机(计时器结束、网络请求成功、用户点击DOM),然后由事件触发线程将异步对应的回调函数加入到消息队列中,消息队列中的回调函数等待被执行。

事件循环机制:

JS引擎线程会维护一个执行栈,同步代码会依次加入到执行栈中依次执行并出栈。

JS引擎线程遇到异步函数,会将异步函数交给相应的Webapi,而继续执行后面的任务。

Webapi会在条件满足的时候,将异步对应的回调加入到消息队列中,等待执行。

执行栈为空时,JS引擎线程会去取消息队列中的回调函数(如果有的话),并加入到执行栈中执行。

完成后出栈,执行栈再次为空,重复上面的操作,这就是事件循环(event loop)机制。

这里有一个新概念:macrotask(宏任务) 和microtask(微任务)。

所有任务分为macrotask和microtask:

macrotask:主代码块、setTimeout、setInterval等(可以看到,事件队列中的每一个事件都是一个 macrotask,现在称之为宏任务队列)

microtask:Promise、process.nextTick等

执行机制:

执行一个宏任务(栈中没有就从事件队列中获取)

执行过程中如果遇到微任务,就将它添加到微任务的任务队列中

宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)

当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染

渲染完毕后,JS引擎线程继续,开始下一个宏任务(从宏任务队列中获取)

JavaScript 是单线程语言,决定于它的设计最初是用来处理浏览器网页的交互。浏览器负责解释和执行 JavaScript 的线程只有一个(所有说是单线程),即JS引擎线程,但是浏览器同样提供其他线程,如:事件触发线程、定时器触发线程等。

异步一般是指:、网络请求、计时器、DOM事件监听

相关文章

  • JS异步、event loop、微任务、宏任务

    https://juejin.im/post/5be5a0b96fb9a049d518febc “JavaScri...

  • 20211021

    1、js里的事件循环机制(event loop)答:js事件循环中有异步队列有两种:宏任务队列(macro)和微任...

  • 宏任务和微任务有什么区别

    微任务和宏任务皆为异步任务,它们都属于一个队列,主要区别在于他们的执行顺序,Event Loop的走向和取值。 宏...

  • js微任务宏任务Event-loop

    js微任务宏任务Event-loop js是单线程的语言当我们触发alert之后如果不关闭,后面的console....

  • 微任务、宏任务与Event-Loop

    转:微任务、宏任务与Event-Loop 要点总结: 宏任务都有哪些:I/O, setTimeout, setIn...

  • 宏任务/微任务 Event Loop

    宏任务/微任务 宏任务:当前调用栈中执行的任务称为宏任务。(主代码快,定时器等等)。.微任务: 当前(此次事件循环...

  • 浏览器的Event Loop机制

    异步实现:1.宏观:浏览器多线程;2.微观:Event Loop,事件循环 Event Looptask(宏任务)...

  • 夯基础- js event loop机制

    js运行机制 event loop事件循环 js分为同步任务和异步任务,所有的同步任务都在主线程上执行 另外存在着...

  • requestAnimationFrame和requestIdl

    一、思考 大家都知道异步任务分为宏任务和微任务,不知道的可以看我的另一篇文章(深入理解Event Loop的运行机...

  • js运行机制

    如何理解js的单线程 一个时间之内js只能干一件事 什么是任务队列和Event Loop 同步任务,异步任务异步任...

网友评论

      本文标题:JS异步、event loop、微任务、宏任务

      本文链接:https://www.haomeiwen.com/subject/wutsdctx.html