JS运行机制

本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记，便于之后复习。本文将从以下几个方面说明：、

1.如何理解JS的单线程

2.同步任务异步任务

3.异步执行的运行机制

4.什么是Event Loop（事件循环）

在说明以上4点之前先给几个小例子

例一：

▲打印顺序应该是1、3、4、2；由于js是单线程的，从上到下执行，先输出1，setTimeout是异步任务需要挂起，向后执行输出3，4，同步任务执行完毕再处理异步任务，输出2.所以最终结果是1、3、4、2。

例二：

▲打印顺序应该是 A；从上到下执行，先打印A，while是同步任务，所以在循环里出不来，不会打印B。

例三：

▲打印顺序应该是4、4、4、4；

       由于for是一个同步任务先执行，i+1后将 setTimeout交给定时器模块但是没有放入任务队列中去，for循环体执行完成后，任务队列依次执行setTimeout，此时任务队列里没有serTimeout，因为1000ms还没到，时间到了后，定时器会将setTimeout放入任务队列中，任务队列再等待事件循环（Event Loop）再执行。

1.如何理解JS的单线程

        单线程是指Js引擎执行Js时只分了一个线程给他执行，也就是说同一个时间只能做一件事。为了实现Js执行时的单线程，Js引擎维护着一个执行栈。（先进后出）

2.同步任务异步任务

       所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

       异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

异步任务：

    setTimeout和setInterval

    DOM事件  //addEventLisener

    ES6中的Promise

3.异步执行的运行机制

1）.所有同步任务都在主线程上执行，形成一个执行栈

2）.主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。

3）.一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

4）.主线程不断重复上面的第三步。

即：只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制

4.什么是Event Loop（事件循环）

       主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。既然JS是单线程的,只能在一条线程上执行, 是通过的事件循环(event loop)实现的异步。