JS单线程的理解-Toy模板网

这篇具有很好参考价值的文章主要介绍了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);