JavaScript中的事件循环

JS中的事件循环你可能你知道，也可能你不知道，也可能你不知道自己到底知不知道，
当然了，不管你知不知道，你每天写的JS代码都离不开这个概念，不管是客户端，还是Node.

我们先看下面的例子

console.log('Hi')
setTImeout(function(){
    console.log('there')
},5000)
console.log('JSConfEU')

你觉得执行的顺序是怎么样的？

JavaScript是单线程的编程语言，意思就是同一时间只能做一件事情。老司机和新手司机可能都知道输出顺序，但是你知道为什么是这样吗？再举一个例子，想一下下面的执行顺序是什么呢？

console.log('Hi')
setTImeout(function(){
    console.log('there')
},5000) 
console.log('JSConfEU')

先看一下这张图片。里面有几个概念，Heap, Stack, Queue.

我们先把堆放一边，看看什么是栈。

什么是Stack(栈)？

每当有一个函数调用，就会将其压入栈顶。在调用结束的时候再将其从栈顶移出。栈的特性是先进后出，后进先出。栈是有序的
想一下上面的代码。执行结果应该都是

Hi
JSConfEU
there

到底是怎么做到的呢？再看一下下图。通过以下视频应该就能理解了。

什么是Queue(队列)

这里的列队指的是task queue（任务队列），队列也是有序的，先进先出，在当前栈空的情况下，队列中的函数会按加入的先后顺序依次被推到栈中执行。

最后说说什么是Heap(堆)

简单的说一下什么是堆，因为这个概念看了一些网上的介绍和维基百科，还是云里雾里的，直到看到一个视频，才对堆和栈有个宏观的了解，下面我简单的描述一下。
讲到堆，就必须要拿栈来对比。先看下面这张图

用书、矿泉水瓶、包等等物品排队的现场，这些物品排的队可以代表栈，旁边随便站的那些无序的人就是堆。栈里面只能存一些primitives value.比如var a = 1, b = 2这样的，因为栈是非常快的，需要的是处理速度，而堆相对很慢，用来存储一些复杂的对象，然后栈里面存在一个pointer指向堆里面的对象。用刚刚排队的例子来看，这些书，或者瓶子就是pointer(指针)，当排队排到它的时候，必须要物品的主人过去。

说到这里，垃圾回收也很好理解了，垃圾回收是一个释放计算机内存的过程。当对象0引用的时候，就可以被回收了。还拿刚刚的图片举例，如果某个人办完事了，那他不会留在这里，还会把他的物品带走。如果某个人站在那里，但是他没放物品在那里排队，那他也会被回收。属于无效资源，还浪费空调。。

墙裂推荐结尾附录的这个视频Stack Versus Heap，简单明了。

差不多介绍完了，主要是对自己学习的一个总结。

本篇内容参考
Philip Roberts: What the heck is the event loop anyway?
MDN EventLoop
Stack Versus Heap