初探 event loop

hsluoyz 发布于2019-08-23 10:37 / 3296人阅读

摘要：事件循环了解知识点线程执行栈线程是单线程的语言可以单线程将理解为只有一条车道在车道里后面的车在等前面的车通过后才能通过即当前面的程序没有执行后面的程序也不能执行执行栈执行栈像车道被执行的程序会放入执行栈里但它的执行的顺序是后面进来的程序先执

事件循环 了解知识点

线程

执行栈

task queue

web api

macro task

micro task

线程

javascript是单线程的语言,
可以单线程将理解为只有一条车道,在车道里后面的车在等前面的车通过后,才能通过.
即当前面的程序没有执行,后面的程序也不能执行.

执行栈

执行栈像"车道",被执行的程序会放入执行栈里,
但它的执行的顺序是,后面进来的程序先执行.

示例

视频源地址

task queue

在线程中有很多等待运行的任务(程序,而执行栈只会放入一个任务.
其他可运行任务会放入任务队列中.
这里虽说是个队列, 它的执行的顺序,不会先进的程序先执行.
每个event loop都会有一个或多个任务队列

web api

javascript是单线程,但也能实现异步,这种实现基与页面提供很多API,如(setTimeout, ajax, addEventListener ...)
这些都是异步函数,也就是说,运行到异步函数时,
把异步函数里闭包放入web api里,等待正确的时机,
web api会把闭包放入task queue里执行.

示例

macro task

macro task有setTimeout ，setInterval， setImmediate，requestAnimationFrame,I/O ，UI渲染...
task queue 是由很多个macro task组成的队列,

micro task

micro task有Promise， process.nextTick， Object.observe， MutationObserver...
每个event loop都会有一个micro task

event loop

执行流程

当执行栈为null时

看task queue的第一个macro task是不是null,如果不是取出放入执行栈,如果是跳转5

执行栈运行task

运行完毕,把task设置null,并移出

执行 micro task队列
a. 看micro task队列第一task个是不是null,如果不是取出放入执行栈,如果是跳转f
b. 执行栈运行task
c. 运行完毕,把task设置null,并移出
d. 看micro task队列下一个task是不是null,如果不是跳转b
f. 结束micro task队列执行

跳转到1

示例

实战

猜想

在macro/micro task 进入执行栈时,中间应该会有一个缓存区,
例如

如果是把整个macro task放入执行栈,
按后进程序先执行的机制, 应该会先打印"b",
但打印的是"a",说明函数b是等函数a执行完后再进入执行栈的,
所以在macro task 会把里面的函数拆分为一个执行的队列,放入执行栈里.

示例

参考资料

https://github.com/ccforward/cc/issues/48
https://juejin.im/entry/596d78ee6fb9a06bb752475c

Make a friend

作者有一年半的前端开发经验,比较擅长性能优化和vue,喜欢对各种原理的深究,
喜欢篮球和电影
如果有趣味相投可以加入微信群

云服务器混合云 Event Loop Loops Loop 初探webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96514.html

OpenJDK9 Hotspot：Zero 解释器初探

摘要：准备工作假设源代码目录为编译时启用了解释器参考编译和调试调用栈先在函数参考虚拟机入口中设断点，然后在的方法中设置断点通过宏获取当前，然后创建第个栈帧，然后进入解释执行字节码准备工作假设 openjdk 源代码目录为 jdk9dev 编译 openjdk 时启用了 zero 解释器（参考 OpenJDK9 Hotspot Mac OSX 编译和调试）调用栈先在 JavaMai...

zhangqh 2019-08-14 15:39 评论0 收藏0
Log4j DailyRollingFileAppender源码初探

摘要：是否覆盖目标文件名是否缓冲默认缓冲区大小既然缓冲了，那意味着父类中的刷新控制为不进行同步刷新利用父类中的字节流字符流转换方法实例化父类中的实际在上面指向了文件输出流继承，将文件进行日常转存。瞎扯 Log4j对Java开发者来说是经常使用到的日志框架，我每次使用都对它的配置文件头大，网上搜一个别人的例子自己改巴改巴，草草了事。再次使用时，又忘了怎么回事了。这次突然来了兴趣，想看看它具体...

warkiz 2019-08-14 14:57 评论0 收藏0
解读React源码(一):初探React源码

摘要：前言的基本概念组件的构建方法以及高级用法这背后的一切如何运转深入内部的实现机制和原理初探源码代码组织结构包含一系列的工具方法插件包含一系列同构方法包含一些公用或常用方法如等包含一些测试方法等包含一些边界错误的测试用例是代码的核心部分它包含了前言 React的基本概念,API,组件的构建方法以及高级用法,这背后的一切如何运转,深入Virtual DOM内部的实现机制和原理. 初探Rea...

Eminjannn 2019-08-20 18:31 评论0 收藏0
JS与Node.js中的事件循环

摘要：的单线程，与它的用途有关。特点的显著特点异步机制事件驱动。队列的读取轮询线程，事件的消费者，的主角。它将不同的任务分配给不同的线程，形成一个事件循环，以异步的方式将任务的执行结果返回给引擎。这两天跟同事同事讨论遇到的一个问题，js中的event loop，引出了chrome与node中运行具有setTimeout和Promise的程序时候执行结果不一样的问题，从而引出了Nodejs的...

abson 2019-08-22 11:14 评论0 收藏0
webpack-hot-middleware初探

摘要：一直感觉的特性挺神奇，所以这里初步探究下，这个模块首先地址，，当前版本为，为了配合吧，肯定也做了些更新，不过这个是个非官方的库。一直感觉hot module replacement的特性挺神奇，所以这里初步探究下webpack-hot-middleware，这个模块首先地址，https://github.com/glenjamin/...，当前版本为2.13.2，为了配合webpa...

lijy91 2019-08-21 11:22 评论0 收藏0