浏览器的进程模型
什么是进程
程序运行需要有自己专属的内存空间，这个内存空间可以简单的理解为进程
每一个程序启动时至少有一个进程，进程之间互相独立，即使要通信也需要双方同意
什么是线程
有了进程之后就可以运行程序代码
运行代码的“人”称之为“线程”（干活的）
一个进程至少要有一个线程，在进程启动时会自动创建一个线程来运行代码，该线程被称之为主线程
如果程序需要同时执行多个代码，主线程就会启动更多的线程来执行代码，所以一个进程可以包含多个线程（多招点人）
浏览器有哪些进程和线程
浏览器是一个多进程多线程的程序
浏览器内部工作极为复杂
为了避免相互影响，减少连环崩溃的几率，当启动浏览器启后，它会自动启动多个进程
可以在浏览器任务管理器中查看当前所有进程
最主要的进程有：
- 浏览器进程
主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务 - 网络进程
负责加载网络资源。网络进程内部会启动多个线程处理不同的网络任务 - 渲染进程
渲染进程启动后，会开启一个渲染主进程，主线程负责执行 HTML、CSS、JS代码。
默认情况下，浏览器会为每一个标签页开启一个一个新的渲染进程，以保证不同的标签页之间不互相影响
将来该默认模式可能会有所改变，感兴趣的可以参考chrome官方说明文档
渲染主线程是怎么工作的
渲染主线程是浏览器中最繁忙的线程，需要他处理的任务包括但不限于：
- 解析HTML
- 解析CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画60次
- 执行全局JS代码
- 执行事件处理函数
- 执行计时器的回调函数
- ……
为什么渲染进程不使用多个线程处理这些事情？
要处理这么多任务，主线程遇到了一个难题：如何调度任务？ 比如：
- 正在执行js函数，执行到一半的时候用户点击了按钮，应该立即执行点击事件的处理函数吗？
- 正在执行一个js函数，执行到一半某个计时器到达了时间，应该立即执行它的回调吗？
- 浏览器进程通知“用户点击了按钮”，与此同时某个计时器到达了时间，应该执行那个回调函数
- ……
渲染主线程处理这个问题的方式：排队
- 在最开始的时候，渲染线程会进入一个无限循环
- 每一次渲染会检查消息队列（任务队列）中是否有任务存在，如果有，就取第一个任务执行，执行完一个后进入下一次循环；如果没有，进入休眠状态
- 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会添加到消息队列的末尾。再添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务
通过这种方式让每个任务有条不紊的持续进行
整个过程被称为事件循环（消息循环）
若干解释
何为异步？
代码执行过程中，会遇到一些无法处理的任务，比如：
- 计时完成后需要执行的任务 -- setTimeout、setInterval
- 网络通信完成后需要执行的任务 -- XHR、Fetch
- 用户操作后需要执行的任务 -- addEventListener
如果让渲染主线程等待这些任务的实际到达，就会导致主线程长期处于“阻塞”的状态，从而导致浏览器“卡死”
渲染主线程承担着重要的工作，绝对不能阻塞
因此浏览器选用异步方式处理 使用异步的方式，渲染主线程永不阻塞
如何理解js异步？
js是一门单线程语言，因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
如果使用同步方法，极有可能造成渲染主线程阻塞，从而导致消息队列的其他任务无法执行。就会产生两个问题：一方面会导致主线程消耗时间。另一方面，会导致页面无法及时更新，给用户造成卡死的现象。
所以浏览器采用异步的方式来避免，具体做法为：当某些任务发生时（计时器，网络，事件监听）主线程任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入消息队列的末尾排队，等待主线程调度执行
在这种模式下，浏览器永不阻塞，最大限度的保证了单线程的流畅运行
JS为何会阻碍渲染
看一段代码
<p>派克不K头玩什么啊</p>
<button>下一句</button>
<script>
var p = document.querySelector('p');
var button = document.querySelector('button');
//时间死循环
function get(time) {
var star = Date.now();
while (Date.now() - star < time) { }
};
button.onclick = function () {
p.innerHTML = '又不是不给队友分钱';
get(3000);
}
</script>
在点击按钮时主线程会先执行文本修改，但不会直接渲染到页面中，因为在渲染之前他需要执行完get函数。
具体步骤：修改文本——将渲染放到消息队列中——执行get方法——页面渲染
任务有优先级吗？
任务没有优先级，在消息队列中先进先出
但消息队列是有优先级的
根据W3C的最新解释：
- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属不同的队列。在一次事件循环中，浏览器可以个根据实际情况从不同的队列中取出任务执行。
- 浏览器必须准备好一个微队列，微队列中的人物优先所有其他任务执行。
随着浏览器的复杂度急剧提升，W3C不再使用宏观队列的说法
目前chrome的实现中，至少包含了以下队列：
- 延时队列：用于存放计时器到达后的回调任务，优先级“中”
- 交互队列：用于存放用户操作后产生的时间处理任务，优先级“高”
- 微队列：用户存放需要最快执行的任务，优先级“最高”
添加任务到微队列的主要方式：Promise、MutationObserver
例如：
Promise.resolve().then(函数)
浏览器还有很多其他队列，由于对开发关系不大，不做考虑 面试题：阐述一下js的事件循环（浏览器的事件循环）
