前端经典面试题：在浏览器从输入 URL 到页面加载显示完成的过程？从输入URL到页面加载发生了什么？

总体来说分为以下几个过程:

DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

正文之前：（可以跳过）

在讨论点击URL后会发生什么之前，我们必须了解URL实际上是什么，以及URL的不同部分意味着什么 - 对吧？在不浪费任何时间的情况下，让我们进一步了解URL。

URL – 统一资源定位器

如果你看看它的完整形式，那么它是不言自明的：它具有我们想要访问的资源的位置。它是我们想要与之交互或查找信息的地方的地址。

让我们来看看你的日常生活。如果您想去朋友家做一些工作或获取信息，则需要他们的地址。在这个大型网络世界中，同样的事情也是如此：我们必须提供我们想要访问的网站的地址。网站就像房子，URL是地址。

网址剖析

现在，我们知道URL是什么，但我们仍然不知道URL的各个部分。我们走吧！

让我们举个例子：

https://blog.csdn.net/qq_22182989

在这里，第一部分是“https”。这基本上告诉浏览器它应该使用哪种协议。它可以是http，https，ftp等。协议是浏览器用于通过网络进行通信的一组规则。“https”基本上是一个安全版本，即信息以安全的方式交换。

blog.csdn.net的第二部分是域名。你可以把它和你朋友的房子联系起来。它是网站的地址。我们用它来访问负责为该网站提供信息的服务器（训练有素的计算机）。等！你可能会想，在我提到URL是地址之前的几秒钟，而我也提到域名也是地址。您可能感到困惑。不要感到困惑！

网址和域名之间的区别

两者之间的主要区别在于URL是一个完整的地址。URL告诉信息应该交换的方法，到达该网站后的路径。而域名是URL的一部分。

让我们以前面的示例来更好地理解。你可以说你朋友的房子地址是一个域名，而URL不仅告诉朋友的房子地址（域名），而且还告诉你将如何沟通，比如在单独的房间（安全）或当着每个人面前说话（信息可能会泄露）。它还告诉路径，即进入房屋后您将前往房屋的哪个部分。因此，域名是URL的一部分。包含更多信息的域名是 URL。

我希望现在你对URL很清楚。让我们进入下一部分。

域名

在上一部分中，我解释了域名，但没有深入。我希望你更多地进入它。正如我告诉您的，域名是网站的地址。它在如此庞大的网络世界中为您的网站提供了独特的身份。没有两个域名可以相同但是 - 是的！有“但是”。这不是域名的唯一定义。这背后还有另一个故事。让我们进入这个故事。

众所周知，当我们点击任何URL或者您可以说域名时，该网站就会打开其内容。服务器（训练有素的计算机）为它提供服务。我们还知道，每台计算机都有一个IP地址，用于通过互联网进行通信。它是一个地址，作为其自我解释的“IP地址”。当我们点击任何URL时，我们实际上是在点击负责提供网站内容（托管）的计算机的IP地址。

但是，现在，你可能会想到底是什么...一切都是地址吗？如果IP地址存在，为什么存在此域名？为什么我们不能使用IP地址来获取网站的内容？

是的！您可以使用IP地址来获取网站的内容，但实际上!..您是否能够记住每个网站的关联IP地址？显然不是！很难记住每个网站的IP地址。这就是域名进入市场的原因。

您可以将其与您的联系人列表相关联。你不记得每个人的号码，但你可以记住他们的名字。同样的概念也适用于这里。您不记得那些可怕的IP地址，但您可以轻松记住域名。

如此大量的数据保存在数据库中，其中存储了域名及其IP地址。存储域名及其相应IP地址的系统称为DNS（域名系统）（我相信您一定听说过它）。

我想我已经讨论了足够多的基础知识。现在，深入了解我们何时点击任何URL的过程。

进入正文：

具体过程：

1、DNS解析：查找以查找 IP 地址

点击URL后，需要发生的第一件事是解析与域名关联的IP地址。DNS 有助于解决此问题。DNS就像一个电话簿，可以帮助我们提供与域名关联的IP地址，就像我们的电话簿给出与该人的姓名相关联的手机号码一样。

这是概述，但此域名查询通过四个层。让我们了解一下步骤：

1.点击URL后，检查浏览器缓存。由于浏览器会为您之前访问过的网站保留其DNS记录一段时间。因此，首先，DNS查询在此处运行以查找与域名关联的IP地址。

2. DNS 查询在操作系统缓存中运行的第二个位置，其次是路由器缓存。

