JavaScript Event Loop机制详解与Vue.js中nextTick的实践应用

51CTO诚邀您9月23号和秒拍/国美/美团元专家一路聊智能CDN的优化之路，抓紧时光哦！

while (queue.waitForMessage()) { 
 
  queue.processNextMessage(); 
 
}

本文依次介绍了函数调用栈、MacroTask 与 MicroTask 履行次序、浅析 Vue.js 中 nextTick 实现等内容;本文中引用的参考材料同一声明在 JavaScript 进修与实践材料索引。

1. 事宜轮回机制详解与实践应用

JavaScript 是典范的单线程单并发说话，即表示在同一时光片内其只能履行单个义务或者部分代码片。换言之，我们可以认为某个同域浏览器高低中 JavaScript 主线程拥有一个函数调用栈以及一个义务队列(参考 whatwg 规范);主线程会依次履行代码，当碰到函数时，会先将函数入栈，函数运行完毕后再将该函数出栈，直到所有代码履行完毕。当函数调用栈为空时，运行时即会根据事宜轮回(Event Loop)机制来大年夜义务队列中提掏出待履行的回调并履行，履行的过程同样会进行函数帧的入栈出栈操作。每个线程有本身的事宜轮回，所以每个 Web Worker有本身的，所以它才可以自力履行。然而，所有同属一个 origin 的窗体都共享一个事宜轮回，所以它们可以同步交换。

Event Loop(事宜轮回)并不是 JavaScript 中独有的，其广泛应用于各个范畴的异步编程实现中;所谓的 Event Loop 等于一系列回调函数的集合，在履行某个异步函数时，会将其回调压入队列中，JavaScript 引擎会在异步代码履行完毕后开端处理其接洽关系的回调。

在 Web 开辟中，我们经常会须要处理收集请求等相对较慢的操作，如不雅将这些操作全部以同步壅塞方法运行无疑会大年夜大年夜降低用户界面的体验。另一方面，我们点击某些按钮之后的响应事宜可能会导致界面重衬着，如不雅因为响应事宜的履行而壅塞了界面的衬着，同样会影响整体机能。实际开辟中我们会采取异步回调来处理这些操作，这种调用者与锾螃之间的解耦包管了 JavaScript 可以或许在等待异步操作完成之前仍然可以或许履行其他的代码。Event Loop 恰是负责履行队列中的回调并且将其压入到函数调用栈中，其根本的代码逻辑如下所示：

e: 将 currently running task 设置为 null 并移出 task X

完全的浏览器中 JavaScript 事宜轮回机制图解如下：

在 Web 浏览器中，任何时刻都有可能会有事宜被触发，而仅有那些设置了回调的事宜会将其相干的义务压入到义务队列中。回调函数被调用时即会在函数调用栈中创建初始帧，而直到全部函数调用栈清空之前任何产生的义务都邑被压入到义务队列中延后履行;次序的同步函数调用则会创建新的┞坊帧。总结而言，浏览器中的事宜轮回机制阐述如下：

浏览器内核会在其它线程中履行异步操作，当操作完成后，将操作结不雅以及事先定义的回调函数放入 JavaScript 主线程的义务队列中。
JavaScript 主线程会在履行栈清空后，攫取义务队列，攫取到义务队列中的函数后，将该函数入栈，一向运行直到履行栈清空，再次去攫取义务队列，赓续轮回。
当主线程壅塞时，义务队列仍然是可以或许被推入义务的。这也就是为什么当页面的 JavaScript 过程壅塞时，我们触发的点击等事宜，会在过程恢复后依次履行。

2. 函数调用栈与义务队列

在变量感化域与晋升一节中我们介绍过所谓履行高低文(Execution Context)的概念，在 JavaScript 代码履行过程中，我们可能会拥有一个全局高低文，多个函数高低文或者块高低文;每个函数调用都邑创造新的高低文与局部感化域。而这些履行高低文堆叠就形成了所谓的履行高低文┞坊(Execution Context Stack)，便如上文介绍的 JavaScript 是单线程事宜轮回机制，同时?决会履行单个事宜，而其他事宜都在所谓的履行栈中列队等待：

而大年夜 JavaScript 内存模型的角度，我们可以将内存划分为调用栈(Call Stack)、堆(Heap)以及队列(Queue)等几个部分：

个中的调用栈会记录所有的函数调用信息，当我们调用某个函数时，会将其参数与局部变量等压入栈中;在履行完毕后，会弹出栈首的元素。而堆则存放了大年夜量的非构造化数据，譬如法度榜样分派的变量与对象。队列则包含了一系列待处理的信息与相接洽关系的回调函数，每个 JavaScript 运行时都必须包含一个义务队列。当调用栈为空时，运行时会大年夜队列中掏出某个消息并且履行其接洽关系的函数(也就是创建栈帧的过程);运行时会递归调用函数并创建调用栈，直到函数调用栈全部清空再大年夜义务队列中掏出消息。换言之，譬如按钮点击或者 HTTP 请求响应都邑作为消息存放在义务队列中;须要留意的是，仅当这些事宜的回调函数存在时才会被放入义务队列，不然会被直接忽视。

譬如对于如下的代码块：

function fire() { 
 	
			 1/9    1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　借力大数据技术 证券行业迎转型契机
            51CTO诚邀您9月23号和秒拍/国美/美团元专家一路聊智能CDN的优化之路，抓紧时光哦！
            互联网+时代，证券行业制订大年夜数据计谋急切而合时。一方面，近年来大年夜数据被晋升到国度成长计谋层>>>详细阅读


本文标题：JavaScript Event Loop机制详解与Vue.js中nextTick的实践应用
地址：http://www.17bianji.com/lsqh/37333.html
 1/2    1