JavaScript的单线程及同步异步

最近在线直播授课时，有非计算机专业的孩子对进程、线程这样的知识没有概念，更加无法理解同步和异步。希望今天我用心整理的一篇文章，能够将这些问题解释清楚。

进程

进程是操作系统分配资源的最小单位，是应用程序运行的载体。
打开window的资源管理器，可以看到进程列表。通常一个应用程序对应一个或多个进程。例如下图中的chrome浏览器就对应多个进程。所以说浏览器是多进程的，而浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）。

image.png

线程

在早期的操作系统中并没有线程的概念，进程是能拥有资源和独立运行的最小单位，也是程序执行的最小单位。任务调度采用的是时间片轮转的抢占式调度方式，而进程是任务调度的最小单位，每个进程有各自独立的一块内存，使得各个进程之间内存地址相互隔离。后来，随着计算机的发展，对CPU的要求越来越高，进程之间的切换开销较大，已经无法满足越来越复杂的程序的要求了。于是就发明了线程，线程是程序执行中一个单一的顺序控制流程，是程序执行流的最小单元。
一个进程有一个或多个线程。 可以想想车站的多窗口售票，每个窗口可以看作一个线程，多窗口共同协作完成人售票任务。

流览器中的渲染进程

浏览器的多个进程中有一个渲染进程（浏览器内核）（Renderer进程），它的主要作用为页面渲染，脚本执行，事件处理等。这个渲染进程本身是多线程的，如GUII渲染线程、JS引擎线程等。

JS引擎的单线程机制

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征。

同步任务和异步任务

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。
JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。
于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（taskqueue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

问：js为什么需要异步?
答：如果JS中不存在异步,只能自上而下执行,万一上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验。
问： js单线程又是如何实现异步的呢?
答：通过事件循环(event loop)实现'异步'。
问： 异步任务有哪些呢？
答：定时函数setTimeout和setInterval; DOM事件绑定; Ajax操作; NodeJS中的fs文件读写等。

调用过程分析

image.png

首先，需要理解的是：

• 同步任务都在主线程上执行，形成一个执行栈
• 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

程序在第20行调用了b函数，b函数进行执行栈：

image.png

b函数调用setTimeout，setTimeout入栈：

image.png
因为setTimeout是一个异步任务（同步任务会进入主线程执行），浏览器会把setTimeout的回调函数（此例中是a函数）放到Event Table中。Event Table 是个注册站：执行栈让Event Table注册一个函数，该函数会在3秒之后被调用。而当注册完成后，setTimeout从执行栈中弹出。
image.png
一旦回调函数加入到Event Table中，代码不会被block住，浏览器不会等待3秒之后再继续处理接下去的代码，浏览器继续执行b函数的下一行代码，第17行代码，控制台输出BBB。然后b函数执行完毕。从执行栈中弹出。如下图：
image.png
当满足条件（3秒后）时，Event Table会将这个函数推入Event Queue。Event Queue其实就是个缓冲区域，这里的函数等着被移入执行栈。
image.png
那么，什么时候函数会从Event Queue移到执行栈中呢？JavaScript引擎依据一条规则：有一个monitor（可理解为监视器）会持续不断地检查执行栈是否为空，一旦为空，它会检查Event Queue里边是否有等待被调用的函数。如果有，它就会调用这个Queue中第一个函数并将其移到执行栈中。如果Event Queue为空，那么这个monitor会继续不定期的检查。这一整个过程就是Event Loop。
image.png
第12行代码执行，控制台输出AAA。

总结

JS的执行机制是：

• 首先判断js代码是同步还是异步,同步就进入主线程,异步就进入event table。
• 异步任务在event table中注册函数,当满足触发条件后,被推入event queue。
• 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中。