type
status
date
slug
summary
tags
category
icon
password

📝 内容


进程

常见的浏览器进程包括:
  1. 浏览器主进程:也称为浏览器引擎或浏览器内核,负责管理用户界面、插件、子进程的管理、网络请求等。它是整个浏览器的核心,负责协调各个模块的工作。
  1. 渲染进程:每个标签页(Tab)都有一个独立的渲染进程,负责解析和渲染HTML、CSS、JavaScript,以及执行网页中的交互操作。这个进程是浏览器性能和安全的关键因素之一。
  1. 插件进程:负责运行浏览器插件,如Flash、Java等。为了保证稳定性和安全性,现代浏览器通常会将插件单独放在一个独立的进程中运行。
  1. GPU进程:用于处理浏览器中的图形操作,如绘制页面、处理动画等。GPU进程的存在可以提升浏览器的性能,特别是在处理复杂的网页或应用时。
每个进程都有其独特的作用,通过多进程架构,浏览器可以实现更高的稳定性、安全性和性能。

渲染进程中的线程

浏览器中的各个进程包含多个线程,每个线程都有其特定的作用。以下是常见的线程及其作用:
  1. 主线程(Main Thread):在浏览器的主进程中运行,负责处理用户输入、界面更新、事件调度等。主线程也负责与渲染进程、网络进程等其他进程进行通信。
  1. 渲染线程(Rendering Thread):在渲染进程中运行,负责解析 HTML、CSS 和 JavaScript,并将页面内容渲染到用户界面上。渲染线程通常包括以下几个子线程:
      • 布局线程(Layout Thread):负责计算文档中各个元素的位置和大小。
      • 绘制线程(Painting Thread):负责将页面内容绘制到屏幕上。
      • 合成线程(Compositing Thread):负责将页面各个图层合成为最终的页面,并交由 GPU 进行渲染。
  1. JavaScript引擎线程:在渲染进程中运行,负责解析和执行 JavaScript 代码。常见的 JavaScript 引擎包括 V8(Chrome 使用)和 SpiderMonkey(Firefox 使用)等。
  1. 事件线程(Event Thread):在渲染进程中运行,负责处理用户输入、触发的事件等。例如,点击按钮、输入文本等用户操作会触发相应的事件,事件线程负责监听并处理这些事件。
  1. 网络线程(Network Thread):在浏览器的主进程中运行,负责处理网络请求、DNS 解析等网络相关的操作。网络线程通常是单独的线程池,以便并行处理多个网络请求,提高网络性能。
  1. 定时器线程(Timer Thread):负责管理定时器,例如 setTimeout() 和 setInterval() 创建的定时器。这些定时器的回调函数会在指定的时间间隔内在主线程中被执行。
这些线程相互协作,共同构建出浏览器的功能和性能。通过合理的线程管理和调度,浏览器能够实现快速、流畅的用户体验。

进程间通信的方式

  • 管道通信:就是操作系统在内核中开辟一段缓冲区,进程1可以将需要交互的数据拷贝到这个缓冲区里,进程2就可以读取了
  • 消息队列通信:消息队列就是用户可以添加和读取消息的列表,消息队列里提供了一种从一个进程向另一个进程发送数据块的方法,不过和管道通信一样每个数据块有最大长度限制
  • 共享内存通信:就是映射一段能被其他进程访问的内存,由一个进程创建,但多个进程都可以访问,共享进程最快的是IPC方式
  • 信号量通信:比如信号量初始值是1,进程1来访问一块内存的时候,就把信号量设为0,然后进程2也来访问的时候看到信号量为0,就知道有其他进程在访问了,就不访问了
  • socket:其他的都是同一台主机之间的进程通信,而在不同主机的进程通信就要用到socket的通信方式了,比如发起http请求,服务器返回数据

主进程和内核进程的通信过程

如果自己打开任务管理器,然后打开一个浏览器,就可以看到:任务管理器中出现了两个进程(一个是主控进程,一个则是打开 Tab 页的渲染进程),然后在这前提下,看下整个简化的过程:
  • Browser 进程收到用户请求,首先需要获取页面内容(譬如通过网络下载资源),随后将该任务通过 RendererHost 接口传递给 Render 进程。
  • Renderer 进程的 Renderer 接口收到消息,简单解释后,交给 GUI 渲染线程,然后开始渲染。
  • 渲染线程接收请求,加载网页并渲染网页,这其中可能需要 Browser 进程获取资源和需要 GPU 进程来帮助渲染。
  • 当然可能会有 JS 线程操作 DOM(这样可能会造成回流并重绘)。
  • 最后 Render 进程将结果传递给 Browser 进程。
  • Browser 进程接收到结果并将结果绘制出来

📎 参考文章

浏览器性能分析React-Query分享
  • Giscus
  • Utterance