首先来一个图形：
image.png
首先理解一下堆栈的概念
栈的分配是在程序编译的时候完成的，直接存储在内存中，接触内存很快。栈是后进先出的顺序，最后被申请的块最先被释放，这样就很容易跟踪到栈，释放栈的过程简单到仅仅是移动下指针就能完成。
堆的分配是在程序运行时完成的，分配速度较为缓慢，但是堆的可用空间非常的大。堆中的元素相互之间没有关联，各自都可以被任何时候随机访问。我们可以任何时候申请和释放一块内存，这样会使得我们很难随时随地追踪到堆中某块位置被分配了还是被释放了。
let test = ( a ) => {
let b = 5;
return a + b;
}
let check = () => {
let c = 6;
return test(c)
}
check() // 11
当我们调用check的时候就会生成一个栈帧，然后check中调用test的时候就会生成第二个栈帧，当test执行返回之后就会将第二个栈帧释放，最后check返回，栈帧清空了。
那么在调用之前就是堆了，对象被分配在一个堆中，即用以表示一大块非结构化的内存区域。
一个 JavaScript 运行时包含了一个待处理的消息队列。每一个消息都关联着一个用以处理这个消息的函数。
在事件循环期间的某个时刻，运行时从最先进入队列的消息开始处理队列中的消息。为此，这个消息会被移出队列，并作为输入参数调用与之关联的函数。正如前面所提到的，调用一个函数总是会为其创造一个新的栈帧。
函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。
执行至完成
每一个消息完整的执行后，其它消息才会被执行。这为程序的分析提供了一些优秀的特性，包括：一个函数执行时，它永远不会被抢占，并且在其他代码运行之前完全运行（且可以修改此函数操作的数据）。这与C语言不同，例如，如果函数在线程中运行，它可能在任何位置被终止，然后在另一个线程中运行其他代码。
这个模型的一个缺点在于当一个消息需要太长时间才能处理完毕时，Web应用就无法处理用户的交互，例如点击或滚动。浏览器用“程序需要过长时间运行”的对话框来缓解这个问题。一个很好的做法是缩短消息处理，并在可能的情况下将一个消息裁剪成多个消息。
添加消息
在浏览器里，当一个事件发生且有一个事件监听器绑定在该事件上时，消息会被随时添加进队列。如果没有事件监听器，事件会丢失。所以点击一个附带点击事件处理函数的元素会添加一个消息，其它事件类似
函数 setTimeout 接受两个参数：待加入队列的消息和一个延迟（可选，默认为 0）。这个延迟代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。
eg:
const s = new Date().getSeconds();
setTimeout(function() {
// 输出 "2"，表示回调函数并没有在 500 毫秒之后立即执行
console.log("Ran after " + (new Date().getSeconds() - s) + " seconds");
}, 500);
while(true) {
if(new Date().getSeconds() - s >= 2) {
console.log("Good, looped for 2 seconds");
break;
}
}
网友评论