JS单线程的理解

一、首先需要区分几个概念：

1. 进程和线程的概念：

　 进程：指在系统中运行的一个应用程序，目的就是担当分配系统资源（CPU时间、内存等）的基本单位

　 线程：系统分配处理器时间资源的基本单元，建立在进程的基础上，一个进程至少要有一个线程。

2. 浏览器是多进程，多线程的，而JS是单线程的：

　 打开一个浏览器Tab页签，会同时创建多个进程，主进程、网络进程、渲染进程、GPU进程...；

　 而浏览器的内核就运行在渲染进程中，渲染进程会同时创建GUI渲染线程、JS引擎线程、事件触发线程、定时器触发线程、异步HTTP请求线程；

　 其中JS引擎进程就是我们常说的JS是单线程的概念。

二、同步任务和异步任务

　 同步任务：在主程序上按顺序执行的任务就叫做同步任务，只有上一个任务执行完毕后，才会执行下一个任务

　 异步任务：未进入主程序，被放置在一个叫做任务队列中的程序中，常见的有回调函数中或者定时器中的任务。

　 首先程序会去执行同步任务，同步任务全部执行完毕则去任务队列检查是否存在异步任务；

　 注：如果执行中遇到定时器或者延时器，会启动定时线程进行计时监控，如果倒计时为0，则将回调函数中的任务塞

　　　 入到异步队列当作宏任务执行，不是在一开始就塞入任务队列中

三、宏任务和微任务

　 除了可以分为同步任务和异步任务外，为了更好的理解执行流程，还可以细化为宏任务和微任务；

　 宏任务包含：主代码、setTimeout、setInterval、setImmediate、i/o操作（输入输出，比如读取文件操作、网络请求）、

　　　　  　　   ui render（dom渲染，即更改代码重新渲染dom的过程）、异步ajax等

　 微任务包含：Promise（then、catch、finally）、process.nextTick、Object.observe(⽤来实时监测js中对象的变化)、

　　　　　　　 MutationObserver(监听DOM树的变化)

　 注：new Promise(() => { ****})中的任务是宏任务、同步任务，只有.then\.finally\.catch中的任务才是微任务、异步任务

引擎在执行程序的顺序是宏任务-->微任务-->GUI渲染任务-->宏任务....；

　 启动执行程序，JS引擎会把整个JS当作宏任务进入主程序开始执行，宏任务执行完成后，会去查看是否存在微任务并执行完毕，然后继续执行宏任务，

　 由于主程序不知道是否存在微任务，所以每次宏任务执行完毕后都会去检查是否存在微任务，这种周而复始的过程就叫做事件循环。

四、示例说明

 1 console.log(1);
 2 var timeout1 = setTimeout(() => {
 3   console.log(2);
 4   new Promise((resolve) => {
 5     console.log(3);
 6     resolve();
 7   }).then(() => {
 8     console.log(4);
 9   })
10 })
11
12 new Promise((resolve) => {
13   console.log(5);
14   resolve();
15 }).then(() => {
16   console.log(6);
17 })
18
19 var timeout2 = setTimeout(() => {
20   console.log(7);
21   new Promise((resolve) => {
22     console.log(8);
23     resolve();
24   }).then(() => {
25     console.log(9);
26   })
27 })
28 console.log(10);

打印结果为：1  5  10  6  2  3  4  7  8  9；

过程详解：

1. 首先顺序执行第1行打印结果为：1；

2. 执行2-10行为异步任务，启动定时进程进行倒计时，但是不会立即添加异步任务到任务队列中

3. 执行12-17行，按照上文备注promise()中的方法是宏任务所以会顺序执行，同时打印出5， 其中.then是异步任务所以会添加到任务队列的微任务中.

4. 执行19-27行与第二步类似，启动定时进程进行倒计时

5. 执行28行打印结果为：10

6. 宏任务全部执行完毕后就会去任务队列中检查是否存在微任务并执行，打印结果为：6

7. 倒计时16ms左右结束时，按照代码的先后顺序首先将timeout1中的异步任务添加到任务队列

8. 将timeout1中的任务添加到主程序当作一个宏任务开始执行所以打印结果是：2, 3；然后将.then中的任务添加到微任务中，

　 每个宏任务后都会执行一个事件循环检查，然后开始执行微任务，最终打印结果为：2,3,4

9. timeout2会重复执行7、8两步，打印结果为7,8,9