XFE 技术 生活 笔记 文集

javascript运行时中的堆栈和队列

🔖 javascript 👀 46 🕒 2018-03-03 👨‍🎓 戡玉

下面是一个理论上的模型,js引擎着重实现和优化了描述的这几个语义

可视化描述

test.jpg

栈(stack)

var a = 10;
function bar(x) {
  var b = 5;
  fn(x + b);
}
function fn(y) {
  var c = 5;
}
bar(10);

js会以一种执行栈的方式去执行代码,以一种入栈和出栈的方式,后进先出的完成代码执行,用下图表示如下(上下文描述可以忽略,有兴趣的可以参考这篇文章,此文不作讲解):

232125295149083.png

堆(heap)

简单点说,就是一块内存区域,用来存储声明的变量、对象,相比栈而言,它是无结构的,而栈(stack)是有结构的。

队列(queue)

一个js运行时包含了一个待处理的消息队列,每一个消息都与一个函数相关联。当栈(stack)拥有足够内存时,从队列中取出一个消息进行处理。这个处理过程包含了调用与这个消息相关联的函数(以及因而创建了一个初始堆栈帧)。当栈(stack)再次为空的时候,也就意味着消息处理结束。

在处理消息队列的时候,会涉及到事件循环(Event Loop),在游览器中由事件触发线程进行,用下图很好的描述了整体结构:

bg2014100802.png

对事件循环的原理和js异步和线程感兴趣的,可以读读这篇文章

参考链接