深入理解事件循环 2020-08-13

深入理解JS的事件循环
一、循环
单线程可以顺序处理确定好的任务。

但是如果在线程执行过程中，想加入新任务，怎么办？
只能引入循环机制，让线程持续运转，再来任务也可以执行。

二、队列
如果别的线程要给主线程加很多任务，怎么处理呢？

队列，先进先出，所以有了任务队列

页面主线程是如何接收外部任务的？
如果其他进程想要发送任务给页面主线程，那么先通过 IPC 把任务发送给渲染进程的 IO 线程，IO 线程再把任务发送给页面主线程

chromium内核基本的事件循环系统了：
1.JavaScript V8引擎在渲染进程的主线程上工作
2.主线程有循环机制，能在线程运行过程中，能接收并执行新的任务
3.交给主线程执行的任务会先放入任务队列中，等待主线程空闲后依次调用
4.渲染进程会有一个IO线程：IO线程负责和其它进程IPC通信，接收其他进程传进来的消息

三、完善运转之高优先级
如何处理高优先级的任务？——微任务
比如监听DOM的变化，优先级就比较高。
在每个任务内部，开辟一个属于该任务的队列，在当前任务执行完准备退出时，就执行该任务内部的队列。放到这个特殊队列中的任务就被称为微任务。
现代浏览器里，产生微任务只有两种方式。
1.用MutationObserver监控某个DOM节点，节点发生变化时，就会产生DOM变化记录的微任务。
2.使用Promise，调用Promise.resolve()或Promise.reject()时，也会产生微任务.

常见的宏任务：
1.定时器类：setTimeOut setInterval setImmediate
2.I/O操纵 ：读写文件
3.消息通道 ：MessageChannel

四、完善运转之回调
如何处理执行时间长的任务？——回调
排版引擎blink和JS引擎 V8都工作在渲染进程的主线程上并且是互斥的
在单线程中，每次只能执行一个任务，其他任务都处于等待状态。如果其中一个任务执行时间过久，那么下一个任务就要等待很长时间。
如果一个JS任务运行时间很长，主线程就无法交给排版引擎工作，用户体验就会很糟糕。
所以要用回调来解决这个问题。

浏览器是怎么实现setTimeOut的？

• setTimeout任务存到哪了？
• setTimeout到时间后怎么触发？
• 取消setTimeout是如何实现的？

Chrome还维护着一个延迟任务队列。当调用setTimeOut时，渲染进程会将该定时器的回调任务添加到延迟任务队列中。
回调任务队列的信息包含：回调函数、当前发起时间、延迟执行时间。
当主线程执行完任务队列中的一个任务之后，主线程会对延迟任务队列中的任务，通过发起时间和延迟执行时间计算出已经到期的任务，然后依次执行这些到期的任务，等到期的任务全部执行完后，主线程就进入到下一次循环中。