浏览器进程模型

什么是进程

进程是操作系统进行资源分配和调度的基本单位，拥有独立的内存空间。

进程是正在运行的程序，占用一定的内存空间。

每个应用至少一个进程，启动一个应用可能产生多个进程。

什么是线程

线程是进程内的执行单元，共享进程的内存空间，是CPU调度的基本单位。

线程相当于进程中的处理任务的多个“操作员”，共享同一块内存空间，可以同时运行。

一个进程至少有一个进程，称为主进程，主进程能启动更多线程运行代码。

浏览器的进程和线程

浏览器是多进程多线程的复杂应用程序。为了避免相互影响和连环崩溃，浏览器启动后会产生多个进程：
![alt text](image-1.png)
其中最主要的进程有：

  • 浏览器进程：
    创建和管理浏览器窗口、标签页、工具栏、地址栏等 UI 元素。

    处理用户输入（如点击、键盘输入）并将其分发到相应的渲染进程。

  • 网络进程：
    负责加载网络资源、网络进程内会启动多个线程处理不同的网络任务。
  • 渲染进程:
    渲染进程启动后，会启动一个渲染主线程，负责HTML、CSS 和 JavaScript 解析
    默认情况下，浏览器为每一个标签页开启一个进程，以保证各个标签页之间互不影响。

  • 辅助框架进程：

    当一个页面中包含 iframe 时，浏览器会为每个 iframe 创建一个独立的渲染进程，这个进程就是“辅助框架”。<iframe/> 是
    HTML 中的一个标签，用于在当前页面中嵌入另一个网页或内容

渲染进程

渲染主线程

渲染主线程是渲染进程中最重要的线程，也是浏览器中最繁忙的线程，处理的任务包括：

  • 解析HTML
  • 解析CSS
  • 计算样式
  • 布局
  • 处理图层
  • 绘制 每秒60次
  • 执行JavaScript
  • 执行 事件回调 函数
  • ...

渲染主线程任务繁重，为什么只保持一个线程处理这些任务?

  • DOM操作的非线程安全：DOM不是线程安全的，多线程操作可能导致竞态条件。
  • 兼容性：许多Web API设计为单线程，多线程可能破坏现有网页功能。
  • 简化开发：单线程模型更易于开发和调试。

渲染进程的其他线程

  • 工作线程:

    • 运行 JavaScript 的 Web Workers，用于执行耗时的计算任务（如数据处理、加密解密）。

  • 合成线程

    • 将页面的不同图层（如背景、文本、图片）合成为最终的图像。
    • 处理 CSS 动画和过渡效果。
    • 优化页面的滚动性能。

  • 光栅化线程

    • 将绘制的图层转换为位图（Bitmap），以便显示在屏幕上。

渲染主线程的任务调度

为了处理事件回调、计时器回调等异步任务，主线程维护了消息队列管理这些任务。渲染主线程使用事件循环来处理消息队列中的任务。

  1. 任务取出：主线程从消息队列中取出一个任务。
  2. 任务执行：执行该任务，如处理用户输入、更新DOM、执行JavaScript等。
  3. 任务完成：任务执行完成后，主线程继续取出下一个任务。
  4. 其他线程（包括其他进程的线程（通过IPC机制））可以随时向消息队列末尾添加任务（比如浏览器进程的用户交互）。

其他解释

什么是异步？

  • 在执行代码中，存在无法立即处理的任务。

    • 计时后的任务：setTimeout、setInterval
    • 网络通信后的任务：new XMLHttpRequest、ajax、axios、promise
    • 用户操作后执行的任务：addEventListener

如果主线程同步执行代码，一直等待这些任务的到达，会造成线程阻塞，浏览器渲染暂停。JS的异步机制充分提高了主线程的利用率。同步和异步是两种不同的消息通知机制。同步是指在发出一个功能调用时，调用者必须等待结果返回后才能继续执行其他操作。异步则是指在发出调用后，调用者可以继续执行其他操作，不必等待结果返回。

![alt text](image-1.png)

如何理解 JS 的异步?
JavaScript 是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

JS为何阻塞渲染？

var h1 = document.querySelector('h1');
var btn = document.querySelector('button');

function delay(duration) {
    var start = Date.now();
    while(Date.now() - start < duration){}
}

btn.onclick = function(){
    h1.textContext = '更新DOM文字内容';
    delay(3000)
};

点击按钮后画面阻塞，三秒后显示内容。

任务有优先级吗？

任务没有优先级，在消息队列中先进先出。但消息队列是有优先级的。每一种任务都有一种任务类型，同一种任务必须在一个队列中，不同任务可以分属不同的队列。在一次循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。

  • 微队列：优先级最高 Promise、MutationObserver
  • 交互队列: 优先级高
  • 延时队列： 优先级中
  • 随着浏览器的复杂急剧提升，W3C不再使用宏队列的说法
    //直接把function放到微队列
    Promise.resolve().then(function)

如何理解事件循环

事件循环又叫消息循环，官方叫message loop，浏览器的内部实现是 eventloop ，是浏览器渲染主线程的工作方式。
在chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到消息队列的末尾即可，
过去把消息队列简单分为宏队列和微队列，这种模式目前已经无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
根据W3C官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列中，不同任务可以属于不同的队列。不同的任务队列有不同的优先级，在一个事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

js中的计时器能做到精确计时吗？

  1. 计算机硬件没有原子钟，无法做到精确计时。
  2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差。
  3. 按照 W3C 的 HTML5 规范，浏览器在实现计时器（如 setTimeout 和 setInterval）时，如果嵌套层级超过 5 层，会强制设置一个最小延迟时间，通常是 4 毫秒。这是为了防止开发者滥用计时器导致性能问题。
  4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差。

添加新评论