js运行机制详解（Event Loop）

1.基础知识

$\bullet$ js作为浏览器脚本语言，它的主要用途是与用户互动，以及操作DOM，因此js是单线程，也避免了同时操作同一个DOM的矛盾问题；

$\bullet$ 为了利用多核CPU的计算能力，H5的Web Worker实现的“多线程”实际上指的是“多子线程”，完全受控于主线程，且不允许操作DOM；

js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）；

如果在微任务执行期间微任务队列加入了新的微任务，会将新的微任务加入队列尾部，之后也会被执行；

2.js中的异步操作

setTimeOut

setInterval

ajax

promise

I/O

3.同步任务 or 异步任务

同步任务(synchronous)：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务(asynchronous)：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

4.宏任务 or 微任务

这里需要注意的是new Promise是会进入到主线程中立刻执行，而promise.then则属于微任务

宏任务(macro-task)：整体代码script、setTimeOut、setInterval

微任务(mincro-task)：promise.then、promise.nextTick(node)

5.Event Loop事件循环

Event Loop循环

整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；

同步任务会直接进入主线程依次执行；

异步任务会再分为宏任务和微任务；

宏任务进入到Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；

微任务也会进入到另一个Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；

当主线程内的任务执行完毕，主线程为空时，会检查微任务的Event Queue，如果有任务，就全部执行，如果没有就执行下一个宏任务；

上述过程会不断重复，这就是Event Loop事件循环；

6.代码示例

1.第一个例子

console.log(1)setTimeout(function(){console.log(2)},0)console.log(3)执行结果：// 1 3 2

分析：

1.console.log(1)是同步任务，直接打印1；

2.setTimeout是异步任务，且是宏函数，放到宏函数队列中，等待下次Event Loop才会执行；

3.console.log(3)是同步任务，直接打印3；

4.主线程执行完毕，没有微任务，那么执行第二个宏任务setTimeout，打印2；

5.结果：1，3，2

2.第二个例子

setTimeout(function(){console.log(1)});newPromise(function(resolve){console.log(2);for(vari =0; i <10000; i++){ i ==9999&& resolve(); }}).then(function(){console.log(3)});console.log(4);执行结果：// 2， 4， 3， 1

分析：

1.setTimeout是异步，且是宏函数，放到宏函数队列中；

2.new Promise是同步任务，直接执行，打印2，并执行for循环；

3.promise.then是微任务，放到微任务队列中；

4.console.log(4)同步任务，直接执行，打印4；

5.此时主线程任务执行完毕，检查微任务队列中，有promise.then，执行微任务，打印3；

6.微任务执行完毕，第一次循环结束；从宏任务队列中取出第一个宏任务到主线程执行，打印1；

7.结果：2，4，3，1

第三个例子

console.log(1);setTimeout(function(){console.log(2);},0);Promise.resolve().then(function(){console.log(3);}).then(function(){console.log('4.我是新增的微任务');});console.log(5);执行结果：// 1，5，3，4.我是新增的微任务，2

分析：

1.console.log(1)是同步任务，直接执行，打印1；

2.setTimeout是异步，且是宏函数，放到宏函数队列中；

3.Promise.resolve().then是微任务，放到微任务队列中；

4.console.log(5)是同步任务，直接执行，打印5；

5.此时主线程任务执行完毕，检查微任务队列中，有Promise.resolve().then，执行微任务，打印3；

6.此时发现第二个.then任务，属于微任务，添加到微任务队列，并执行，打印4.我是新增的微任务；

7.这里强调一下，微任务执行过程中，发现新的微任务，会把这个新的微任务添加到队列中，微任务队列依次执行完毕后，才会执行下一个循环；

8.微任务执行完毕，第一次循环结束；取出宏任务队列中的第一个宏任务setTimeout到主线程执行，打印2；

9.结果：1，5，3，4.我是新增的微任务，2

第四个例子

functionadd(x, y){console.log(1) setTimeout(function(){// timer1console.log(2) },1000)}add();setTimeout(function(){// timer2console.log(3)})newPromise(function(resolve){console.log(4) setTimeout(function(){// timer3console.log(5) },100)for(vari =0; i <100; i++) { i ==99&& resolve() }}).then(function(){ setTimeout(function(){// timer4console.log(6) },0)console.log(7)})console.log(8)执行结果//1，4，8，7，3，6，5，2

分析：

1.add()是同步任务，直接执行，打印1；

2.add()里面的setTimeout是异步任务且宏函数，记做timer1放到宏函数队列；

3.add()下面的setTimeout是异步任务且宏函数，记做timer2放到宏函数队列；

4.new Promise是同步任务，直接执行，打印4；

5.Promise里面的setTimeout是异步任务且宏函数，记做timer3放到宏函数队列；

6.Promise里面的for循环，同步任务，执行代码；

7.Promise.then是微任务，放到微任务队列；

8.console.log(8)是同步任务，直接执行，打印8；

9.此时主线程任务执行完毕，检查微任务队列中，有Promise.then，执行微任务，发现有setTimeout是异步任务且宏函数，记做timer4放到宏函数队列；

10.微任务队列中的console.log(7)是同步任务，直接执行，打印7；

11.微任务执行完毕，第一次循环结束；

12.检查宏任务Event Table，里面有timer1、timer2、timer3、timer4，四个定时器宏任务，按照定时器延迟时间得到可以执行的顺序，即Event Queue：timer2、timer4、timer3、timer1，取出排在第一个的timer2；

13.取出timer2执行，console.log(3)同步任务，直接执行，打印3；

14.没有微任务，第二次Event Loop结束；

15.取出timer4执行，console.log(6)同步任务，直接执行，打印6；

16.没有微任务，第三次Event Loop结束；

17.取出timer3执行，console.log(5)同步任务，直接执行，打印5；

18.没有微任务，第四次Event Loop结束；

19.取出timer1执行，console.log(2)同步任务，直接执行，打印2；

20.没有微任务，也没有宏任务，第五次Event Loop结束；

21.结果：1，4，8，7，3，6，5，2

第五个例子

setTimeout(function(){// timer1console.log(1); setTimeout(function(){// timer3console.log(2); })},0);setTimeout(function(){// timer2console.log(3);},0);执行结果//1，3，2

分析：

1.第一个setTimeout是异步任务且宏函数，记做timer1放到宏函数队列；

2.第三个setTimeout是异步任务且宏函数，记做timer2放到宏函数队列；

3.没有微任务，第一次Event Loop结束；

4.取出timer1，console.log(1)同步任务，直接执行，打印1；

5.timer1里面的setTimeout是异步任务且宏函数，记做timer3放到宏函数队列；

6.没有微任务，第二次Event Loop结束；

7.取出timer2，console.log(3)同步任务，直接执行，打印3；

8.没有微任务，第三次Event Loop结束；

9.取出timer3，console.log(2)同步任务，直接执行，打印2；

10.没有微任务，也没有宏任务，第四次Event Loop结束；

11.结果：1，3，2

7.参考文章：

1.ssssyoki《这一次，彻底弄懂 JavaScript 执行机制》

https://juejin.im/post/59e85eebf265da430d571f89#heading-9

2.阮一峰《JavaScript 运行机制详解：再谈Event Loop》

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

3.ziwei3749 《深入理解JS引擎的执行机制》

https://segmentfault.com/a/1190000012806637

4.Jake《Tasks, microtasks, queues and schedules》

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/?utm_source=html5weekly

作者：StarryLake

链接：https://www.jianshu.com/p/e06e86ef2595

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。