浏览器的事件循环机制

浏览器内核的线程

1. GUI渲染线程：
   • 负责页面渲染，解析HTML,CSS构成DOM树等，
   • 当页面重绘（Repaint）或者由于某种操作引起回流（reflow）都会调起该线程
   • GUI渲染线程和js引擎线程互斥，当JS引擎线程在工作的时候，GUI渲染线程会被挂起，GUI更新被放入在JS任务队列中，等待JS引擎线程空闲时立即被执行。
2. JS引擎线程
   • 也成为JS内核，负责处理Javascript脚本程序。（例如v8引擎）
   • JS引擎线程负责解析Javascript脚本，运行代码。
   • JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页(renderer进行)中无论什么时候都只有一个JS线程在运行JS程序。
   • GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导出页面渲染加载阻塞。
3. 事件触发线程
   • 当事件符合触发条件被触发时，该线程会把对应的事件回调函数添加到任务队列的队尾，等待 JS 引擎处理。
   • 归属于浏览器而不是JS引擎，用来控制事件循环。
   • 当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程，如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
   • 当对应的时间符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
   • 由于JS的单线程关系，这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）
4. 定时器触发线程
   • 浏览器定时计数器并不是由Javas引擎计数的(因为时单线程，会导致阻塞线程就会影响计时的准确)
   • 开启定时器触发线程时并触发计时，计时完成后会被添加到任务队列中，等待js引擎处理。
5. 异步http请求线程
   • 在XMLHttpRequest连接后 在浏览器新开一个线程请求
   • 在检测到状态变更时，如果有设置回调函数，异步线程就**产生状态变更事件*，将这个回调在放入事件队列中，再由Javascript引擎执行。
     

Event Loop （事件循环机制）

1. JS分为同步任务和异步任务
2. 同步任务都在主线程上执行，形成一个执行栈
3. 除主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
4. 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

TODO:事件循环进阶：macrotask（宏任务）与microtask（微任务）

参考文章：
https://www.cnblogs.com/cangqinglang/p/8963557.html
https://www.cnblogs.com/yqx0605xi/p/9267827.html