一、进程与线程
1. 进程
CPU是计算机核心，承担所有计算任务。
进程是CPU资源分配的最小单位。
2. 线程
线程是CPU调度的最小单位。
一个进程可以有多个线程。
3. 进程和线程区别
进程是操作系统分配资源的最小单位，线程是程序执行的最小单位。
一个进程由一个或多个线程组成，线程可以理解为是一个进程中代码的不同执行路线
进程之间相互独立，但同一进程下的各个线程间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)
调度和切换：线程上下文切换比进程上下文切换要快得多
4.多进程和多线程
多进程：多进程指的是在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的，比如大家可以在网易云听歌的同时打开编辑器敲代码，编辑器和网易云的进程之间不会相互干扰
多线程：多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程序创建多个并行执行的线程来完成各自的任务
二、JS为什么是单线程
JS的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
三、浏览器
浏览器是多进程的。
1.浏览器包含的进程
- Browser进程
- 第三方插件进程
- GPU进程 该进程只有一个，用于3D绘制等。
- 渲染进程 即通常所说的浏览器内核（Renderer进程，内部是多线程）。 页面的渲染、JS的执行、事件的循环，都在渲染进程内。 渲染进程是多线程的，我们来看渲染进程的一些常用较为主要的线程。
2.渲染进程Renderer的主要线程
(1) GUI渲染线程
- 负责渲染浏览器界面，解析HTML、CSS，构建DOM树和CSS规则树（生成Render Tree），布局和绘制等；
- 当修改元素的颜色、背景色，页面会重回（repaint）；
- 当修改元素的尺寸，页面会回流（reflow）；
- 当页面需要repaint和reflow时，GUI线程执行，绘制页面；
- reflow比repaint成本要高，要尽量避免reflow和repaint；
- GUI渲染线程与JS引擎线程是互斥的：
当JS引擎执行时GUI线程会被挂起（相当于被冻结）；
GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行；
(2) JS引擎线程 - JS引擎线程就是JS内核，负责处理Javascript脚本程序（例如V8引擎）
- GUI渲染线程与JS引擎线程是互斥的，JS引擎线程会阻塞GUI渲染线程
就是我们常遇到的JS执行时间过长，造成页面的渲染不连贯，导致页面渲染加载阻塞（就是加载慢）。
例如浏览器渲染的时候遇到script标签，就会停止GUI的渲染，然后js引擎线程开始工作，执行里面的js代码，等js执行完毕，js引擎线程停止工作，GUI继续渲染下面的内容。
所以如果js执行时间太长就会造成页面卡顿。 (3) 事件触发线程 - 属于浏览器而不是JS引擎，用来控制事件循环，并且管理着一个事件队列（task queue）
- 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理 (4) 定时触发器线程
- setInterval 与 setTimeout所在线程
- W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms (5) 异步http请求线程
- 当执行到一个http异步请求时，就把异步请求事件添加到异步请求线程，等收到响应（准确来说应该是http状态变化），再把回调函数添加到事件队列，等待js引擎线程来执行。
四、事件循环
JS分同步任务和异步任务。
同步任务都在主线程（这里的主线程就是JS引擎线程）上执行，会形成一个执行栈。
主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放一个事件回调函数。
一旦执行栈中的所有同步任务执行完毕（也就是JS引擎线程空闲了），将可运行的异步任务添加到执行栈中，开始执行。
五、宏任务 & 微任务
1.宏任务
会在一个宏任务执行结果后，在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染。
宏任务 -> GUI渲染 -> 宏任务 -> ...
常见宏任务
- 主代码块
- setTimeout
- setInterval
- setImmediate()-Node
- requestAnimationFrame()-浏览器
2.微任务
宏任务 -> 微任务 -> GUI渲染 -> 宏任务 -> ...
常见微任务
- process.nextTick()-Node
- Promise.then()
- catch
- finally
- Object.observe
- MutationObserver
