# 为什么 Javascript 是单线程的？

## 快速解答

Javascript 这门脚本语言诞生的使命所致!JavaScript 为处理页面中用户的交互,以及操作 DOM 树、CSS 样式树来给用户呈现一份动态而丰富的交互体验和服务器逻辑的交互处理。

如果 JavaScript 是多线程的方式来操作这些 UI DOM,则可能出现 UI 操作的冲突。

如果 Javascript 是多线程的话,在多线程的交互下,处于 UI 中的 DOM 节点就可能成为一个临界资源,

假设存在两个线程同时操作一个 DOM,一个负责修改一个负责删除,那么这个时候就需要浏览器来裁决如何生效哪个线程的执行结果。

当然我们可以通过锁来解决上面的问题。但为了避免因为引入了锁而带来更大的复杂性,Javascript 在最初就选择了单线程执行。

## 基本概念

进程是 CPU 资源分配的最小单位（是能拥有资源和独立运行的最小单位）

线程是 CPU 调度的最小单位（是建立在进程基础上的一次程序运行单位）

## 浏览器多进程架构

Chrome 为例,它由多个进程组成,每个进程都有自己核心的职责,它们相互配合完成浏览器的整体功能,

每个进程中又包含多个线程,一个进程内的多个线程也会协同工作,配合完成所在进程的职责。

Chrome 采用多进程架构,其顶层存在一个 Browser process 用以协调浏览器的其它进程。<br>

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-Ly4V4nQ-xXixvk671YN%2F-Ly4XZWZYAGMcHiAJViT%2Fimage.png?alt=media\&token=66461808-dd8a-4047-9554-669f19f16d12)

如上图所示有

1. Network Process
2. Browser Process

   负责浏览器界面的显示与交互。各个页面的管理,创建和销毁其他进程。网络的资源管理、下载等。
3. UI Process
4. GPU Process

   用于3D绘制
5. Device Process
6. Plugin Process
7. Renderer Process

   浏览器渲染进程或浏览器内核,内部是多线程的。主要负责页面渲染,脚本执行,事件处理等

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-Ly4V4nQ-xXixvk671YN%2F-Ly4XynbTeXFXpShimuS%2Fimage.png?alt=media\&token=e01178ac-dcac-4499-a945-550498231daf)

## Renderer Process 渲染进程

渲染进程是多线程的，有如下线程

1. GUI 渲染线程
   * 负责渲染浏览器界面,解析 HTML,CSS,构建 DOM 树和 RenderObject 树,布局和绘制等
   * 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行
   * **GUI 渲染线程与 JS 引擎线程是互斥的**,当 JS 引擎执行时 GUI 线程会被挂起（相当于被冻结了）,GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行
2. JS 引擎线程
   * JS 引擎线程负责解析 Javascript 脚本,运行代码
   * JS 引擎一直等待着任务队列中任务的到来,然后加以处理,一个 Tab 页（renderer 进程）中无论什么时候都只有一个 JS 线程在运行 JS 程序
   * **GUI 渲染线程与 JS 引擎线程是互斥的**,所以如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞
3. 浏览器事件触发线程
   1. 归属于浏览器而不是 JS 引擎,用来控制事件循环（可以理解,JS 引擎自己都忙不过来,需要浏览器另开线程协助）
   2. 当 JS 引擎执行代码块如 setTimeOut 时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX 异步请求等）,会将对应任务添加到事件线程中
   3. 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待 JS 引擎的处理
   4. 注意,由于 JS 的单线程关系,所以这些待处理队列中的事件都得排队等待 JS 引擎处理（当 JS 引擎空闲时才会去执行）
4. 定时触发器线程
   1. setInterval 与 setTimeout 所在线程
5. 异步 http 请求线程
   1. XMLHttpRequest 在连接后是通过浏览器新开一个线程请求