{万物皆有裂痕，那是光照进来的地方|There's a track,a crack in everying .That's how the light gets in.}

大家好，我是柒八九。

前言

本来呢，最近在规划一篇关于浏览器的文章，但是在做文章架构梳理和相关资料查询的时候，发现浏览器在渲染页面的过程中，也别有洞天。索性，就单独将其作为一篇文章来写。

这里有几点说明。

1. 平时开发中用的是Chrome浏览器，所以下面的文章都是以Chrome浏览器为准。
2. 本文中，Chromium和Chrome可以认同是一个东西，不做强制区分，理由下文会讲到。
3. 该篇文章过于长，可以按照自己喜好，酌情选读文章内容。
4. 该篇文章主要讲浏览器内部渲染像素(页面)角度分析，而不会涉及到网络处理/JS解析等。有的话也是一带而过，我们后期会专门有一篇文章，带大家串一下流程的。

还有，之前我们写过浏览器相关的知识点，如果想了解该系列文章(浏览器相关)，可以参考我们已经发布的文章。如下是往期文章。

1. 页面是如何生成的(宏观角度)
2. Chromium 最新渲染引擎--RenderingNG
3. RenderingNG中关键数据结构及其角色
4. 浏览器之客户端存储

你能所学到的知识点

1. 前置知识推荐阅读指数⭐️⭐️⭐️⭐️⭐️

1. Chromium 和 Chrome的关系
2. Chromium架构简析
3. 何为网页内容
4. 何为{像素|Pixels}
5. Chrome渲染过程是反复进行的

2. 页面数据解析推荐阅读指数⭐️⭐️⭐️⭐️⭐️

1. HTML 解析为 DOM
2. CSS 解析为 CSSOM

3. 布局阶段生成 {不可变fragment树|immutable fragment tree}推荐阅读指数 ⭐️⭐️⭐️⭐️⭐️
4. {绘制|Paint}阶段生成{显示列表|Display List}推荐阅读指数 ⭐️⭐️⭐️⭐️⭐️
5. {光栅化|Raster}将部分{显示列表|Display List}转换位{位图|BitMap}推荐阅读指数⭐️⭐️⭐️⭐️⭐️

1. GPU 进程中进行光栅化

6. 页面状态发生变化

1. 动画帧生成图层
2. 合成分配（Compositing Assignments）发生在绘制之前
3. 合成生成 property trees

7. Display(viz)

1. 双缓存

好了，天不早了，干点正事哇。

前置知识

Chromium 和 Chrome的关系

Chromium和Chrome之间存在密切的关系，可以理解为Chromium是Chrome的开源项目。

1. Chromium：Chromium是一个开源的Web浏览器项目，由Google主导开发。它是一个完全开放的项目，源代码可以公开获取并进行自由修改。

• Chromium项目包括浏览器引擎Blink、JavaScript引擎V8等组件。
• Chromium致力于提供一个可扩展、快速和安全的Web浏览器解决方案，同时也是许多其他基于Chromium的浏览器的基础。

2. Chrome：Chrome是由Google基于Chromium项目开发的Web浏览器。

• 它是Chromium的商业版本，针对普通用户提供了更多功能和服务。
• Chrome具有更多的集成功能，包括自动更新、PDF阅读器、Google账号同步等。
• 此外，Chrome还包括一些针对企业用户和开发人员的工具和功能。

可以将Chromium视为Chrome的基础，Chrome在此基础上添加了自己的功能和服务。

想必大家都有Chrome浏览器，我们可以做一个验证，大家在地址栏中输入chrome://settings/help或者按照如下的步骤。

关于Chorme和Chromium的关系就映入眼帘。如下图所示。

关于它们之间的关系，我们就不在赘述。

其它奇怪的知识

其实Chromium也是可以被下载，同时也可以作为搜索引擎的。

• 下载地址
• 

市面上，很多浏览器都是基于Chromium浏览器开发的。

Edge 浏览器

360浏览器

Chromium架构简析

Chromium被分成两个主要部分（不包括其他库）：{浏览器|Browser}和{渲染器|Renderer}（包括Blink，网络引擎）。

• {浏览器|Browser}是主进程，代表所有的用户界面和I/O

• 负责运行用户界面并管理{渲染器|Renderer}和其他进程
• 也称为"浏览器进程"或简称为{浏览器|Browser}

