[网络协议]【前端】从输入URL到页面展示，这中间发生了什么？（内含面试回答版本）

从输入URL到页面展示，这中间发生了什么？

以下为图示内容：

	首先，必须了解浏览器进程，渲染进程和网络进程的职责是什么？

浏览器进程、渲染进程和网络进程的主要职责

? 浏览器进程主要负责用户交互、子进程管理和文件储存等功能。

? 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。

? 渲染进程的主要职责是把从网络下载的HTML、JavaScript、CSS、图?等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过?络获取的，会存在?些恶意代码利?浏览器漏洞对系统进?攻击，所以运?在渲染进程??的代码是不被信任的。这也是为什么Chrome会让渲染进程运行在安全沙箱?，就是为了保证系统的安全。

	 输入URL到页面展示的大体流程如下：

从输入URL到页面展示的大体流程

? ?先，用户从浏览器进程里输入请求信息；
? 然后，网络进程发起URL请求；
? 服务器响应URL请求之后，浏览器进程就又要开始准备渲染进程了；
? 渲染进程准备好之后，需要先向渲染进程提交页面数据，我们称之为提交文档阶段；
? 渲染进程接收完文档信息之后，便开始解析页面和加载子资源，完成页面的渲染。

用户发出URL请求到页面开始解析的这个过程，就叫做导航，浏览器的导航过程涵盖了从??发起请求到提交?档给渲染进程的中间所有阶段。
导航也就是用户在搜索框敲下回车，标签页图标变为加载状态，直到渲染进程接收完网络进程发送的服务器返回响应体，浏览器界面的前进后退、地址、安全、页面的状态更新，但此时标签页图标还是加载状态，刚刚开始渲染页面。

了解大体流程后，我们继续详细了解流程

从输入URL到页面展示的详细流程

1. 用户输入阶段

   – 用户输入关键字

   —— 地址栏根据输入关键字判断要进行搜索还是要进行URL请求，我们认为要进行URL请求（如果要进行搜索，生成搜索地址用默认搜索网站搜索）
   —— 地址栏继续判断输入内容是否符合URL规则，我们认为符合规则（如果不符合规则请求失败）
   —— 地址栏继续判断URL是否完整，我们认为不完整（如果完整直接不进行下一步，得到完整URL）
   —— 地址栏将输入内容加上协议，例如https://，合成完整的URL

   – 用户敲回车开始请求

   —— 此时页面不变，标签页上图标变为加载状态

