宏观视角下的浏览器

01丨Chrome架构：仅仅打开了1个页面，为什么有4个进程？

进程和线程

	多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。那什么又是进程呢？

	一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。

总结来说，进程和线程之间的关系有以下 4 个特点。

1. 进程中的任意一线程执行出错，都会导致整个进程的崩溃。
2. 线程之间共享进程中的数据。
3. 当一个进程关闭之后，操作系统会回收进程所占用的内存。
4. 进程之间的内容相互隔离。

02 | TCP协议：如何保证页面文件能被完整送达浏览器？

IP：把数据包送达目的主机

网际协议（Internet Protocol，简称IP）

计算机的地址就称为 IP 地址，访问任何网站实际上只是你的计算机向另外一台计算机请求信息。

UDP：把数据包送达应用程序

“用户数据包协议（User Datagram Protocol）”，简称UDP。

IP通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序。

UDP 不能保证数据可靠性，但是传输速度却非常快，所以 UDP 会应用在一些关注速度、但不那么严格要求数据完整性的领域，如在线视频、互动游戏等。

TCP：把数据完整地送达应用程序

TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。

相较于UDP，TCP引入了重传和排序机制。

一个完整的 TCP 连接的生命周期包括了“建立连接”“传输数据”和“断开连接”三个阶段。

**首先，建立连接阶段。**这个阶段是通过“三次握手”来建立客户端和服务器之间的连接。TCP 提供面向连接的通信传输。面向连接是指在数据通信开始之前先做好两端之间的准备工作。所谓三次握手，是指在建立一个 TCP 连接时，客户端和服务器总共要发送三个数据包以确认连接的建立。
**其次，传输数据阶段。**在该阶段，接收端需要对每个数据包进行确认操作，也就是接收端在接收到数据包之后，需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后，在规定时间内没有接收到接收端反馈的确认消息，则判断为数据包丢失，并触发发送端的重发机制。同样，一个大的文件在传输过程中会被拆分成很多小的数据包，这些数据包到达接收端后，接收端会按照 TCP 头中的序号为其排序，从而保证组成完整的数据。
**最后，断开连接阶段。**数据传输完毕之后，就要终止连接了，涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。

03丨HTTP请求流程：为什么很多站点第二次打开速度会很快？

浏览器使用HTTP 协议作为应用层协议，用来封装请求的文本信息；并使用TCP/IP 作传输层协议将它发到网络上，所以在 HTTP 工作开始之前，浏览器需要通过 TCP 与服务器建立连接。也就是说HTTP 的内容是通过 TCP 的传输数据阶段来实现的。

浏览器端发起 HTTP 请求流程

1. 构建请求
2. 查找缓存
3. 准备 IP 地址和端口
4. 等待 TCP 队列
5. 建立 TCP 连接
6. 发送 HTTP 请求

首先浏览器会向服务器发送请求行，它包括了请求方法、请求 URI（Uniform Resource
Identifier）和 HTTP 版本协议。

服务器端处理 HTTP 请求流程

1. 返回请求

   首先服务器会返回响应行，包括协议版本和状态码。

   但并不是所有的请求都可以被服务器处理的，那么一些无法处理或者处理出错的信息，怎么办呢？服务器会通过请求行的状态码来告诉浏览器它的处理结果，比如：
   最常用的状态码是 200，表示处理成功；
   如果没有找到页面，则会返回404。

2. 断开连接

3. 重定向

总结

浏览器中的 HTTP 请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备 IP 和端口、等待 TCP 队列、建立 TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接。

04 | 导航流程：从输入URL到页面展示，这中间发生了什么？

从输入 URL 到页面展示

1. 用户输入
2. URL 请求过程

（1）重定向

如果发现返回的状态码是301 或者 302，那么说明服务器需要浏览器重定向到其他 URL。

（2）响应数据类型处理
3. 准备渲染进程
4. 提交文档
5. 渲染阶段

05丨渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？

按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

构建 DOM 树

浏览器无法直接理解和使用 HTML，所以需要将HTML 转换为浏览器能够理解的结构——DOM 树。

样式计算（Recalculate Style）

1. 把 CSS 转换为浏览器能够理解的结构
2. 转换样式表中的属性值，使其标准化
3. 计算出 DOM 树中每个节点的具体样式

布局阶段

1. 创建布局树
2. 布局计算

分层

浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。

通常情况下，并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。

创建图层需要满足的条件：

1. 拥有层叠上下文属性的元素会被提升为单独的一层。
2. 需要剪裁（clip）的地方也会被创建为图层。

图层绘制

栅格化（raster）操作

合成和显示

一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。

一个完整的渲染流程大致可总结为如下：

1. 渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。
2. 渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的
   样式。
3. 创建布局树，并计算元素的布局信息。
4. 对布局树进行分层，并生成分层树。
5. 为每个图层生成绘制列表，并将其提交到合成线程。
6. 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
7. 合成线程发送绘制图块命令DrawQuad给浏览器进程。
8. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。