一个前端弟弟的朝花夕逝笔记（一）——关于事件循环机制

关于前端路上的笔记

陆陆续续做了前端开发也算有段时间了，老是觉得自己学了这个丢了那个。今天看后端有个同事在写东西，我问她写了干啥，她说好记性不如烂笔头。一想也是，看了文章然后忘记再去看，还不如自己记下来。若是记录有错的地方，请大佬们轻喷，且指出。

首先有两点

1.JavaScript是单线程的语言
2.Event Loop是javascript的执行机制

为什么JavaScript是单线程的语言？

js作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。
在js高程中举过一个栗子，如果js同时有两个线程，同时对同一个dom进行操作，这时浏览器应该听哪个线程的，如何判断优先级？
为了避免这种问题，js必须是一门单线程语言，并且在未来这个特点也不会改变。

js是单线程，就像学生排队上厕所，学生需要排队一个一个上厕所，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类：同步和异步

什么是event loop

event loop是一个执行模型，在不同的地方有不同的实现。浏览器和NodeJS基于不同的技术实现了各自的Event Loop。

对于事件循环机制的-宏任务和微任务

宏队列，macrotask，也叫tasks。 一些异步任务的回调会依次进入macro task queue，等待后续被调用，这些异步任务包括：
setTimeout
setInterval
setImmediate (Node独有)
requestAnimationFrame (浏览器独有)
I/O
UI rendering (浏览器独有)

微队列，microtask，也叫jobs。 另一些异步任务的回调会依次进入micro task queue，等待后续被调用，这些异步任务包括：
process.nextTick (Node独有)
Promise
Object.observe
MutationObserver
（注：这里只针对浏览器和NodeJS）

讲执行一个JavaScript代码的具体流程：

1.执行全局Script同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如setTimeout等）；
2.全局Script代码执行完毕后，调用栈Stack会清空；
3.从微队列microtask queue中取出位于队首的回调任务，放入调用栈Stack中执行，执行完后microtask queue长度减1；
4.继续取出位于队首的任务，放入调用栈Stack中执行，以此类推，直到直到把5.microtask queue中的所有任务都执行完毕。注意，如果在执行microtask的过程中，又产生了microtask，那么会加入到队列的末尾，也会在这个周期被调用执行；
6.microtask queue中的所有任务都执行完毕，此时microtask queue为空队列，调用栈Stack也为空；
7.取出宏队列macrotask queue中位于队首的任务，放入Stack中执行；
执行完毕后，调用栈Stack为空；
8.重复第3-7个步骤；
9.重复第3-7个步骤；
…

总结

1.浏览器的Event Loop和NodeJS的Event Loop是不同的，实现机制也不一样，不要混为一谈。
2.浏览器可以理解成只有1个宏任务队列和1个微任务队列，先执行全局Script代码，执行完同步代码调用栈清空后，从微任务队列中依次取出所有的任务放入调用栈执行，微任务队列清空后，从宏任务队列中只取位于队首的任务放入调用栈执行，注意这里和Node的区别，只取一个，然后继续执行微队列中的所有任务，再去宏队列取一个，以此构成事件循环。
3.NodeJS可以理解成有4个宏任务队列和2个微任务队列，但是执行宏任务时有6个阶段。先执行全局Script代码，执行完同步代码调用栈清空后，先从微任务队列Next Tick Queue中依次取出所有的任务放入调用栈中执行，再从微任务队列Other Microtask Queue中依次取出所有的任务放入调用栈中执行。然后开始宏任务的6个阶段，每个阶段都将该宏任务队列中的所有任务都取出来执行（注意，这里和浏览器不一样，浏览器只取一个），每个宏任务阶段执行完毕后，开始执行微任务，再开始执行下一阶段宏任务，以此构成事件循环。
4.MacroTask包括： setTimeout、setInterval、 setImmediate(Node)、requestAnimation(浏览器)、IO、UI rendering
5.Microtask包括： process.nextTick(Node)、Promise、Object.observe、MutationObserver