对JS事件机制的深入理解
一、发生一个事件时，事件及事件处理句柄会被放入浏览器的事件队列，事件可归为以下几类：
浏览器事件：window.load、document.domContentLoaded等
网络请求事件:ajax、websocket
用户事件:单双击、鼠标滚动、调整页面大小等
计时器事件：setTimeout,setInterval
二、事件的执行是异步的。
三、对事件队列的处理（放入及执行）是浏览器的渲染进程（又叫内核进程、render进程）负责，渲染进程分为以下线程：
1.GUI线程
当界面需要重绘或回流时，该线程会被执行；
该线程与JS引擎线程是互斥的，当JS引擎在执行时，该线程会处于暂停状态。这也就是为什么一段JS代码执行时间比较久时页面会出现空白或卡顿的原因
2.JS引擎线程
又叫JS内核，负责解析和执行JS代码；
当JS引擎执行到事件代码语句时（比如addEventListener），会通知事件线程需要关注XXX事件；
3.事件触发线程
主要负责事件队列的维护
当事件触发时会被事件线程监听到，事件线程把事件处理程序放入到事件队列中,这一过程不会打断JS引擎线程的执行
4.定时器触发线程
setTimeout与setInterval所在的线程；
由于js引擎是单线程的，如果处于阻塞线程状态，则会影响记时的准确性，因此需要单独的线程来计时并触发事件
5.异步请求线程
XmlHttpRequest所在线程；
假如不采用单独的线程而是直接使用JS引擎线程，从发出请求到等待服务端给出响应的这段时间，JS引擎就会一直处于运行状态，原本可以继续执行后面的代码的，现在只能等待
四、JS是单线程运行的的、那Worker为何可以达到多线程的效果？
为什么JS是单线程执行的？假如JS是多线程执行的，一个线程要添加DOM、另一个线程要删除DOM，就会乱套，这就像两台电脑不能同时使用同一台打印机一样的道理；
创建WebWorker时，JS引擎线程向浏览器申请了worker专用的线程，worker线程(子线程)与JS引擎线程（主线程）之间通过postMessage api进行线程间的通讯，可以理解为浏览器给JS引擎线程开了外挂；
ShardWorker是浏览器中所有tab标签共享的，每个tab标签都有独立的render进程，所以SharedWorker不属于某个Render进程，而是浏览器开了独立的进程来管理。
五、事件循环机制
当事件触发线程监测到事件执行时会把事件处理程序放入队列以便事件循环使用，事件队列分为宏任务队列和微任务队列
宏任务：setTimeout，setInterval，setImmediate，requestAnimationFrame，I / O，UI呈现，js同步代码等
微任务：Promises，Object.observe，MutationObserver
事件循环机制的执行过程如下：
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
