JS 为什么是单线程
进程与线程
什么是进程
都知道，CPU 是计算机的核心，承担所有的计算任务
官网说法，进程是 CPU 资源分配的最小单位
字面意思就是进行中的程序，可以将它理解为一个可以独立运行且拥有自己的资源空间的任务程序
进程包括运行中的程序和程序所使用到的内存和系统资源
CPU 可以有很多进程，电脑每打开一个软件就会产生一个或多个进程，为什么电脑运行的软件多就会卡，是因为 CPU 给每个进程分配资源空间，但是一个 CPU 一共就那么多资源，分出去越多，越卡，每个进程之间是相互独立的，CPU 在运行一个进程时，其他的进程处于非运行状态，CPU 使用 时间片轮转调度算法 来实现同时运行多个进程
什么是线程
线程是 CPU 调度的最小单位
线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行流，一个进程可以有多个线程
一个进程中只有一个执行流称作单线程，即程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行
一个进程中有多个执行流称作多线程，即在一个程序中可以同时运行多个不同的线程来执行不同的任务， 也就是说允许单个程序创建多个并行执行的线程来完成各自的任务
进程和线程的区别
进程是操作系统分配资源的最小单位，线程是程序执行的最小单位
一个进程由一个或多个线程组成，线程可以理解为是一个进程中代码的不同执行路线
进程之间相互独立，但同一进程下的各个线程间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)
调度和切换：线程上下文切换比进程上下文切换要快得多
多进程和多线程
多进程：多进程指的是在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的，比如大家可以在网易云听歌的同时打开编辑器敲代码，编辑器和网易云的进程之间不会相互干扰
多线程：多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程序创建多个并行执行的线程来完成各自的任务
JS 为什么是单线程
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么 JavaScript 不能有多个线程呢？这样能提高效率啊。
JS 的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定 JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
还有人说 js 还有 Worker 线程，对的，为了利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程是完 全受主线程控制的，而且不得操作 DOM
所以，这个标准并没有改变 JavaScript 是单线程的本质
了解了进程和线程之后，接下来看看浏览器解析，浏览器之间也是有些许差距的，不过大致是差不多的，下文皆用市场占有比例最大的 Chrome 为例
浏览器
浏览器是多进程的
作为前端，免不了和浏览器打交道，浏览器是多进程的，拿 Chrome 来说，每打开一个 Tab 页就会产生一个进程，使用 Chrome 打开很多标签页不关，电脑会越来越卡，不说其他，首先就很耗 CPU
浏览器包含哪些进程
- Browser 进程
浏览器的主进程(负责协调、主控)，该进程只有一个
负责浏览器界面显示，与用户交互。如前进，后退等
负责各个页面的管理，创建和销毁其他进程
将渲染(Renderer)进程得到的内存中的 Bitmap(位图)，绘制到用户界面上
网络资源的管理，下载等
- 第三方插件进程
每种类型的插件对应一个进程，当使用该插件时才创建
- GPU 进程
该进程也只有一个，用于 3D 绘制等等
- 渲染进程(重)
即通常所说的浏览器内核(Renderer 进程，内部是多线程)
每个 Tab 页面都有一个渲染进程，互不影响
主要作用为页面渲染，脚本执行，事件处理等
为什么浏览器要多进程
假设浏览器是单进程，那么某个 Tab 页崩溃了，就影响了整个浏览器，体验有多差
同理如果插件崩溃了也会影响整个浏览器
当然多进程还有其它的诸多优势，不过多阐述
浏览器进程有很多，每个进程又有很多线程，都会占用内存
这也意味着内存等资源消耗会很大，有点拿空间换时间的意思
到此可不只是为了让理解为何 Chrome 运行时间长了电脑会卡，哈哈，第一个重点来了
简述渲染进程 Renderer(重)
页面的渲染，JS 的执行，事件的循环，都在渲染进程内执行，所以要重点了解渲染进程
渲染进程是多线程的，来看渲染进程的一些常用较为主要的线程
渲染进程 Renderer 的主要线程
GUI 渲染线程
- 负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等
解析 html 代码(HTML 代码本质是字符串)转化为浏览器认识的节点，生成 DOM 树，也就是 DOM Tree
解析 css，生成 CSSOM(CSS 规则树)
把 DOM Tree 和 CSSOM 结合，生成 Rendering Tree(渲染树)
- 当修改了一些元素的颜色或者背景色，页面就会重绘(Repaint)
- 当修改元素的尺寸，页面就会回流(Reflow)
- 当页面需要 Repaing 和 Reflow 时 GUI 线程执行，绘制页面
- 回流(Reflow)比重绘(Repaint)的成本要高，要尽量避免 Reflow 和 Repaint
- GUI 渲染线程与 JS 引擎线程是互斥的
当 JS 引擎执行时 GUI 线程会被挂起(相当于被冻结了)
GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行
JS 引擎线程
- JS 引擎线程就是 JS 内核，负责处理 Javascript 脚本程序(例如 V8 引擎)
- JS 引擎线程负责解析 Javascript 脚本，运行代码
- JS 引擎一直等待着任务队列中任务的到来，然后加以处理
浏览器同时只能有一个 JS 引擎线程在运行 JS 程序，所以 js 是单线程运行的
一个 Tab 页(renderer 进程)中无论什么时候都只有一个 JS 线程在运行 JS 程序
- GUI 渲染线程与 JS 引擎线程是互斥的，js 引擎线程会阻塞 GUI 渲染线程
就是常遇到的 JS 执行时间过长，造成页面的渲染不连贯，导致页面渲染加载阻塞(就是加载慢)
例如浏览器渲染的时候遇到