美文网首页
js事件循环

js事件循环

作者: ax_43d8 | 来源:发表于2020-07-12 15:39 被阅读0次

在js代码中,除了同步代码,就是异步代码,一个js文件是从上往下执行,遇到ajax,点击事件。settimeout等异步事件,不会立即执行,会被放在相应的web api模块中,这些异步代码什么时候执行,等待主线程执行完毕,才会执行异步代码。


image.png
image.png

异步代码有执行先后顺序,这个先后顺序怎么执行的?

异步代码分为:宏任务,微任务。
宏任务:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
微任务:process.nextTick, Promises, Object.observe, MutationObserver

每一次事件循环,都会执行一个宏任务,在这个宏任务中,可能有还存在宏任务,微任务,那如何去执行这些微任务,和宏任务?记住,但你执行一个宏任务,首先要执行所以的微任务,遇到里面的宏任务把推进宏任务事件队列,等待某一次事件循环来执行这个宏任务。

事件循环作用:每次都是执行一个宏任务,把这个宏任务里面的可能存在的多个微任务执行完,看到一个宏任务,顺便把推进宏任务队列 一直这样反复的执行

注解:宏任务都包括同步代码,宏任务代码,微任务代码 主要这三部分代码
同步代码>微任务>宏任务的执行顺序

https://zhuanlan.zhihu.com/p/26229293
https://zhuanlan.zhihu.com/p/26238030
[https://mp.weixin.qq.com/s?__biz=MzUzMjA3MTI2NQ==&mid=2247485214&idx=1&sn=12decb0ba6b6060d6b9f88ee6c227d7e&chksm=fab99110cdce1806c508950bf2cdb1b09c45fb9a48acbce868694ad980c112ddcee671b0a3f6&mpshare=1&scene=24&srcid=&sharer_sharetime=1585841105377&sharer_shareid=762717275fedf766441eee549354e3af&key=25482536a2868f95a747be1bba6a2a0f336defbbf8d45116a1dc006e3119777adad66c433cd6f4b685e308f086f164107dd3aa1c6b2eedb4d6e3007bab957877ea458e842beb61384aec253a8d3113a5&ascene=14&uin=MTc1MjM1NzM4MQ%3D%3D&devicetype=Windows+7&version=62080079&lang=zh_CN&exportkey=AewYYl61ye1z6y1NiRjiJEQ%3D&pass_ticket=C4is0r6nXq%2FvPIwtVRO8UIjTQ7xNdzevdyWz58B0vV70j5JGHCTivvcazNg4WduX%5D(https://mp.weixin.qq.com/s?__biz=MzUzMjA3MTI2NQ==&mid=2247485214&idx=1&sn=12decb0ba6b6060d6b9f88ee6c227d7e&chksm=fab99110cdce1806c508950bf2cdb1b09c45fb9a48acbce868694ad980c112ddcee671b0a3f6&mpshare=1&scene=24&srcid=&sharer_sharetime=1585841105377&sharer_shareid=762717275fedf766441eee549354e3af&key=25482536a2868f95a747be1bba6a2a0f336defbbf8d45116a1dc006e3119777adad66c433cd6f4b685e308f086f164107dd3aa1c6b2eedb4d6e3007bab957877ea458e842beb61384aec253a8d3113a5&ascene=14&uin=MTc1MjM1NzM4MQ%3D%3D&devicetype=Windows+7&version=62080079&lang=zh_CN&exportkey=AewYYl61ye1z6y1NiRjiJEQ%3D&pass_ticket=C4is0r6nXq%2FvPIwtVRO8UIjTQ7xNdzevdyWz58B0vV70j5JGHCTivvcazNg4WduX](https://mp.weixin.qq.com/s?__biz=MzUzMjA3MTI2NQ==&mid=2247485214&idx=1&sn=12decb0ba6b6060d6b9f88ee6c227d7e&chksm=fab99110cdce1806c508950bf2cdb1b09c45fb9a48acbce868694ad980c112ddcee671b0a3f6&mpshare=1&scene=24&srcid=&sharer_sharetime=1585841105377&sharer_shareid=762717275fedf766441eee549354e3af&key=25482536a2868f95a747be1bba6a2a0f336defbbf8d45116a1dc006e3119777adad66c433cd6f4b685e308f086f164107dd3aa1c6b2eedb4d6e3007bab957877ea458e842beb61384aec253a8d3113a5&ascene=14&uin=MTc1MjM1NzM4MQ%3D%3D&devicetype=Windows+7&version=62080079&lang=zh_CN&exportkey=AewYYl61ye1z6y1NiRjiJEQ%3D&pass_ticket=C4is0r6nXq%2FvPIwtVRO8UIjTQ7xNdzevdyWz58B0vV70j5JGHCTivvcazNg4WduX%5D(https://mp.weixin.qq.com/s?__biz=MzUzMjA3MTI2NQ==&mid=2247485214&idx=1&sn=12decb0ba6b6060d6b9f88ee6c227d7e&chksm=fab99110cdce1806c508950bf2cdb1b09c45fb9a48acbce868694ad980c112ddcee671b0a3f6&mpshare=1&scene=24&srcid=&sharer_sharetime=1585841105377&sharer_shareid=762717275fedf766441eee549354e3af&key=25482536a2868f95a747be1bba6a2a0f336defbbf8d45116a1dc006e3119777adad66c433cd6f4b685e308f086f164107dd3aa1c6b2eedb4d6e3007bab957877ea458e842beb61384aec253a8d3113a5&ascene=14&uin=MTc1MjM1NzM4MQ%3D%3D&devicetype=Windows+7&version=62080079&lang=zh_CN&exportkey=AewYYl61ye1z6y1NiRjiJEQ%3D&pass_ticket=C4is0r6nXq%2FvPIwtVRO8UIjTQ7xNdzevdyWz58B0vV70j5JGHCTivvcazNg4WduX)

相关文章

  • js事件循环

    js 是单线程的, js 的异步事件就是依赖于事件循环机制 事件循环 首先,我们来解释下事件循环是个什么东西: 就...

  • 2019-03-28

    JS 事件循环机制 - 任务队列、web API、JS主线程的相互协同 这篇文章的核心是分析js的事件循环,在此我...

  • Vue源码分析—响应式原理(四)

    nextTick JS 运行机制 JS 执行是单线程的,它是基于事件循环的。事件循环大致分为以下几个步骤: 所有同...

  • Js事件循环

    列表 JavaScript事件循环 测试金字塔 stub JavaScript事件循环理解 javaScript语...

  • js事件循环

    js是单线程的,那么是否代表参与js执行过程的线程只有一个? 答案:不是的,一共有4个线程参与该过程,但是永远只有...

  • js 事件循环

    先上代码 执行栈与事件队列 当javascript代码执行的时候会将不同的变量存于内存中的不同位置:堆(heap)...

  • js事件循环

    在js代码中,除了同步代码,就是异步代码,一个js文件是从上往下执行,遇到ajax,点击事件。settimeout...

  • JS事件循环

    深入理解javascript中的事件循环 (1)JS为何设计为单线程 js设计为单线程还是跟他的用途有关 试想一下...

  • JS事件循环

    之前在公众号发的一篇文章,在这里再发一次 先来看一道常见的面试题,请给出下面程序的打印顺序 单纯记住答案没有什么意...

  • js事件循环

    1 js的事件循环 js 是一门单线程语言,为了协调事件,用户交互,脚本, UI渲染方面和网络处理等行为,浏览器引...

网友评论

      本文标题:js事件循环

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