3.如果在上述步骤中，DNS查询未得到解析，则需要解析器服务器的帮助。解析器服务器只不过是您的 ISP（互联网服务提供商）。查询将发送到 ISP，其中 DNS 查询在 ISP 缓存中运行。

4. 如果在第 3 步中也未找到任何结果，则请求将发送到 DNS 层次结构的顶部或根服务器。在那里，它永远不会说没有找到任何结果，但实际上它告诉了你可以从哪里获得这些信息。如果您正在搜索顶级域（.com,.net,.Gov,. org）。它告诉解析器服务器搜索TLD服务器（顶级域）。

5.现在，解析器要求TLD服务器提供我们域名的IP地址。TLD存储域名的地址信息。它告诉解析程序要求它到权威名称服务器。

6.权威域名服务器负责了解有关域名的所有信息。最后，解析器（ISP）获取与域名关联的IP地址并将其发送回浏览器。

获取IP地址后，解析程序将其存储在其缓存中，以便下次如果出现相同的查询，则不必再次执行所有这些步骤。它现在可以从其缓存中提供IP地址。

这完全是关于解析与域名关联的 IP 地址所遵循的步骤。请看下面以更好地了解：

2、TCP连接：通过浏览器启动与服务器的 TCP 连接

找到计算机的IP地址（您的网站信息所在的位置）后，它将启动与计算机的连接。要通过网络进行通信，请遵循互联网协议。TCP/IP 是最常见的协议。使用称为“TCP 3 路握手”的过程在两者之间建立连接。让我们简要了解一下该过程：

1. 客户端计算机发送 SYN 消息装置，无论第二台计算机是否为新连接打开。

2.然后另一台计算机，如果打开新连接，它也发送带有SYN消息的确认消息。

3. 在此之后，第一台计算机通过发送 ACK 消息接收其消息并进行确认。

为了更好地理解，请看下图。

3、浏览器向 We 服务器发送 HTTP 请求：通信开始（请求响应过程）

浏览器向服务器发送 GET 请求，请求 baidu.com 网页。它还将发送浏览器对此域的 Cookie。Cookies旨在让网站记住有状态信息（购物车中的商品或亚马逊等网站的愿望清单中的商品）或记录用户的浏览历史记录等。它还具有其他信息，例如请求标头字段（User-Agent），允许客户端将有关请求以及客户端本身的信息传递给服务器。其他标头字段（如“接受语言”标头）告诉服务器客户端能够理解哪种语言。所有这些标头字段一起添加以形成 HTTP 请求。

HTTP 请求的示例：现在，让我们将它们放在一起以形成一个HTTP请求。下面的HTTP请求将从运行.html web服务器获取abc baidu.com

GET /abc.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.baidu.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive

4、服务器处理传入的请求并返回HTTP响应报文

服务器处理 HTTP 请求并发送响应。第一行称为状态行。状态行由协议版本（例如HTTP / 1.1）后跟数字状态代码（例如200）及其关联的文本短语（例如OK）组成。状态代码很重要，因为它包含响应的状态。

1xx：信息： 这意味着已收到请求，并且该过程仍在继续。
2xx：成功： 这意味着操作成功。
3xx：重定向： 这意味着必须采取进一步行动才能完成请求。它可能会将客户端重定向到其他 URL。
4xx：客户端错误： 这意味着客户端部分的某种错误。
5xx：服务器错误： 这意味着服务器端存在一些错误。

它还包含响应标头字段，如服务器，位置等。这些标头字段提供有关服务器的信息。内容长度标头是一个数字，表示 HTTP 正文的确切字节长度。所有这些标头以及一些附加信息都会被添加以形成 HTTP 响应。

HTTP 响应的示例：现在，让我们将它们放在一起，形成一个HTTP响应，用于从 afteracademy.com 上运行的Web服务器获取abc.htm页面的请求。

HTTP/1.1 200 OK
Date: Tue, 28 Jan 2020 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2019 19:15:56 GMT
Content-Length: 88
Content-Type: text/html
Connection: Closed

5、浏览器解析渲染页面

现在，浏览器获取响应，HTML 网页分阶段呈现。首先，它获取HTML结构，然后发送多个GET请求以获取嵌入式链接，图像，CSS，javascript文件等。将呈现网页，在这种情况下，将显示学后网页。

连接结束

就是这样！当我们点击任何URL时，上述所有过程都会发生。尽管这个漫长的过程只需不到几秒钟即可完成。

资料：

https://segmentfault.com/a/1190000006879700https://segmentfault.com/a/1190000006879700