• {渲染器|Renderer}是由{浏览器进程|Browser Process}驱动的子进程

• 渲染器使用Blink开源布局引擎来解释和布局HTML。

它们的关系如下

从源码架构角度来看Chromium

每个框代表一个应用层。任何一个低层级都不依赖于更高层级的内容。

我们按照从底层到顶层的顺序，来简单介绍下，每个层级的作用。

1. WebKit：在Safari、Chromium和其他基于WebKit的浏览器的渲染引擎。

• 端口（Port）是WebKit的一部分，它与平台相关的系统服务（如资源加载和图形生成）进行集成。

2. Glue：将WebKit的数据类型转换为Chromium的数据类型的组件。

• 这是"WebKit嵌入层"
• 它是Chromium的基础。

3. Renderer/Render host：这是Chromium的"多进程嵌入层"。

• 它在进程上进行代理通知和命令发送。

4. WebContents：是Content模块的组件。

• 它可以轻松地嵌入到视图中，实现HTML的多进程渲染

5. {浏览器|Browser}：代表浏览器窗口

• 它包含多个WebContents

6. Tab Helpers：附加到WebContents上的单独对象。

• 浏览器将各种助手对象附加到它所持有的WebContents上（如网站图标、信息栏等）。

将上面的比较生硬的词汇替换一下，然后就可以画出下面的关于Chromium架构图。

这块的架构图，有些生硬，后期也会有专门的文章来进行讲解。

通过上文介绍，我们得到一个结论 ：Chromium ≈ chrome。 所以，下文中可以将Chromium和chrome看成一个东西。

下图是chrome将content生成页面信息的示意图。

何为网页内容

在Chromium C++代码库中，在架构层面上content负责红色框中的所有内容。(可以看上面的架构图)

而Tabs、地址栏、导航按钮、菜单等不在content的范围内。

Chrome安全模型的关键是渲染发生在沙盒化的进程中。

• Blink是{渲染器|Renderer}进程中的代码子集，在content命名空间内。
• Blink实现了Web平台API和Web规范的语义。

{渲染器|Renderer}进程还运行一个称为{合成器|compositor}（"cc"）的组件。

对应的关系如下：(从进程和线程的关系角度看)

页面内容分类

content 是 Chromium 中用于表示网页内部或 Web 应用程序前端的所有代码的通用术语。

也就是在上面架构图中的content

常见的类型包括文本、图像、HTML元素（包围文本的标记语言）、CSS（定义HTML元素的表现方式）和JavaScript（可以动态修改上述所有内容）。

除了上述列举的常见的内容类型，像<video>, <canvas>, WebAssembly, WebGL, WebVR, PDF也属于Content的范畴。

如果对WebAssembly不了解，可以翻看之前写的 -浏览器第四种语言-WebAssembly。

还有关于WebGL也打算写相关系列的文章，敬请期待.....

我们通过一个真实的案例来看一下。下图是最近很🔥的ChatGPT的地址。左侧是真实的页面显示，右侧是该页面中包含的内容信息。

可以看到一个真实的网页是由数千行HTML、CSS和JavaScript代码的纯文本形式的所组成

网页的源代码是{渲染器|Renderer}的输入

何为{像素|Pixels}

{像素|Pixels}是图像的最小单位，它是构成数字图像的基本元素。

"像素"一词源自于"picture element"的缩写。每个像素代表了图像中的一个点，它具有特定的位置和颜色信息。

在计算机图形中，{像素|Pixels}通常被表示为一个二维矩阵或数组，它们排列在网格中，形成图像的整体。每个像素可以存储图像的亮度、颜色和透明度等信息。对于彩色图像，通常使用RGB（红、绿、蓝）模型来表示每个像素的颜色，其中每个分量的取值范围通常是0到255之间。

{像素|Pixels}的密度决定了图像的清晰度和细节水平。更高的像素密度意味着在给定的显示区域内有更多的像素，从而能够呈现更多的细节。常见的像素密度单位是每英寸像素数，称为PPI（Pixels Per Inch）。

在计算机图形处理中，我们可以通过操作和改变像素的颜色、位置和透明度来实现图像的绘制、编辑和处理。像素在计算机图形、摄影、显示技术和计算机视觉等领域起着至关重要的作用，它们是数字图像的基本组成部分。

CSS表示像素颜色的方式