从输入URL到页面展示的过程详解

最新推荐文章于 2024-07-14 14:15:19 发布

蔡姐

最新推荐文章于 2024-07-14 14:15:19 发布

阅读量2.7k

点赞数 5

分类专栏：浏览器渲染文章标签：前端

本文链接：https://blog.csdn.net/baidu_33438652/article/details/106586413

版权

作为一个前端人员，面试时总会有这个问题：“在浏览器从输入URL到页面展示中经历了什么过程”？这个问题我之前也是一知半解，随着对内容了解的越多，发现这个问题涵盖的面越广，涉及的知识也很多，所以今天将它整理一下，方便自己和其他小伙伴一起学习。

由于这个问题涉及知识很多，而且我也想把这些知识都一起整理一下，所以本文采用总-分-总的的行文思路，具体内容如下：

结构部署

第一章概述：首先展示整体流程图，介绍整个流程所需要涉及的几个方面
第二章浏览器进程：这部分详细介绍一个浏览器含有的多种进程以及每种进程的作用
第三章 TCP/IP协议：这部分介绍网络体系结构分层，TCP/IP的具体含义，介绍数据包如何传输到浏览器里，以及三次握手和四次挥手的过程
第四章 HTTP网络请求：这部分介绍HTTP请求的完整流程，介绍重定向和如何保持登录状态
第五章浏览器渲染：这部分介绍渲染的整个过程
第六章从输入URL到页面展示的总流程：将上诉几章知识进行总结，最后串联全部流程
参考文献为了这篇文章一共参考的文章，对这些作者从心里表达感谢，让我学习了很多内容

在这篇文章中，我所有的分析都是基于 Chrome 浏览器的，要是小伙伴觉得哪章的内容很无聊，或者我说的不是很好，可以提出意见和建议，若文中有不对的地方，欢迎评论区指正，十分感谢

好的，废话不多说，现在开始正文！！

第一章概述

先看一个完整流程的示意图：
在这里插入图片描述

从图中看出，从输入 URL 到页面展示，整个流程涉及到了网络、进程、渲染等一系列的知识，主要包含以下几个方面：
1.多个进程之间的相互通信
2.浏览器解析域名并进行导航
3.浏览器发起http网络请求
4.服务器返回Http响应
5.浏览器进行渲染和展示

接下来详细介绍每一部分内容

第二章浏览器进程

在了解浏览器进程之前，我们需要知道现在浏览器是多进程并行处理任务，如果不了解进程和线程之间的关系，不了解什么是并行处理，可以看进程和线程这篇文章，这里不过多说明。
现在我们用谷歌浏览器打开一个界面，我们可以看看当前启动了多少个进程？
在这里插入图片描述
从图中可以看到，我的界面是打开了5个进程，为什么一个页面会有这么多进程？这些进程都有什么作用？现在开始一一说明

2.1 Chrome浏览器最新架构

最新的Chrome浏览器的进程架构如图：
在这里插入图片描述
如图最新的chorme进程架构包括 1个浏览器主进程，1个网络进程，1个GPU进程，多个渲染进程和多个插件进程

2.2 每个进程作用

浏览器主进程：主要负责界面展示，用户交互和子进程管理等

网络进程：负责网络资源的加载，如处理Http请求等

GPU进程：最开始Chrome 是没有 GPU 进程，而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，最后在多进程架构上也引入了 GPU 进程

渲染进程 ：核心任务将HTML，CSS和JS转换成用户可见的页面，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中。另外，一般默认情况，打开一个Tab页会开启一个渲染进程，但是如果从一个页面打开了新页面（必须从一个页面打开），而新页面和当前页面属于同一站点时，那么新页面会复用父页面的渲染进程。如下图所示：
同一站点复用一个渲染进程
其中csdn两个网页就是共用一个渲染进程

"同一站点(same-site)"定义为根域名（例如，csdn.net）加上协议（如https:// 或者http://）都相同，还包含了该根域名下的所有子域名和不同的端口，比如下面：
https://www.csdn.net
https://www.csdn.net:port
都是属于同一站点，因为它们的协议都是https，而根域名也都是csdn.net。
想要详细了解这个，推荐一篇文章Understanding “same-site” and “same-origin”

插件进程：主要负责插件运行，防止插件进程崩溃会对浏览器和页面产生影响

所以现在可以说明开头的问题，为什么一个页面会有多个进程？因为打开一个页面，会启动一个浏览器进程，一个网络进程，一个GPU进程，一个渲染进程，所以至少会有4个进程；如果还有插件，就会再加一个插件进程，为5个进程

2.3 小结

