剖析JavaScript运行机制

[kaindy7633]

Table of Contents generated with DocToc

• 先了解进程和线程
  • 进程
  • 线程
  • 进程和线程
  • 多进程和多线程
• JavaScript是单线程的
• 浏览器中的进程和线程
  • 浏览器是多进程的
  • 浏览器中进程的分类
  • 浏览器需要多进程
  • 单独阐述渲染进程Renderer(重点)
    • GUI渲染线程
    • JS引擎线程
    • 事件触发线程
    • 定时触发器线程
    • 异步HTTP请求线程
• 事件循环（Event Loop）
• 宏任务和微任务

JavaScript在浏览器环境中的运行机制，无论是平时的开发，或者面试，都会经常用到，所以有必要精炼的总结一下这方面的知识点

先了解进程和线程

进程

进程就是CPU资源分配的最小单位，它包含了运行中的程序和该程序所使用到的内存及系统资源。

CPU可以开启多个进程，每个进程之间是相互独立的，CPU在运行一个进程时，其他进程处于非运行状态，CPU利用时间片轮转调度算法来实现同时运行多个进程.

时间片轮转调度是一种最古老，最简单，最公平且使用最广的算法。每个进程被分配一个时间段，称作它的时间片，即该进程允许运行的时间。如果在时间片结束时进程还在运行，则CPU将被剥夺并分配给另一个进程。如果进程在时间片结束前阻塞或结束，则CPU当即进行切换。调度程序所要做的就是维护一张就绪进程列表，当进程用完它的时间片后，它被移到队列的末尾。(摘自百度百科)

线程

线程是CPU调度的最小单位，它建立在进程的基础上，是程序的一个执行流，一个进程可以有一个或多个线程（单线程和多线程）

进程和线程

• 进程是操作系统分配资源的最小单位，而线程是程序执行的最小单位

• 一个进程可以由一个或多个线程组成

• 进程之间相互独立，而同一进程中的各个线程可以共享内存空间

• 线程的上下文切换比进程快很多

多进程和多线程

多进程指计算机中同时运行多个程序，而多线程指一个进程中包含多个执行流，即在一个进程中通过多个线程来执行不同的任务。

JavaScript是单线程的

JavaScript最初的设计就是用来处理用户行为，及其对DOM的操作，所以它只能是单线程，否则会带来复杂的同步问题，比如一个DOM如果被多个线程同时操作，执行结果将会如何呢？

HTML5提出了Web Worker，Worker线程受主线程控制，且不能操作DOM，只是用来处理一些额外的计算操作，所以它从本质上没有改变JavaScript单线程的特征

浏览器中的进程和线程

浏览器是多进程的

浏览器是多进程的，每打开一个Tab页，就创建了一个独立的进程，且它们之间不会相互影响

浏览器中进程的分类

• Browser进程：浏览器的主进程，该进程只有一个，负责协调、主控

• 渲染进程（重点）：该进程即浏览器内核（Renderer进程），其内部是多线程的。每个Tab都会有一个渲染进程，互不影响，它主要负责页面渲染、脚本执行和事件处理等。

• GPU进程：该进程只有一个，用于绘制

• 第三方插件进程：每种类型的插件都会有一个进程，只有当启用该插件时才会创建该进程

浏览器需要多进程

从上述看出，浏览器有多个不同类型的进程，浏览器是需要多进程的，否则多个Tab中如果有一个崩溃，就会影响整个浏览器。

其他诸如插件进程也是一样，不能影响其他进程的工作

单独阐述渲染进程Renderer(重点)

页面渲染、事件循环、JavaScript代码执行等都是在渲染进程内执行的，它是多线程的，每种线程执行不同的任务

GUI渲染线程

• 该线程负责渲染浏览器页面，解析HTML、CSS，构建DOM树和RenderObject树，布局和绘制等。

  1. 它负责解析HTML代码，将其转化为DOM节点，生成DOM树（DOM Tree）
  2. 解析CSS，生成CSSOM（CSS规则树）
  3. 把DOM Tree和CSSOM结合，生成Rendering Tree（渲染树）

JS引擎线程

事件触发线程

定时触发器线程

异步HTTP请求线程

事件循环（Event Loop）

宏任务和微任务

(https://juejin.im/post/5e22b391f265da3e204d8c14#heading-12)