从浏览器输入网址到页面显示, 经历了什么?

忘是亡心i 2023-10-10 17:19 55阅读 0赞

当我们在浏览器中输入网址并按下回车键，从输入网址到页面显示这个过程包含了多个步骤。下面我将简要概述这个过程的关键步骤：

1.  用户输入URL（Uniform Resource Locator）：用户在浏览器的地址栏输入网址，例如：[https://www.example.com。][https_www.example.com]
2.  DNS解析：浏览器将解析输入的URL，首先检查其是否符合有效URL的规范。接下来，浏览器会通过DNS（Domain Name System）将域名解析为对应的IP地址。DNS解析过程可能涉及本地缓存、本地域名服务器、根域名服务器、顶级域名服务器和权威域名服务器。
3.  建立TCP连接：在获取到目标服务器的IP地址后，浏览器会向该服务器发送一个TCP连接请求。这个过程通常包括“三次握手”。
4.  发送HTTP请求：TCP连接建立后，浏览器会通过这个连接向服务器发送一个HTTP（Hypertext Transfer Protocol）请求。请求中包含了请求方法（例如：GET或POST）、请求的资源路径、HTTP版本、请求头（包含浏览器信息、语言、编码等信息）等。
5.  服务器处理请求：服务器接收到浏览器的请求后，会根据请求的资源路径查找对应的资源，并进行相关处理（例如执行服务器脚本、查询数据库等）。
6.  服务器响应：服务器处理完请求后，会生成一个HTTP响应，包含HTTP响应状态码（例如200表示成功），响应头（包含响应内容类型、编码等信息）和响应体（请求的资源内容，如HTML文档）。
7.  浏览器接收响应：浏览器收到服务器的响应后，会根据响应头信息解析响应体中的内容。如果响应内容是HTML文档，浏览器会进行下一步的解析和渲染。
8.  解析HTML：浏览器会对HTML文档进行解析，构建DOM（Document Object Model）树。在这个过程中，浏览器可能会遇到外部资源引用（如CSS、JavaScript、图片等），它会发起额外的HTTP请求来获取这些资源。
9.  渲染页面：浏览器根据DOM树和CSS样式计算出每个元素的布局位置和样式，然后进行页面渲染。同时，JavaScript代码可能会在这个过程中执行，进一步修改DOM树或CSS样式，改变页面的内容和表现。
10. 页面显示：在完成以上步骤后，浏览器将渲染好的页面展示给用户。

整个过程涉及很多细节，这里只是简要概括了关键步骤。

### 从浏览器输入网址到页面显示的深入解析 ###

当我们在浏览器输入网址，按下回车，神秘的网络世界就开始了一场惊心动魄的冒险。本文将以轻松幽默的语气，通过具体示例深入讲解从浏览器输入网址到页面显示的每一个关键步骤。

#### 1. 用户输入URL ####

就像我们打开宝藏地图，输入网址（URL）就是我们输入目的地。假设我们想去`https://www.example.com`这个宝藏岛屿。浏览器就是我们的冒险船，带着我们去征服未知的网络海洋。

#### 2. DNS解析 ####

输入完网址后，浏览器需要知道目标服务器的IP地址。这就像是要找到宝藏岛屿在地图上的具体位置。而DNS就是神秘的导航仪，帮助我们把网址转换成IP地址。

首先，浏览器会查找本地缓存，看看是否已经有这个网址对应的IP地址。如果有，就像老司机一样直接带着我们去目的地。如果没有，浏览器就会向本地DNS服务器发送查询请求。

本地DNS服务器就像一个知识渊博的地理老师，告诉我们目的地的位置。如果它知道IP地址，就直接告诉浏览器。如果不知道，它会帮我们问问别的老师，比如根域名服务器、顶级域名服务器和权威域名服务器。

通过这个过程，我们最终会找到宝藏岛屿的位置，也就是目标服务器的IP地址。

#### 3. 建立TCP连接 ####

有了IP地址，我们需要和目标服务器建立连接。这就像是我们要和宝藏岛屿上的当地人打好招呼，建立友好关系。浏览器和服务器之间使用TCP协议进行通信，因此需要进行“三次握手”。

1.  第一次握手：浏览器向服务器发送一个“SYN”信号，就像是向宝藏岛屿的当地人挥手示意。
2.  第二次握手：服务器收到“SYN”信号后，回复一个“SYN-ACK”信号，表示愿意和我们建立联系。
3.  第三次握手：浏览器收到“SYN-ACK”信号后，再发送一个“ACK”信号，表示我们也愿意和服务器建立联系。

经过三次握手，TCP连接就建立好了。就好像我们和宝藏岛屿的当地人握手问好，建立了信任关系。

#### 4. 发送HTTP请求 ####

TCP连接建立后，浏览器就可以向服务器发送HTTP请求了。这就像我们向宝藏岛屿的当地人询问宝藏的具体位置。HTTP请求包括请求方法（如GET或POST）、请求的资源路径、HTTP版本和请求头等信息。

以GET方法为例，浏览器会向服务器发送如下请求：

GET / HTTP/1.1  
    Host: www.example.com  
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)  
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
    Accept-Language: en-US,en;q=0.5  
    Accept-Encoding: gzip, deflate, br  
    Connection: keep-alive

这个请求就像我们向当地人提问：“请问这个宝藏岛的宝藏在哪里？”

#### 5. 服务器处理请求 ####

服务器收到浏览器的请求后，会进行相应的处理。这就像宝藏岛屿的当地人根据我们的问题去寻找宝藏。服务器会根据请求的资源路径找到对应的文件，同时可能还需要执行服务器脚本或查询数据库等操作。

#### 6. 服务器响应 ####

服务器找到宝藏后，会生成一个HTTP响应。响应包括HTTP响应状态码（如200表示成功）、响应头和响应体。响应头包含响应内容类型、编码等信息；响应体则包含请求的资源内容，如HTML文档。

响应就像宝藏岛屿的当地人告诉我们宝藏的具体位置：“宝藏就在这个山洞里，你可以去看看。”

#### 7. 浏览器接收响应 ####

浏览器收到服务器的响应后，会根据响应头信息解析响应体中的内容。这就像我们根据当地人的指示，找到了山洞。如果响应内容是HTML文档，浏览器会进行下一步的解析和渲染。

#### 8. 解析HTML ####

浏览器会对HTML文档进行解析，构建DOM树。这就像我们打开山洞，发现里面有一张宝藏图。DOM树就是这张宝藏图，记录了网页的结构和内容。

在解析过程中，浏览器可能会遇到外部资源引用（如CSS、JavaScript、图片等）。这就像宝藏图上标注了其他宝藏的位置。浏览器会发起额外的HTTP请求来获取这些资源。

#### 9. 渲染页面 ####