4

都知道javascript是单线程,那么问题来了,既然是单线程顺序执行,那怎么做到异步的呢?

我们理解的单线程应该是这样的,排着一个个来,是同步执行。

in-the-queue.jpg

现实中js是这样的
        setTimeout(function() {
            console.log(1);
        });
        new Promise(function(resolve, reject) {
            console.log(2)
            resolve(3)
        }).then(function(val) {
            console.log(val);
        })
        console.log(4)
        //执行结果为 2、4、3、1

结果告诉我们,js是单线程没错,不过不是逐行同步执行。

那我们就来解析一下既然有异步,那顺序是怎样的?这些执行顺序规则就是理解eventLoop的要点,继续往下。

Kapture 2019-01-15 at 16.01.35.gif

上图为我录制的chrome控制代码台执行顺序,虽然能看出执行顺序但我们还是懵逼的,我们不知道规则,不懂就要问。

搜索了很多官方、个人博客得到了一堆词:js引擎、主线程、事件表、事件队列、宏任务、微任务,彻底懵逼。。。

不急不急一个个来,我们进入刨根问底状态

js引擎

总结一句话就是解析优化代码 **制定执行规则 具体规则往下看

主线程

总结一句话执行js引擎优化并排列顺序后的代码

事件表(event table)

执行代码过程中,异步的回调,例如(setTimeout,ajax回调)注册回调事件到event table

事件队列

当事件回调结束,事件表(event table)会将事件移入到事件队列(event queue)

宏任务和微任务

宏任务包含的事件
事件 浏览器 node
I/O
setTimeout
setInterval
setImmediate
requestAnimationFrame
微任务包含的事件
事件 浏览器 node
I/O
process.nextTick
MutationObserver
Promise.then catch finally

很多博客是这样说的:
浏览器会不断从task队列中按顺序取task执行,每执行完一个task都会检查microtask队列是否为空(执行完一个task的具体标志是函数执行栈为空),如果不为空则会一次性执行完所有microtask。然后再进入下一个循环去task队列中取下一个task执行

说实话不是太理解,那么我就以自己的方式去学习和理解

为了更好的理解我们再看代码

        console.log('1');
        setTimeout(function() {
            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(function() {
            console.log('7');
            new Promise(function(resolve) {
                console.log('8');
                resolve();
            }).then(function() {
                console.log('9')
            })
        })
        //执行结果:1、5、6、2、3、4、7、8、9

image.png
有图为证我没骗你
再来个动图我们具体看看浏览器的执行顺序
eventLoop1.gif

首先js引擎,区分是直接执行(同步代码),再执行异步代码,如果是异步再区分是宏任务还是微任务,分别放入两个任务队列,然后开始执行,每执行完一个宏任务,扫一遍微任务队列并全部执行,此时形成一次eventLoop循环。以此规则不停的执行下去就是我们所听到的事件循环。

我再补充一点,可以理解js引擎一开始把整个script当做一个宏任务,这样里边的就更容易理解了,开始就执行script宏任务,解析到宏任务里边又包含同步代码和异步代码(宏任务和微任务)依次执行顺序形成eventLoop。

欢迎吐槽点赞评论!

文章参考学习:
https://www.jianshu.com/p/12b...
https://juejin.im/post/59e85e...
https://segmentfault.com/a/11...


我是一个前端
1.6k 声望55 粉丝

所有的成功都来自坚持!