彻底弄清楚js执行机制【单线程、异步、event-loop】

        第一次写博客，写的不好或者有错误请指正！虚心的小强.......

        大家都知道， javaScript是一种单线程的解释型语言，何为单线程？ 简单的说就是 : js每次只能执行一行js代码【eg: 就像坐地铁一样，进入地铁都要经过闸机口，要么刷二维码进去，要么刷卡，一次只能通一个人，不能一次性多人通过】。在一篇文章描述的比较好：一切javascript版的“多线程”都是单线程模拟出来的，一切javascript多线程都是纸老虎。

        如图中的代码可以看出，控制台并不会直接输出 “start” 和 "end"， 而是遇到alert时候会弹出 "js执行暂停" 点击确认后才会输出 "end"  。 

        大家有没有想过，为什么js是单线程的？ 个人理解是： JS是可以改变DOM渲染的， 试想一下如果一次性同时执行多个js代码，那么js渲染引擎到底执行那一条。这不就冲突了（总结：防止DOM渲染冲突）。所以JS设计成单线程。

        为了解决js单线程问题，提出了异步解决方案。下面一个简单例子

    大家都知道输出顺序是： “start1”  "end"  "执行setTimeout"。这就是异步。 但是异步也是有问题的 并不是非常的完美，首先， 没有按照书写方式执行，其可读性差；其次，callback中不容易模块化；【后期会写一篇文章主要描述 解决异步问题的方案，欢迎关注】。

    每打开一个网页，网页需要渲染一堆任务。那么js到底是如何运行的呢？到底哪个先执行哪个后执行。这就需要引出event-loop（事件轮循）。聪明的程序猿把任务分为：

    1） 同步任务； 2）异步任务

      下面用几句化概括：

        * 同步和异步任务分别进入不同的执行"环境"，同步的进入主线程，异步的进入Event Table（事件列表）并注册函数。

        * 当指定的事情完成时（异步事件），Event Table将第一步注册的函数移入Event Queue（事件队列）。

        * 主线程内的任务执行完毕为空（也就是指同步任务），会去Event Queue读取对应的函数，进入主线程执行。

        * 上述过程会不断重复，也就是常说的event-loop(事件轮循)。

        那么就有人会问，浏览器是怎么知道主线程执行栈为空了？ js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。这就是所说的 event-loop了。贴一段代码和描述：

除了广义的同步任务，我们对任务有更精细的定义：

* macro-task(宏任务)：包括整体代码script，setTimeout，setInterval

* micro-task(微任务)：Promise，process.nextTick

    事件轮循的顺序，决定js代码的执行顺序。进入整体代码后，开始第一次循环，执行所有同步代码，接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

直接贴代码和描述：

  请牢牢记住： javascript是一门单线程语言； Event Loop是javascript的执行机制。

本文参考：https://juejin.im/post/59e85eebf265da430d571f89