JS事件循环(Event Loop)

为什么JavaScript是单线程？

        JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

        所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

        为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

同步任务和异步任务:

        单线程，就是指一次只能完成一件任务，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务。但如果有一个任务的执行时间很长，比如文件的读取或者数据的请求等等，那么后面的任务就要一直等待，这就会影响用户的使用体验。
为了解决这种情况，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

        同步模式:  就是前一个任务执行完成后，再执行下一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的；
        异步模式: 则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行队列上的后一个任务，而是执行回调函数；后一个任务则是不等前一个任务的回调函数的执行而执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
        

事件循环(Event Loop)：

        同步任务和异步任务分别进入不同的执行"场所"; 同步任务进入主线程，异步任务进入Event Table并注册回调函数。
        当指定的事情完成时，Event Table会将这个函数移入任务队列(task quene)，等待主线程的任务执行完毕;
        当栈中的代码执行完毕，执行栈(call stack)中的任务为空时，就会读取任务队列(task quene)中的任务，去执行对应的回调;
        如此循环，就形成js的事件循环机制(Event Loop)。

执行过程:

1. 所有同步任务都在主线程上执行，形成一个执行栈(execution context stack)。
2. 遇到异步任务, 进入Event Table并注册回调函数; 等到指定的事件完成(如ajax请求响应返回, setTimeout延迟到指定时间)时，Event Table会将这个回调函数移入Event Queue。
3. 当栈中的代码执行完毕，执行栈（call stack）中的任务为空时，主线程会先检查micro-task(微任务)队列中是否有任务，如果有，就将micro-task(微任务)队列中的所有任务依次执行，直到micro-task(微任务)队列为空; 之后再检查macro-task(宏任务)队列中是否有任务，如果有，则取出第一个macro-task(宏任务)加入到执行栈中，之后再清空执行栈，检查micro-task(微任务)，以此循环，直到全部的任务都执行完成。

 

 

 

任务队列(task queue) 或 事件队列(event queue):

        SetTimeout和promise都是异步任务，那么它们两个先执行谁呢？
        其实在js中也是有一个机制，就是会分为宏任务和微任务。宏任务和微任务分别存放在不同的event queue,这两个队列分别为macrotack queue和microtack queue.

        任务队列分为: macro-task(宏任务)队列, micro-task(微任务)队列;

        在最新标准中，它们被分别称为task与jobs。

macro-task（宏任务）:

• script(整体代码)

• setTimeout

• setInterval

• setImmediate

• I/O (比如Ajax操作从网络读取数据)

• UI render

micro-task（微任务）:

• process.nextTick

• Promise

• Async/Await(实际就是promise)

• MutationObserver(html5新特性)

事件表格(Event Table):

        Event Table 可以理解成一张事件->回调函数 对应表。

        用来存储 JS 中的异步事件 (request, setTimeout, IO等) 及其对应的回调函数的列表。

        当指定的事件完成(如ajax请求响应返回, setTimeout延迟到指定时间)时，Event Table会将这个回调函数移入Event Queue, 即macro-task(宏任务)队列 或 micro-task(微任务)队列。