JavaScript 运行机制

JavaScript 运行机制

原文链接：JavaScript运行机制

目标

1.了解进程与线程的基础概念，明确在浏览器中的进程与线程机制；

2.了解浏览器与Node中的事件循环；

知识要点

一、进程与线程

1.1 概念

进程：CPU资源分配的最小单位。——可以独立运行且拥有自己的资源空间的任务程序。（包括运行中的程序和程序中所用到的内存和系统资源）。
eg：每打开一个软件就会产生一个进程，浏览器中每开一个Tab页也会产生一个进程。进程之间相互独立。

线程：CPU调度的最小单位。——建立在进程基础上的一次程序运行单位。一个进程可以有多个线程。一个程序中可以同时运行多个不同的线程来执行不同的任务。

1.2 区别

进程包含了线程，一个进程可以对应多个线程。线程相当于是进程中的不同执行路线。

调度和切换：线程上下文切换比进程上下文切换要快得多。

1.3 多进程与多线程

• 多进程：允许同一计算机系统中同时运行两个或两个以上的进程。比如在打开网易云听歌的同时还可以打开编辑器敲代码，而这两个进程之间不会相互干扰。
• 多线程：指一个程序中包含多个执行流来执行不同的任务，而这多个不同的执行流是并行的。

1.4 JS 为什么是单线程

JS主要用途是与用户互动，以及操作DOM。

如果JS是多进程的话，那么它可以同时在某个DOM节点上添加内容，又可以删除这个节点，从而导致浏览器不知该以哪个为准。

1.5 浏览器

1.5.1 浏览器包含哪些进程

浏览器包含以下进程：

• Browser进程
• 第三方插件进程
• GPU进程（Graphics Processing User）
• 渲染进程

1.5.2 为什么浏览器要多进程

若浏览器是单进程，那么如果某个Tab页崩溃了，则会导致整个浏览器瘫痪，同理，如果插件崩溃了则会影响整个浏览器，这样体验感非常差。

1.5.3 渲染进程

页面渲染，JS的执行，事件的循环，都在渲染进程中执行，所以需要重点了解渲染进程。

渲染进程是多线程的，以下是一些常用较为主要的线程：

1.5.3.1 GUI 渲染线程

• 负责渲染浏览器界面，解析html，css，构建DOM树和RenderObject树，布局和绘制等

1.解析html代码转化为浏览器认识的节点，生成DOM树，

2.解析CSS，生成CSSOM（CSS规则树）

3.把DOM Tree 和 CSSOM结合，生成Rendering Tree（渲染树）

• 当修改元素的颜色或背景色时，页面会重绘
• 当修改元素尺寸时，页面会回流
• 当页面需要重绘和回流时，执行GUI线程，绘制页面
• 回流比重绘成本高
• GUI渲染线程和JS引擎线程是互斥的

1.当JS引擎线程执行时，GUI渲染线程会被挂起

2.GUI渲染线程会被保存在一个队列中等到JS引擎空闲时立即被执行

1.5.3.2 JS 引擎线程

• JS 引擎线程就是 JS 内核，负责处理 Javascript 脚本程序
• JS 引擎线程负责解析 JS 脚本，运行代码
• JS 引擎线程一直等待队列中的任务到来，然后执行
• JS 引擎线程和 GUI 渲染线程是互斥的，js 引擎线程会阻塞 GUI 渲染线程

1.5.3.3 事件触发线程

• 事件触发线程管理着一个事件队列，用来控制事件循环
• 当js执行碰到事件绑定或一些异步操作时，会交由事件触发线程将对应的事件添加到对应的线程中（如定时器事件会添加到定时触发器线程中），等异步事件有了结果，便把结果添加到事件队列中，等待js引擎线程空闲时来处理。
• 当对应的事件符合触发条件触发时，该线程会将事件添加到事件队列的队尾，等待JS引擎处理
• 因为JS是单线程，所以待处理队列中的事件都得排队等JS引擎处理

1.5.3.4 定时触发器线程

• 当JS代码执行中遇到定时任务（如setTimeout、setInterval），会将该定时器任务交由定时触发线程处理，然后等计时完毕，便将事件添加至事件触发线程的事件队列中，等待JS引擎空闲后处理

1.5.3.5 异步HTTP请求线程

• 当JS代码执行过程中，若遇到http异步请求，则将该异步请求事件交由异步http请求线程，等异步事件响应成功后（即状态码变更），再将事件添加至事件触发线程的事件队列中等待JS引擎空闲后处理

二、事件循环（Event Loop）基础

• 1.在js代码执行过程中，从上至下逐行解析，遇到同步代码可直接执行，
• 2.若遇到定时器任务或异步请求，则将事件添加至事件触发器的事件队列末尾（算作下一次事件循环）
• 3.当同步任务全部执行完毕，则不断问询事件队列中是否有回调事件，
• 4.若有，则将事件回调放入执行栈中执行，然后再接着回到步骤1

三、宏任务与微任务

3.1 宏任务（macrotask）

我们可以把每次执行栈中执行的代码当作是一个宏任务（包括从事件队列中取出一个事件回调放到执行栈中执行），每一个宏任务都会从头至尾执行，不会执行其他。宏任务中的代码都是同步的。

由于JS引擎线程和GUI渲染线程互斥，所以浏览器为了宏任务和DOM任务有序的进行，会在每一个宏任务执行完毕后，都会在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染。

常见的宏任务有以下几种：

• 主代码块
• setInterval
• setTimeout
• setImmediate（）-Node
• requestAnimationFrame() -浏览器

3.2 微任务（microtask）

微任务为在当前宏任务执行后立即执行的任务。

当一个宏任务执行完，会在渲染前，将执行期间所产生的所有微任务都执行完：

*任务执行过程：宏任务->微任务->GUI渲染->宏任务->微任务->GUI渲染->xxx*

以下形式的代码为微任务

• process.nextTick()-Node
• Promise.then()
• catch
• finally
• Object.observe
• MutationObserver

四、完整的事件循环（Event Loop）

五、Promise & async/await

5.1 Promise

new Promise（（）=>{}）.then()中，前面的new Promise（（）=>{}）是一个构造函数，这是一个同步任务，后面的.then()才是一个异步微任务：

new Promise(（resolve）=> {
    console.log(1);
    resolve();
}).then(()=> {
    console.log(2)
})
cosole.log(3)
// 1 3 2
1
2
3
4
5
6
7
8

5.2 async/await

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

所以在使用await关键字的效果与Promise.then效果类似，await以前的代码，相当于new Promise的同步代码，await以后的代码，相当于Promise.then的异步

setTimeout(()=> console.log(4))  // 进入下一次事件循环

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

console.log(3)
// 1 3 2 4
1
2
3
4
5
6
7
8
9
10
11