JS 运行机制

• 为什么 setTimeout 写在 Promise 前面却会比 Promise 后执行？

---

JS 事件循环机制

简单概括：JS 事件分为同步任务和异步任务，同步任务放到执行栈中执行，异步任务放到任务队列中，等到执行栈中的同步任务执行完毕之后就去执行任务队列中的异步任务。

进程线程

进程就是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位，进程大概等于一个工程，线程大概等于一条流水线，一个进程可以利用多个线程去执行任务。

JS 为什么是单线程

JS 的单线程与他的用途有关。作为浏览器脚本语言，JS 的用途是与用户互动以及操作 DOM。所以它只能是单线程，否则就会带来很复杂的同步问题。比如 JS 是多线程，一个线程在 DOM 上添加了一个节点，另外一个线程将其删除了，这个时候浏览器不知道该以哪个为准。

浏览器是多进程的

每打开一个 Tab 页都会产生一个进程

浏览器包含的进程

• Broswer 进程
  1.浏览器的主进程，负责协调和主控，该进程只有一个
  2.负责浏览器页面展示，与用户交互。比如前进、后退等
  3.负责各个页面的管理，创建和销毁其他进程
  4.将渲染 ( Renderer ) 进程得到的内存中的 Bitmap ( 位图 )，绘制到用户界面上
  5.网络资源的管理，比如下载等等
• 第三方插件进程，每种类型的插件对应一个进程，当使用该插件时创建
• GPU 进程，用于 3D 绘制等等，该进程也只有一个
• 渲染进程
  1.即常说的浏览器内核 ( Renderer 进程，内部是多线程 )
  2.每一个 Tab 页有一个渲染进程，它们互不影响
  3.主要作为页面渲染、脚本执行、事件处理等等

为什么浏览器要多进程

假设浏览器是单进程，那么 OK 某一个 Tab 页崩溃了，就会导致整个浏览器的崩溃。某一个插件崩溃了也会影响到整个浏览器

事件循环(Event Loop)

• 首先 JS 分为同步任务和异步任务
• 同步任务都在 JS 主线程上执行，并形成一个执行栈
• 主线程之外，事件触发线程管理着一个任务队列，只要异步的任务有了结果就会在任务队列中放一个回调
• 一旦执行栈中所有的同步任务执行完毕，系统就会读取任务队列，将可运行的异步任务 ( 任务队列中的事件回调 ) 添加到执行栈中开始执行
• JS引擎线程只会执行执行栈中的事件，执行栈中的代码执行完毕，就会读取事件队列中的事件并添加到执行栈中继续执行，这样反反复复就是我们所谓的事件循环 ( Event Loop )

事件循环( Event Loop )

宏任务 ( macroTask ) 和微任务 ( microTask )

• 宏任务 ( macroTask ) 也被称为 task
  1.我们可以将每次执行栈执行的代码当做是一个宏任务 ( 它包括每次从事件队列中获取一个事件回调并放到执行栈中执行 )，每一个宏任务会从头到尾执行完毕，其间不会执行其它
  2.由于 JS 引擎线程和 GUI 渲染线程是互斥的关系，浏览器为了使宏任务和 DOM 任务有序的进行，会在一个宏任务执行结束后再下一个宏任务执行前，开始 GUI 渲染线程工作并对页面进行渲染 --- 宏任务 -> GUI渲染 -> 宏任务 -> ...
  3.宏任务 macrotask 代码块，宏任务是放到事件触发队列里面的，常见的宏任务有 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。
• 微任务 ( microTask )
  1.在 ES6 中引入了 Promise 标准，同时浏览器上多了一个 microtask 的概念，也被称为 jobs
  2.我们知道宏任务结束后会执行渲染然后接下来执行下一个宏任务，而微任务可以理解为在当前宏任务执行后立即执行的任务。即当一个宏任务执行完，会在渲染之前将执行期间所产生的所有微任务执行完 --- 宏任务 -> 微任务 -> GUI渲染 -> 宏任务 -> ...
  3.常见的微任务 microtask 放到微任务队列里面的，由 js 线程掌管 process.nextTick ，promise ，MutationObserver。

示例如下：

1. 找一个空白的页面，在console中输入以下代码

document.body.style = 'background:black';
document.body.style = 'background:red';
document.body.style = 'background:blue';
document.body.style = 'background:pink';

image

我们看到上面动图背景直接渲染了粉红色，根据上文里讲浏览器会先执行完一个宏任务，再执行当前执行栈的所有微任务，然后移交GUI渲染，上面四行代码均属于同一次宏任务，全部执行完才会执行渲染，渲染时GUI线程会将所有UI改动优化合并，所以视觉上，只会看到页面变成粉红色

2. 然后

document.body.style = 'background:blue';
setTimeout(()=>{
    document.body.style = 'background:black'
},200)

image

之所以会卡一下蓝色，是因为以上代码属于两次宏任务，第一次宏任务执行的代码是将背景变成蓝色，然后触发渲染，将页面变成蓝色，再触发第二次宏任务将背景变成黑色

3. 再然后

document.body.style = 'background:blue'
console.log(1);
Promise.resolve().then(()=>{
    console.log(2);
    document.body.style = 'background:pink'
});
console.log(3);

image

控制台输出 1 3 2 , 是因为 promise 对象的 then 方法的回调函数是异步执行，所以 2 最后输出。
页面的背景色直接变成粉色，没有经过蓝色的阶段，是因为，我们在宏任务中将背景设置为蓝色，但在进行渲染前执行了微任务， 在微任务中将背景变成了粉色，然后才执行的渲染

• 注意点
  1.浏览器会先执行一个宏任务，紧接着执行当前执行栈产生的微任务，在进行渲染，然后执行下一个宏任务
  2.宏任务和微任务不在一个任务队列。比如 setTimeout 是一个宏任务，它的事件回调在宏任务队列；Promise.then() 是一个微任务，它的事件回调在微任务队列

宏任务和微任务图解

图解完整的浏览器事件循环 ( Event Loop )

完整的事件循环 ( Event Loop )

关于 Promise

new Promise((v) => { ... }).then()
前面 new Promise() 部分是一个构造函数是一个同步任务，后面 .then() 是一个异步微任务

new Promise((resolve) => {
    console.log(1)
  resolve()
}).then(()=>{
    console.log(2)
})
console.log(3)
// 执行顺序 1 - 3 - 2

关于 async await

async await 本质上是基于 Promise 的封装，而 Promise 属于微任务的一种

setTimeout(() => console.log(4))

async function test() {
  console.log(1)
  await Promise.resolve()
  console.log(3)
}

test()

console.log(2)
// 输出 1 - 2 - 3 - 4

可以这样理解：await 之前的代码相当于 new Promise 的同步代码，await 之后的代码相当于 Promise.then 的异步

示例如下：

console.log('script start')

async function async1() {
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2 end')
}
async1()

setTimeout(() => {
    console.log('setTimeout')
}, 0)
 
new Promise((resolve, reject) => {
    console.log('Promise')
    resolve()
}).then(() => {
    console.log('Promise1')
}).then(() => {
    console.log('Promise2')
})

console.log('script end')

// 输出顺序 
// script start
// async2 end
// Promise
// script end
// async1 end
// Promise1
// Promise2
// setTimeout

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

输出顺序
// script start
// async1 start
// async2 
// promise1
// script end
// async1 end
// promise2
// setTimeout