事件循环 event loop 究竟是什么

事件循环 event loop 究竟是什么

一些概念

• 浏览器运行时是多进程，从任务管理器或者活动监视器上可以验证。 打开新标签页和增加一个插件都会增加一个进程，如下图：
  

• 浏览器渲染进程是多线程，包含GUI渲染线程，js引擎线程，事件触发线程，定时器线程，异步请求线程等， 平时说js是单线程就是指js引擎线程。

• 事件触发线程：用来控制事件循环，管理着一个任务队列，会将鼠标点击，ajax异步请求等任务(通俗的讲就是绑定的方法或回调函数)添加到线程中，当对应的事件触发，该线程会将任务添加到任务队列中，等待js引擎处理

• js分为同步和异步，在js引擎线程(主线程)上执行，创建执行栈，一旦执行栈中所有的同步任务执行完毕，js引擎空闲下来，就会读取任务队列，按照一定的优先级放置到执行栈中，继续执行。

event loop 在代码层面应该类似于while(true){}的循环【纯属猜测 ('∀') 】

但是为什么事件循环不会造成浏览器卡死？
浏览器使用事件触发线程接收鼠标click点击或滚动，网络的异步返回，定时器的回调等，所以js引擎线程执行即便是一个死循环也不会造成浏览器卡死。
但是如果任务队列中的某一项任务处于死循环或者执行时间过长，会导致js引擎不能进入下一轮任务轮询，无法对用户的交互作出反馈，在用户看来就像浏览器卡死了一样。

任务队列 ： microtask(微任务) macrotask(宏任务)

macrotask ： 主代码块、setTimeout、setInterval会添加到宏任务队列，在执行完本轮macrotask之后会对页面重新渲染，所以在某些情况下我们会写出如下代码：

    // jquery操作dom
    setTimeout(function(){
        // 在此处获取更新后的dom
    },10)

microtask ：promise 在本次渲染之前执行，所以比macrotask执行要早

总结下运行机制：

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）