这章节主要介绍谷歌浏览器的几种进程，最新的chorme进程架构包括 1个浏览器主进程，1个网络进程，1个GPU进程，多个渲染进程和多个插件进程，每个进程执行不同任务。当开启一个页面时，至少需要开启四个进程。

另外，如果从一个页面打开了新页面，而新页面和当前页面属于同一站点时，那么新页面会复用父页面的渲染进程

第三章 TCP/IP协议

3.1 计算机网络体系结构分层

在这里插入图片描述
在介绍TCP/IP协议之前先看一下整个计算机网络体系结构，从图中可以看出，整个体系按照不同功能分为不同层，并且这些层并不是只有TCP协议和IP协议，而是包含了不同的协议，这些不同的协议组成了一个很大的协议集合，统称为TCP/IP协议。

3.2 TCP/IP具体含义

我们很多人会认为 TCP/IP 是指 TCP 和 IP 两种协议，实际生活当中有时也确实就是指这两种协议。然而在很多情况下，它只是利用 IP 进行通信时所必须用到的协议群的统称。

具体来说，IP 或 ICMP、TCP 或 UDP、TELNET 或 FTP、以及 HTTP 等都属于 TCP/IP 协议，他们与 TCP 或 IP 的关系紧密，是互联网必不可少的组成部分。

总结来说，TCP/IP 被称为传输控制协议/互联网协议，又称网络通讯协议(Transmission Control Protocol)，它原本就是为使用互联网而开发制定的协议族。因此，互联网的协议就是 TCP/IP，TCP/IP 就是互联网的协议。
在这里插入图片描述
介绍完什么是TCP/IP协议之后，就开始说明如何把一个页面文件完整的送到浏览器里。

3.3 页面文件送达到浏览器的过程

在了解过程之前我们要知道几点基础知识：

3.3.1 基础概念

1.数据包：

包、帧、数据包、段、消息都是用来表达数据的单位，主要区别如下：

包：可以说是全能型术语；
帧：链路层中包的的单位；
数据包：网络层及网络层以上的分层的包的单位；
段：TCP数据流中的信息
消息：应用协议中数据的单位

在网络传输中，如果发送的数据很大，那么该数据就会被拆分为很多小数据包来传输。每个数据包会被标上描述顺序的标识，等到接收方拿到后，可以按照顺序重新组装成完成的数据。

2.首部数据：

每个分层中，都会对所发送的数据附加一个首部，在这个首部中包含了该层必要的信息，如发送的目标地址以及协议相关信息。通常，为协议提供的信息为包首部，所要发送的内容为数据。在下一层的角度看，从上一层收到的包全部都被认为是本层的数据。

因为有了首部数据，所以在网络中传输的数据包由两部分组成：一部分是协议所要用到的首部，另一部分是上一层传过来的数据。在数据包的首部，明确标明了协议应该如何读取数据。反过来说，看到首部，也就能够了解该协议必要的信息以及所要处理的数据

3.协议：

互联网，实际上是一套理念和协议组成的体系架构。其中协议是一套众所周知的规则和标准，如果各方都同意使用，那么它们之间的通信将变得毫无障碍。这就好比买卖双方必须提前沟通好信息：价格是多少，要几斤几两，要哪种货物等。双方都达成共识了之后，交流才会是无障碍的。

3.3.2 IP：数据包送达主机流程

数据包发送之前，首先需要知道数据包要发给谁，这就需要网际协议（Internet Protocol，简称 IP）。互联网上不同的在线设备都有唯一的IP地址，这个IP地址是一个数字，就和我们的居住地址和门牌一样，必须唯一才能精确定位。

接下来看一下数据包如何从主机 A 到主机 B ：
在这里插入图片描述
在上图中，为了方便理解先把网络简单分为三层结构：
从图中可以看出，一个数据包从主机A到主机B的整个流程如下：

上层将数据包传递给网络层
网络层再将IP头附加到数据包上，组成新的 IP 数据包，并交给底层
底层通过物理网络将数据包传输给主机 B
数据包被传输到主机 B 的网络层，在这里进行反向操作，主机 B 拆开数据包的 IP 头信息，并将拆开来的数据部分交给上层
最终需要传输的数据包就到达了主机 B 的上层

IP头：
如果要想把一个数据包从主机 A 发送给主机 B，那么在传输之前，数据包上会被附加上主机 B 的 IP 地址信息，这样在传输过程中才能正确寻址。另外数据包上还会附加上主机 A 本身的 IP 地址，有了这些信息主机 B 才可以回复信息给主机 A。这些附加的信息会被装进一个叫 IP 头的数据结构里。
IP 头是 IP 数据包开头的信息，包含 IP 版本、源 IP 地址、目标 IP地址、生存时间等信息