浏览器执行机制探究，图解最直观

作了这么久前端，本身一直很想深刻去了解了解这些玩意儿，奈何每天扑在项目上，基本没有闲余时间去想去作

面试的时候你们应该也会被问到一些浏览器执行机制的问题，我最近也去研究了一下，分享一点本身的心得。

因为segmentfault的限制缘由，这儿大图放不上来，你们看图片的时候须要点击图片下方的"查看原图"才能看清除里面写的内容

---

写得很差，或者有意见的直接喷，不用走流程。也欢迎大佬指点

---

用图片的执行流程来解释一下，有图有真相

这儿加一个知识点：

栈：一种数据结构，具备的特色：先进后出(FILO—First-In/Last-Out)
队列：也是一种数据结构，具备的特色：先进先出（FIFO—first in first out）

先来一张图（ps：有没有跟我同款的输入法主题的，握个抓爪，哈哈）：

图上咱们能看到咱们能常常听到的几个关于浏览器执行过程的词语：

栈：顺序存放咱们要执行代码
事件表：存放咱们将要执行的事件（我以为能够理解为在某些条件下执行的事件），例如图上的setTimeout内部的匿名函数、click事件（图上anonymous是匿名的意思，估计有童鞋不知道，写这儿了）
回调队列：这个应该很熟悉了，就是咱们定义执行的回调函数组成的队列

而后咱们一步一步来解析这个玩意儿：

开始执行咱们写的这个很是很是很是简单的js代码

咱们能看到栈里面存上咱们要执行的console，这儿第一部没有别的代码执行，开始执行下面的代码，狗昂！！！

而后就是执行咱们这个setTimeout函数，如上图所示，一样的先被推入执行栈，咱们在定时函数里面整了个匿名函数，继续看

如上图，我们这儿的匿名函数进入了事件表内，而后过1000ms会进入回调队列里面，继续看

跟上面同样，顺序执行这个console，而后把我们在setTimeout内定义的函数放到了回调队列中，等待执行栈空闲了就会执行，继续看

上面的图仍是按照我们熟知的顺序执行，把最后写的那个绑定的click事件放入事件表，等待我们去点击那个button按钮触发click事件。同时在1秒计时完成后把事件表的匿名函数推入到回调队列里面。狗昂！！

上图能看到，click事件在事件表了，我们顺序执行的代码已经完成，而后执行栈空闲了，开始执行我们回调队列的函数。继续看

上图中，回调队列的函数被推到空闲的执行栈中去执行。

上图中，执行栈执行匿名函数，咱们在控制台能看到打印的console信息。

这儿还有个小知识点，栈的特性是：先入后出，后入先出。咱们如今看到执行栈中，console是后于匿名函数进入栈的，因此栈弹出已经执行的函数的顺序是先弹出console，而后再弹出匿名函数。继续看

上图中，等待执行栈空闲了，咱们去点击button执行click事件。

写到这儿我估计有杠精要说为啥要等到执行栈空了再去点那个button按钮，笑哭啊！！！我曾经遇到过这样的一个童鞋，非要跟我杠。这儿说明一下，若是执行栈还有未执行完的函数，咱们点那个按钮，click事件的回调函数会按数组push的方式跟在如今回调队列数组后，而后一个一个地再被unshift到咱们的执行栈去执行。

上面三个图就跟前面执行匿名函数的流程同样的。

想给你们放一个完整执行的过程的gif好像没找到录制的工具，后续若是找到好用的工具我把图放上来