浏览器进程模型

进程与线程

• 进程

  进程，程序运行时的专属内存空间，每个应用至少有一个进程，进程间相互独立。

• 线程

  线程，运行程序代码的对象。一个进程至少有一个线程。如果程序需要同时执行多块代码，主线程就会启动多个线程执行。

浏览器进程和线程

浏览器是一个多进程多线程的应用程序。为了避免项目影响，减少连环崩溃的几率，在浏览器启动时，会自动启动多个进程。

• 浏览器进程

主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

• 网络进程

主要负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

• 渲染进程

渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。

默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同标签页之间不相互影响。

渲染主线是如何工作的

渲染主线程师浏览器中最繁忙的线程，主要任务包括但不限于：

• 解析 HTML
• 解析 CSS
• 计算样式
• 布局
• 处理图层
• 每秒把页面画 60 次
• 执行全局 JS 代码
• 执行事件处理函数
• 执行计时器的回掉函数
• ...

要处理这么多的任务，主线程遇到一个前所未有的难题：如何调度任务？

渲染主线程处理方案：。

1. 在最开始的时候，渲染主线程会进入一个无限循环。
2. 每次循环会检查消息队列中是否有任务存在。如果有，就取出执行，执行完后再进入下一次循环。如果没有，就进入休眠。
3. 其他所有线程（包括其他进程的线程）可能随时向消息队列添加任务。新任务会加到队列的末尾。在添加新任务时，如果主线程处于休眠，则主线程会被唤醒以进入循环。

若干解释

何为异步

代码在执行过程中，会遇到一些无法立即执行的任务，比如：

• 计时器完成后需要执行的任务 -- setTimeou、setInterval
• 网络通信完成后需要执行的任务 -- XHR、Fetch
• 用户操作后需要执行的任务 -- addEventListener

如果让渲染主线程等待这些任务的时机执行，就会导致主线程长期处于「阻塞」状态，从而导致浏览器「卡死」。

使用异步方式，渲染主线程永不阻塞。

1. 主线程通知计时线程时，当前任务结束；
2. 主线程从消息队列中获取下一个任务执行；
3. 计时任务结束后，将回调函数放入消息队列末尾；

JS 为何会阻碍渲染？

// 死循环指定的时间
function delay(duration) {
  let start = new Date();
  while (new Date().now() - start < duration) {}
}
// 按钮点击后，导致页面卡死3s 后再次渲染
document.getElementById("button").onclick = function () {
  // 1. 执行一下代码，会往消息队列添加一个新的任务，用于渲染页面
  docuemnt.getElementById("h1").textContent = "hello world";
  // 2. 该任务在主线程中，等待循环结束后，才会再执行渲染页面任务
  delay(3000);
};

任务优先级

任务没有优先级，在消息队列中先进先出。但消息队列是有优先级。

根据 W3C 解释：

• 每个任务都有一个任务类型，同一个类型的任务必须在一个队列中，不同类型的任务可以分属于不同的队列。在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
• 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行。

在目前 chrome 的实现中，至少包含下面的队列：

• ：用于存放计时器到达后的回调任务，优先级「中」
• ：用于存放用户操作后产生的事件处理任务，优先级「高」
• ：用户存放需要最快执行的任务，优先级「最高」

// 立即添加函数到微队列
Promise。resolve().then(()=>{})