[译]官方图解：Chrome 快是有原因的，现代浏览器的多进程架构

最新推荐文章于 2025-03-11 10:06:23 发布
最新推荐文章于 2025-03-11 10:06:23 发布
阅读量697 收藏 10
点赞数 5
分类专栏： Android程序员 文章标签： chrome 架构 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_54406581/article/details/136787978
版权
本文介绍了CPU、GPU的基本概念，重点阐述了Chrome浏览器的多进程架构，包括进程和线程的区别，以及渲染器进程在选项卡管理中的应用。同时提及了Android移动开发的学习资源和进阶挑战，强调了深度研究和体系化学习的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作为本系列的第 1 部分，我们将介绍关键技术名词和 Chrome 的多进程架构。

1. CPU（中央处理器）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

CPU(Central Procession Unit) 可以被认为是你计算机的大脑。CPU 核心，就像办公室工作人员，可以逐个处理交代给他们的许多不同的任务。它可以处理从数学到艺术的所有事情，并把处理结果返回出去。曾经大多数 CPU 都是单核，但在现代硬件中，你通常会操作的是多核 CPU，多核 CPU 为你的手机和计算机提供更强的计算能力。

2. GPU

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

GPU（Graphics Processing Unit）是计算机的另一部分。与 CPU 不同，GPU 更擅长处理简单任务，同时可以跨多个核心。顾名思义，它最初是为处理图形而诞生的。这就是为什么在图形处理中，当我们说到 “使用 GPU” 或者 “GPU 支持” 的时候，通常就在说快速渲染和平滑交互。近年来，随着 GPU 加速发展，仅在 GPU 上就可以实现越来越多的计算任务。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如上图所示，三层计算机体系结构中，硬件位于底部，操作系统位于中间，应用程序则在最上层。

当你在计算机或手机上启动应用程序时，CPU 和 GPU 就是为应用程序提供有力的支持。通常，应用程序使用操作系统提供的机制在 CPU 和 GPU 上运行。

Process 和 Thread 上执行的程序

在深入浏览器架构之前，要掌握的另一个概念是 Process（进程） 和 Thread（线程）。

进程可以理解是应用程序的执行程序，线程则是存在于进程内部，并执行其进程程序的部分功能。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

进程作为线程的边界，而线程就像游动在进程中的鱼。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

进程可以通过操作系统，启动另一个进程来执行不同的任务。此时，系统将为新进程分配不同的内存。如果两个进程间需要通信，他们可以利用 IPC（Inter Process Communication）的方式进行通信。许多应用程序都是以这种方式执行的，因此如果某个工作进程（例如一个选项卡）无响应，重启它，并不会影响相同应用程序的其他进程。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

浏览器架构

那么如何使用进程和线程构建 Web 浏览器？

它可能是一个具有多个线程的独立进程，或者存在多个进程但是只有部分进程之间会进行 IPC 通信的结构。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这里有个非常重要的点需要注意，这些不同的架构是实现细节。关于如何构建 Web 浏览器没有标准规范，不同浏览器的架构可能完全不同。

最重要的是浏览器进程，如何与负责应用程序不同部分的其他进程协调。对于渲染器进程，将创建多个进程，并将其分配给每个选项卡。直到最近，Chrome 才为每个标签提供了一个执行进程，现在它尝试为每个站点提供自己的进程，包括 iframe。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如图所示，Chrome 的多进程架构，渲染进程会显示多个图层，表示 Chrome 为每个选项卡运行多个渲染器进程。

这些进程控制什么？

下面介绍了每个 Chrome 进程以及其控制的范围：

  • 浏览器（Browser）：控制 “Chrome” 应用程序，包括地址栏、书签、后退和前进按钮等。还需要处理 Web 浏览器的权限管理，例如网络请求和文件访问。
  • 渲染器（Renderer）：控制选项卡内，网站里显示的所有内容。
  • 插件（Plugin）：控制网站使用的插件，例如：Flash。
  • GPU：独立于其他进程，专用于处理 GPU 任务，它被分成不同的进程，因为 GPU 会处理来自多个进程的请求，并将它们绘制在相同的 Surface 中。

不同的进程，用于处理 Chrome 的不同部分。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
img
img
img
img

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注Android）
img

尾声

如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。

对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。 整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

这里，笔者分享一份从架构哲学的层面来剖析的视频及资料分享给大家梳理了多年的架构经验，筹备近6个月最新录制的，相信这份视频能给你带来不一样的启发、收获。

Android进阶学习资料库

一共十个专题，包括了Android进阶所有学习资料，Android进阶视频，Flutter，java基础，kotlin，NDK模块，计算机网络，数据结构与算法，微信小程序，面试题解析，framework源码！

