Tinyo Docs

Appearance

On this page

进程与线程 ​

浏览器的进程和线程是浏览器架构中的两个重要概念。它们协同工作以提供浏览器的功能和性能。

2023年6月28日，让我来重新且好好理解一下浏览器的进程与线程。

在浏览器中，每个标签页或窗口通常在独立的进程中运行。这是为了实现多进程架构，以提高稳定性、安全性和性能。每个进程都有自己的内存空间和系统资源，并在操作系统级别进行管理。如果一个标签页或窗口崩溃，其他进程仍然可以正常工作，这有助于减少整个浏览器崩溃的风险。

当我们打开浏览器，默认会有一个标签页，实际上就已经开启了一个进程。浏览器本身也有其他的进程，下面举例几个重要的进程：

浏览器进程 ​

也叫主进程，主进程是浏览器的核心进程，负责协调和管理整个浏览器的操作。

  • 管理和创建其他进程，如渲染进程、插件进程和网络进程。
  • 处理用户界面的显示和交互，包括地址栏、菜单、标签栏等。
  • 处理用户输入和触发浏览器功能，如打开新标签页、关闭标签页等。
  • 管理插件，如加载和运行浏览器插件。
  • 处理网络请求的调度和路由。

网络进程 ​

网络进程负责处理与网络相关的操作，包括发起和处理网络请求、DNS解析、SSL加密等。

  • 发起和处理HTTP请求。
  • 处理DNS解析和IP地址的获取。
  • 管理和维护与服务器之间的连接。
  • 处理和验证SSL证书。
  • 处理缓存和Cookie等网络数据。

插件进程 ​

插件进程用于运行浏览器插件，例如Flash插件。插件进程的职责包括：

  • 加载和运行插件代码。
  • 处理与插件相关的用户交互和事件。
  • 提供插件与其他进程之间的通信接口。

GPU进程 ​

GPU进程负责处理图形渲染和加速，它与渲染进程协同工作以提供更快的图形处理能力。其职责包括：

  • 将渲染进程生成的图像数据传输到GPU进行图形计算和渲染。
  • 处理复杂的图形操作和动画效果。
  • 提供硬件加速功能，以提高图形渲染的性能和效率。

渲染进程 - 重点 ​

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

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

渲染进程负责解析和渲染网页内容，并处理与网页交互相关的任务。每个标签页通常有一个独立的渲染进程。渲染进程的职责包括：

  • 解析和执行网页的HTML、CSS和JavaScript代码。
  • 构建和绘制网页的可视化内容。
  • 处理用户交互事件，如鼠标点击、键盘输入等。
  • 管理和处理与网页相关的资源，如图像、音频、视频等。
  • 处理网页的布局和排版。
  • 与其他进程进行通信，如主进程和扩展进程。

当然，它是由多个线程组合起来完成这么多的指责，它主要包含了以下几个主要线程：

1. GUI 渲染线程

  • 主要负责页面的渲染，解析 HTML，CSS，构建 DOM 树，布局和绘制等。
  • 当页面需要重绘或者由于某种操作引发回流时，将执行该线程。
  • 该线程与JS 引擎线程互斥，当执行 JS 引擎线程时，GUI渲染线程会被挂起， 当前任务队列为空时，JS引擎才会去执行 GUI 渲染。

2. JS 引擎线程

  • 主要负责处理 JavaScript 脚本，执行代码。
  • 也主要负责执行准备好的待执行的事件，即定时器结束，或者异步请求成功并正确返回时，将依次进入任务 队列，等待 JS 引擎线程的执行。
  • 该线程与 GUI 渲染线程互斥，当 JS引擎线程执行 JavaScript 脚本时间过长， 将导致页面渲染的阻塞。

3. 定时触发线程

  • 负责执行异步定时器一类的函数的线程，如 setInterval，setTimeout 等。
  • 主线程依次执行代码时，遇到定时器，会将定时器交给该线程处理，当计数完毕后， 事件触发线程会将计数完毕的事件加入到任务队列的尾部，等待 JS引擎线程执行。

4. 事件触发线程

  • 主要负责将准备好的事件交给 JS 引擎线程执行，比如 setTimeout 定时器计数结束，ajax 等异步请求成功并触发回调函数，或者用户触发点击事件时，该线程会将整装待发的事件依次加入到任务队列的尾部，等待 JS 引擎线程的执行。5

5. 异步http 请求线程

  • 主要负责异步请求一类的函数的线程，如 Promise，axios，ajax等，主线程依次执行代码时，遇到异步请求，会将函数交给该线程处理，当监听到状态码变更，如果有回调函数，时间触发线程会将回调函数加入到任务队列的尾部，等待 JS 引擎线程的执行。

在浏览器中，当输入网址后，浏览器会执行以下步骤来处理响应的文件： ​

  1. 用户界面线程：

用户界面线程负责与用户的交互，包括接收用户的输入和显示网页内容。当用户输入网址并按下回车键后，用户界面线程会触发请求并显示加载状态。

  1. 网络线程：

网络线程负责发送网络请求并接收响应。它会根据输入的网址构建HTTP请求，并通过网络进行传输。一旦服务器响应到达，网络线程将接收到的数据传递给渲染引擎线程。

  1. 渲染引擎线程：

渲染引擎线程负责解析和渲染网页内容。它会接收网络线程传递的响应数据，并开始解析HTML和CSS，构建DOM树和CSSOM树。如果遇到JavaScript文件，渲染引擎线程会创建JavaScript引擎线程来处理。

  1. JavaScript引擎线程：

JavaScript引擎线程负责解析和执行JavaScript代码。它会执行JavaScript文件中的逻辑，修改DOM树和CSSOM树，或者执行其他操作。如果JavaScript代码包含耗时的计算或阻塞操作，可能会影响主线程的响应性。