2. URL请求过程阶段

   – 浏览器进程通过进程间通信（IPC）把URL发送到网络进程，网络进程开始URL请求
   —— 网络进程判断本地是否缓存过此资源，我们认为没有缓存过（如果缓存过直接返回资源给浏览器进程）
   —— 网络进程判断是否需要进行DNS解析获取IP，或者使用协议HTTPS时， 网络进程判断是否需要进行TLS连接，我们认为不需要这些额外步骤

   负责把域名??映射为IP的系统就叫做“域名系统”，简称DNS。

   SSL(Secure Sockets Layer 安全套接层), 及其继任者TLS(Transport Layer Security 传输层安全）是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层对网络连接进行加密。

   – 网络进程利?IP地址和服务器建?TCP连接

   – 网络进程向服务器发送请求信息（请求?、请求头等信息）

   – 服务器接收到请求信息后，根据请求信息生成响应数据（包括响应?、响应头和响应体等信息），并发给网络进程

   – 网络进程接收了响应行和响应头之后，开始解析响应数据

   （1）可能需要重定向

   在导航过程中，如果服务器响应?的状态码包含了301、302?类的跳转信息，浏览器会跳转到新的地址继续导航，这就是重定向。

   —— 我们认为响应?是200，不需要重定向，网络进程判断可以继续处理该请求。（需要重定向即跳转到新地址继续导航）

   （2）处理响应数据类型

   Content-Type是HTTP头中?个?常重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型。

   浏览器会根据Content-Type的值来决定如何显?响应体的内容。

   Content-Type的值是application/octet-stream，显?数据是字节流类型的，通常情况下，浏览器会按照下载类型来处理该请求，那么该请求会被提交给浏览器的下载管理器，同时该URL请求的导航流程就此结束。

   Content-type字段的值是text/html，这就是告诉浏览器，服务器返回的数据是HTML格式。

   —— 我们认为Content-type字段的值是text/html，服务器返回的数据是HTML格式，浏览器判断继续进?导航流程。

3. 准备渲染进程阶段

   一般来说，Chrome会为每个页面分配?个渲染进程，每打开?个新页面就会配套创建?个新的渲染进程。

   但是，如果从A??打开B??，且A和B都属于同?站点的话，那么B??复?A??的渲染进程；

   

   我们将同?站点（same-site） 定义为根域名（例如，geekbang.org）加上协议（例如，https:// 或者http://），他们的地址可以拥有该根域名下的所有子域名和不同的端口。例如：
   https://time.geekbang.org
https://www.geekbang.org
https://www.geekbang.org:8080
   它们都是属于同?站点，因为它们的协议都是HTTPS，?且根域名也都是geekbang.org。

– 浏览器判断不为同?站点，我们准备好新的渲染进程（是同?站点复用已有进程）

4. 提交文档阶段

   这?的“?档”是指URL请求的响应体数据。
   更新的内容如下图所?，下图也是导航完成状态：
   

   – 浏览器进程发出“提交?档”的消息，渲染进程接收到“提交?档”的消息后，会和?络进程建?传输数据的“管道”。
   – 等?档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。
   – 浏览器进程在收到“确认提交”的消息后，会更新浏览器界?状态，包括了安全状态、地址栏的URL、前进后退的历史状态，并更新Web页面。

5. 渲染阶段

   – 渲染进程开始页面解析和子资源加载

   输?的HTML在渲染模块中经过很多?阶段，最后输出为像素的处理流程叫做渲染流水线。

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

   —— 构建DOM树: HTML通过HTML解析器转成DOM Tree（类似?叉树结构）
   —— 样式计算: 渲染引擎会把获取到的CSS?本全部转换为styleSheets结构中的数据，计算出DOM节点的样式。
   —— 布局阶段:通过DOM tree和styleSheets创建布局树（render tree），并计算元素的布局信息。
   —— 分层： 对布局树进?分层，并?成分层树。
   —— 绘制：为每个图层?成绘制列表。
   —— 将绘制列表提交到合成线程。
   —— 分块：合成线程将图层分成图块（tile）。
   —— 光栅化：在光栅化线程池中将图块转换成位图（实际上是在CPU进程中实现的生成位图，并且把位图保存在CPU中 ）
   —— 合成：合成线程?成?个绘制图块的命令?“DrawQuad”，并发送DrawQuad给浏览器进程。

   – 显?：浏览器进程根据DrawQuad消息?成??，并显?到显?器上

   重排: 更新了元素的?何属性;
   重排需要更新完整的渲染流?线，所以开销也是最?的。

   重绘：更新元素的绘制属性；
   重绘省去了布局和分层阶段，所以执?效率会?重排操作要??些。

   合成：直接在?主线程上执?合成动画操作
   ?主线程上合成，并没有占?主线程的资源，另外也避开了布局和绘制两个?阶段，所以相对于重绘和重排，合成能??提升绘制效率。（例如transform）
   

   – 一旦页面生成完成，渲染进程会发送一个消息给浏览器进程，浏览器接收到消息后，会停止标签图标上的加载动画。

?个完整的页面就?成了。

（无解释面试回答版本）从输入URL到页面展示的详细流程 👈👈👈👈需要面试回答直接点击这里

1. 用户输入阶段

   – 用户输入关键字

   —— 地址栏根据输入关键字判断要进行搜索还是要进行URL请求，我们认为要进行URL请求（如果要进行搜索，生成搜索地址用默认搜索网站搜索）
   —— 地址栏继续判断输入内容是否符合URL规则，我们认为符合规则（如果不符合规则请求失败）
   —— 地址栏继续判断URL是否完整，我们认为不完整（如果完整直接不进行下一步，得到完整URL）
   —— 地址栏将输入内容加上协议，例如https://，合成完整的URL

   – 用户敲回车开始请求

   —— 此时页面不变，标签页上图标变为加载状态

2. URL请求过程阶段

   – 浏览器进程通过进程间通信（IPC）把URL发送到网络进程，网络进程开始URL请求
   —— 网络进程判断本地是否缓存过此资源，我们认为没有缓存过（如果缓存过直接返回资源给浏览器进程）
   —— 网络进程判断是否需要进行DNS解析获取IP，或者使用协议HTTPS时， 网络进程判断是否需要进行TLS连接，我们认为不需要这些额外步骤

   – 网络进程利?IP地址和服务器建?TCP连接

   – 网络进程向服务器发送请求信息（请求?、请求头等信息）

   – 服务器接收到请求信息后，根据请求信息生成响应数据（包括响应?、响应头和响应体等信息），并发给网络进程

   – 网络进程接收了响应行和响应头之后，开始解析响应数据

   —— 我们认为响应?是200，不需要重定向，网络进程判断可以继续处理该请求。（需要重定向即跳转到新地址继续导航）

   —— 我们认为Content-type字段的值是text/html，服务器返回的数据是HTML格式，浏览器判断继续进?导航流程。

3. 准备渲染进程阶段
   – 浏览器判断不为同?站点，我们准备好新的渲染进程（是同?站点复用已有进程）

4. 提交文档阶段

   – 浏览器进程发出“提交?档”的消息，渲染进程接收到“提交?档”的消息后，会和?络进程建?传输数据的“管道”。
   – 等?档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。
   – 浏览器进程在收到“确认提交”的消息后，会更新浏览器界?状态，包括了安全状态、地址栏的URL、前进后退的历史状态，并更新Web页面。

5. 渲染阶段

   – 渲染进程开始页面解析和子资源加载

   —— 构建DOM树: HTML通过HTML解析器转成DOM Tree（类似?叉树结构）
   —— 样式计算: 渲染引擎会把获取到的CSS?本全部转换为styleSheets结构中的数据，计算出DOM节点的样式。
   —— 布局阶段:通过DOM tree和styleSheets创建布局树（render tree），并计算元素的布局信息。
   —— 分层： 对布局树进?分层，并?成分层树。
   —— 绘制：为每个图层?成绘制列表。
   —— 将绘制列表提交到合成线程。
   —— 分块：合成线程将图层分成图块（tile）。
   —— 光栅化：在光栅化线程池中将图块转换成位图（实际上是在CPU进程中实现的生成位图，并且把位图保存在CPU中 ）
   —— 合成：合成线程?成?个绘制图块的命令?“DrawQuad”，并发送DrawQuad给浏览器进程。

   – 显?：浏览器进程根据DrawQuad消息?成??，并显?到显?器上
   – 一旦页面生成完成，渲染进程会发送一个消息给浏览器进程，浏览器接收到消息后，会停止标签图标上的加载动画。

?个完整的页面就?成了。