javascript 运行机制 EventLoop

前言

javascript 为什么是单线程？多线程不好吗,能提高效率啊.。

答案是不能。假设javascript有两个线程，一个在某个DOM节点添加内容，另一个线程在这个节点上删除内容，这是浏览器应该以哪个线程为准？
这就意味着单线程作为javascript的核心标准，将一直沿用下去。

当然，现如今人们也意识到，单线程在保证了执行顺序的同时也限制了javascript的效率，因此开发出了web worker技术。这项技术号称让javascript成为一门多线程语言。

使用web worker技术开的多线程有着诸多限制.
例如：所有新线程都受主线程的完全控制，不能独立执行。这意味着这些“线程” 实际上应属于主线程的子线程。另外，这些子线程并没有执行I/O操作的权限，只能为主线程分担一些诸如计算等任务。所以严格来讲这些线程并没有完整的功能，也因此这项技术并非改变了javascript语言的单线程本质。

事件循环(EventLoop)

既然js是单线程，那么意味着，当先我们执行一个任务，什么事都干不了，只能等待他执行完。这是设计者意识到，只是主线程完全可以不考虑IO设备，挂起处于等待中的任务，先运行排在后面的任务，等IO设备返回了结果，再回头把挂起的设备执行完。
于是所有任务分为两种：同步任务和异步任务

当javascript代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分，heap中一般存储我们的变量，stack一般存储函数或者方法。stack叫做执行栈，我们的方法依次会在这里执行。执行栈事件先进后出，任务队列先进先出。web apis则是代表一些异步事件，而callback queue即事件队列。
对照图片我们解释一下整个事件循环机制
执行栈执行主线程任务，当有操作dom，ajax交互，使用定时器异步操作的时候，这些任务会被移入到 callback queue 任务队列中
当主线程任务执行完毕为空时，会读取callback queue队列中的函数，进入主线程执行
上述过程会不断重复，也就是常说的Event Loop(事件循环)。

.macro task与micro task

不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task）。
在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去，当执行栈为空的时候，主线程会首先查看微任务中的事件，如果微任务不是空的那么执行微任务中的事件，如果没有在宏任务中取出最前面的一个事件。把对应的回调加入当前执行栈…如此反复，进入循环。

- macro-task(宏任务)

    - setTimeout
    - setInterval
    - setImmediate


- micro-task(微任务)

    - Promise
    - process.nextTick

前面我们介绍过，在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去。并且在当前执行栈为空的时候，主线程会查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈…如此反复，进入循环。

我们只需记住当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

这样就能解释下面这段代码的结果：

setTimeout(function () {
    console.log(1);
});

new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})

结果为：

2
3
1

实例2:

let p = new Promise((resolve, reject) => {
    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
            console.log('set 11');
        }, 0)
        resolve(2);
        console.log('set 222');
    });
    p1.then(res => console.log(res));
    console.log('set 33');
    resolve(3);
})
p.then(res => console.log(res));
console.log('end')

输出结果：

set 222
set 33
end
2
3
set 11