大厂面试真题

PS：之前因为秋招收集的二十套一二线互联网公司Android面试真题 （含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

《2019-2021字节跳动Android面试历年真题解析》

6601)】**

一文带你看透 Chrome 浏览器架构
LuckyWinty的博客
01-06 2398
背景市面上的浏览器很多，很多很多，多到数不过来。不过目前 Chrome 浏览器还是占了主导地位，至少在开发人员眼里 Chrome 的地位很高。这篇文章来说说 Chrome 浏览器的架构，...
chrome架构-多进程
李三岁的博客
05-10 1956
本文是从chrome架构的学习中作的笔记
chrome多进程架构
02-14 330
问题     构建一个永远不会崩溃或者挂起的排版引擎基本是不可能的，我们同样也不要指望哪天能够构建出一个绝对安全的排版引擎。     我们现阶段的浏览器运行在一个单用户，多合作，多任务的操作系统中。就像一个笨拙的应用程序可以让整个系统崩溃一样。一个糟糕的网页同样可以让一个现代的浏览器崩溃。其原因可能是一个插件出现bug,最终的结果是整个浏览器以及其他正在运行的标签被销毁。     现
Chrome 浏览器性能优化全景解析
最新发布
John_ToStr的博客
03-11 1244
Chrome 浏览器性能优化全景解析
详解主流浏览器多进程架构：Chrome、IE
in permanent beta...
04-28 776
 转自：http://news.youkuaiyun.com/a/20100427/218154.html详解主流浏览器多进程架构：Chrome、IE 随着Web浏览器重要性的日益突出，恶意软件、木马、间谍软件等网络攻击也呈现逐渐的上升。而面对如此众多的潜在威胁，为了确保用户的安全性和稳定性，浏览器不得不改进浏览器的性能，其中之一就是向用户提供多进程浏览。在浏览器中添加多进程浏览功能之后，即使
chrome浏览器多进程架构
ass_ace
04-18 1107
背景 这篇文章取材于Mariko Kosaka在 2018 年 9 月发表在 Chrome 开发者文档中的Inside look at modern web browser系列文章，同时结合我自己的理解。如果你对浏览器如何将代码转化成页面感兴趣，这正适合于你。 CPU 与 GPU CPU 和 GPU 作为计算机中最重要的两个计算单元直接决定了计算性能。 CPU CPU.png CPU 是计算机的大脑，负责处理各种不同的任务。在过去，大多数 CPU 是单芯片的，核心被安置在同...
浏览器进程和事件循环eventloop机制(一)
machaowo的博客
02-26 199
进程-->CPU 分配资源的最小单位，同一个时间内单个CPU 只能运行一个进程，单个 CPU一次只能运行一个任务;线程-->CPU 调度的最小单位，一个进程里面包含多个线程。
搞笑漫画图解几大浏览器的区别（组图）
03-04
的确，Chrome以其快速的页面加载和响应速度闻名，得益于其强大的V8 JavaScript引擎和多进程架构。然而，Chrome的资源消耗也较大，特别是在打开多个标签页时。 最后是Opera。漫画将Opera描绘为“很2”，意味着它可能...
Chrome源码剖析 上--多线程模型 进程通信 进程模型
gdfyug的博客
11-13 337
Chrome源码剖析 上--多线程模型 进程通信 进程模型
【学生选课系统架构全景展示】：组件图与部署图，架构设计的艺术
本文针对学生选课系统展开全面论述，从系统架构设计的理论基础入手，详细分析了架构设计的原则、模式、组件划分及其职责和数据库设计。继而，本文深入探讨了架构图的解读、部署策略以及实际案例分析，以提供对系统...
图解 | 计算机网络名词 / 网络基础知识 / 应用层协议 / DHCP / DNS
u013669912的博客
07-18 2082
…
Chrome浏览器架构图
08-27
详细地讲解了Chrome浏览器的架构，能深入理解CHROME浏览的原理和运行机制
浏览器多进程架构
热情的刘大爷的博客
10-08 887
跟很多多线程浏览器不一样，chrome使用多个进程来隔离不同的标签页，因此打开一个标签页，就等于是开了一个新的进程，当然，进程之间是不共享资源和地址空间的，所以每个进程之间不太会出现互相影响的安全问题，而多个线程，是共享着相同的资源和地址空间的，所以线程之间就有可能会存在恶意修改或者获取非授权数据的复杂性安全问题。 多进程：类似于一个工厂，每个工厂有每个工厂自己做的时间，互不影响 多线程：类似于...
理解WebKit和Chromium: Chromium多进程模型
923723914
07-13 259
转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju/article/details/7725510 #Chromium的进程模型 ##概述 相信你一定有这样的经历：打开很多个页面，不幸的是其中某个页面不响应了或者崩溃了，随之而来的是更不幸的事，所有页面都不响应或者都崩溃了。最让人崩溃的是其中一些页面还有未保存或者未发送的信息！ 这绝对是不堪回首的过去。但是，...
一、浏览器多进程架构
知之为知之，不知为不知
09-29 524
最新的 Chrome 进程架构图 从图中可以看出，最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每.
Chrome 浏览器架构
十九万里的博客
05-01 942
背景这篇文章被收录在我的前端技术系列文章中浏览器工作原理栏目中，做为这个栏目的第一篇文章，先从页面是如何在浏览器中被显示出来这一最常见的问题做为开始，整体介绍浏览器的工作原理。这篇文章取材于Mariko Kosaka在 2018 年 9 月发表在 Chrome 开发者文档中的Inside look at modern web browser系列文章，同时结合我自己的理解。如果你对浏览器如何将代码转化成页面，这正适合于你。CPU 与 GPUCPU 和 GPU 作为计算机中最重要的两个计算单元直接决定了计算性能
服务器处理请求这一部分结合我说的详细展开
02-20
<think>好的，用户之前让我介绍了HTTP请求流程，现在他特别想深入了解“服务器处理请求”这一部分，结合他之前提到的内容详细展开。首先，我需要回忆用户之前提到的要点：服务器监听套接字，分析文档是否存在，基于内核分析，监听80端口的WEB资源，从磁盘读取资源到进程，封装成HTML响应返回。 用户现在希望详细展开这部分，可能他们需要更详细的步骤，或者想了解服务器内部如何处理请求的机制。之前的回答已经涵盖了基本流程，但可能不够深入，比如服务器如何解析请求、查找资源的具体过程、状态码处理等。 接下来，我需要考虑用户的身份。可能是学生、刚入门的开发者，或者对网络原理感兴趣的人。他们可能在学习Web开发或准备面试，需要深入理解服务器处理请求的内部机制。用户可能没有提到的深层需求包括：服务器如何处理并发请求、虚拟主机配置、动态内容生成、安全措施等。此外，可能对性能优化、日志记录和调试方法感兴趣。 需要确保回答结构清晰，分步骤讲解，结合用户提到的点展开。例如，监听端口部分可以解释服务器如何绑定端口，处理多连接；解析请求部分可以详细说明解析方法、路径、头部的过程；资源查找可以涉及文件系统路径映射，权限检查；动态资源可以提到后端语言和框架；响应生成包括MIME类型和压缩等优化。 还要注意用户提到的“基于内核分析”，可能需要解释服务器与操作系统的交互，如使用epoll或kqueue处理高并发，或者sendfile系统调用直接传输文件，减少内存拷贝。 最后，需要检查是否覆盖用户提到的所有点，并补充相关的细节，比如状态码处理、安全验证、性能优化等，确保内容全面且易于理解。可能还需要举例说明，比如Nginx的配置，或者如何处理404错误，让用户更直观地理解。</think>好的！以下是针对 **服务器处理请求** 这一环节的详细展开，结合你提到的核心点（监听端口、路径解析、资源读取、响应封装）进行深入说明： -- ### **一、服务器处理请求的详细流程** #### **1. 监听端口与接收连接** - **绑定端口与监听**： - 服务器启动时，通过内核绑定 **80端口**（HTTP）或 **443端口**（HTTPS），进入监听状态（`LISTEN`）。 - 例如，Nginx/Apache 等 Web 服务器通过 `listen 80;` 配置监听端口。 - **接收客户端连接**： - 当客户端发起 TCP 连接（三次握手完成），内核将连接放入**待处理队列**。 - 服务器通过 `accept()` 系统调用从队列中取出连接，创建新的**套接字**（Socket）用于后续通信。 #### **2. 解析HTTP请求报文** - **读取原始数据**： - 从套接字中读取客户端发送的字节流（二进制数据）。 - 数据格式示例： ```http GET /index.html HTTP/1.1 Host: example.com User-Agent: Chrome/120.0 ``` - **解析关键信息**： - **请求方法**：GET、POST 等。 - **请求路径**：如 `/index.html`（需映射到服务器的文件路径）。 - **协议版本**：HTTP/1.1 或 HTTP/2。 - **请求头**：`Host`（虚拟主机关键）、`Cookie`（会话信息）、`Content-Type`（数据类型）等。 #### **3. 路径映射与资源查找** - **虚拟主机匹配**： - 根据 `Host` 头（如 `example.com`）确定对应的网站配置（适用于一台服务器托管多个网站）。 - **文件系统映射**： - 将请求路径（如 `/index.html`）转换为服务器本地的**绝对路径**。 - 例如，服务器配置的网页根目录为 `/var/www/html`，则实际路径为 `/var/www/html/index.html`。 - **安全限制**： - 禁止访问根目录外的文件（如 `/etc/passwd`），防止路径穿越攻击（Path Traversal）。 - **资源存在性检查**： - 通过系统调用（如 `open()` 或 `stat()`）检查文件是否存在。 - 若不存在，返回 `404 Not Found`。 - 若存在但无读取权限，返回 `403 Forbidden`。 #### **4. 读取资源与动态处理** - **静态资源**（如 HTML、图片）： - 直接从磁盘读取文件内容到内存（例如使用 `sendfile()` 系统调用高效传输）。 - **动态资源**（如 PHP、Python 脚本）： - 通过 **CGI**、**FastCGI** 或反向代理（如 Nginx + uWSGI）调用后端程序。 - 后端程序处理请求（如查询数据库），生成动态内容（如 HTML 或 JSON）。 #### **5. 构造HTTP响应报文** - **状态行与响应头**： - 状态码：`200 OK`（成功）、`301 Moved Permanently`（重定向）等。 - 响应头： ```http Content-Type: text/html; charset=utf-8 # 指定资源类型与编码 Content-Length: 1024 # 资源大小（字节） Server: Nginx/1.18.0 # 服务器类型 Set-Cookie: session_id=abc123; Path=/ # 设置会话Cookie ``` - **响应体**： - 静态内容：直接发送文件内容。 - 动态内容：发送后端程序生成的字符串。 #### **6. 发送响应与连接管理** - **发送数据**： - 通过套接字将响应报文分块传输（TCP协议保证顺序和可靠性）。 - **连接复用**： - HTTP/1.1 默认启用 `Keep-Alive`，保持连接供后续请求复用，减少握手开销。 - HTTP/1.0 默认关闭连接（需手动设置 `Connection: Keep-Alive`）。 -- ### **二、关键技术与优化** #### **1. 高性能并发模型** - **多进程/多线程**： - 每个连接分配独立进程/线程处理（Apache 的 `prefork` 模式）。 - **事件驱动**： - 单线程 + 非阻塞 I/O（Nginx、Node.js 使用 `epoll`/`kqueue` 实现高并发）。 #### **2. 缓存与压缩** - **静态资源缓存**： - 设置 `Cache-Control: max-age=3600`，浏览器缓存文件减少重复请求。 - **压缩传输**： - 通过 `gzip` 压缩 HTML/CSS/JS，减少传输体积（响应头 `Content-Encoding: gzip`）。 #### **3. 安全防护** - **请求过滤**： - 防止 SQL 注入、XSS 攻击（如对用户输入进行转义）。 - **HTTPS 加密**： - 通过 TLS/SSL 加密通信（监听 443 端口）。 --- ### **三、典型问题与调试** #### **1. 常见错误场景** | 问题 | 原因与解决方案 | |---------------------|----------------------------------| | `404 Not Found` | 文件路径错误或资源被删除 | | `500 Internal Error`| 后端程序崩溃（检查日志、代码错误） | | `502 Bad Gateway` | 反向代理与后端服务通信失败 | #### **2. 日志分析** - **访问日志**（Access Log）： ```plaintext 192.168.1.1 - [10/Oct/2023:14:30:00 +0800] "GET /index.html HTTP/1.1" 200 1234 ``` - 记录客户端 IP、请求时间、方法、路径、状态码、响应大小。 - **错误日志**（Error Log）： - 记录服务器内部错误（如权限问题、脚本崩溃）。 -- ### **四、流程图解** ```plaintext 客户端请求 服务器处理流程 | | |→ TCP连接 → 监听端口（80/443） | | |→ HTTP请求 → 解析请求方法、路径、Headers | | |→ 路径映射 → 检查文件是否存在/权限 | | |→ 读取资源 → 静态文件或动态程序处理 | | |← 封装响应 ← 状态码、Headers、Body | | |← 发送响应 ← 关闭或复用连接 ``` --- ### **总结** 服务器处理请求的核心是 **解析请求、定位资源、生成响应**。通过路径映射、权限控制、动态处理等步骤，将磁盘或程序生成的内容封装为 HTTP 报文返回。理解这一过程有助于优化服务器配置（如缓存策略）、排查错误（如 404/500 问题）以及设计高并发架构（如选择事件驱动模型）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值