（每日一问）计算机网络：浏览器输入一个地址到跳出网页这个过程中发生了哪些事情？（废话少说版）

（每日一问）计算机网络：浏览器输入一个地址到跳出网页这个过程中发生了哪些事情？（废话少说版）

在现代Web浏览器中，当你输入一个网址并按下回车键后，浏览器开始从服务器获取数据，直到完整呈现网页，这一过程涉及到多个步骤和技术。这也是面试中常问的内容，但现有的关于它的解释，一些博客讲解过于繁琐，没有重点且不便记忆 。为了解决这个问题，我特地原创了一篇简短精炼便于直接背诵的面经。

---

从输入网址到网页显示，浏览器经历了DNS解析、建立TCP连接、发送HTTP请求、接收并渲染页面、以及处理后续资源加载等步骤 。本文尽可能详略得当的介绍了这些步骤的原理，并通过代码示例和图示帮助读者更好地理解浏览器背后的工作机制。

文章目录

• （每日一问）计算机网络：浏览器输入一个地址到跳出网页这个过程中发生了哪些事情？（废话少说版）
• • [一、DNS 解析：从域名到IP地址](#一、DNS 解析：从域名到IP地址)
  • • [1.1 输入网址与域名系统的作用](#1.1 输入网址与域名系统的作用)
    • [1.2 DNS 解析过程](#1.2 DNS 解析过程)
  • [二、建立连接：TCP 三次握手](#二、建立连接：TCP 三次握手)
  • • [2.1 什么是TCP三次握手？](#2.1 什么是TCP三次握手？)
    • [2.2 TCP 三次握手的步骤](#2.2 TCP 三次握手的步骤)
  • [三、发送请求：HTTP/HTTPS 请求的处理](#三、发送请求：HTTP/HTTPS 请求的处理)
  • • [3.1 浏览器发送HTTP/HTTPS请求](#3.1 浏览器发送HTTP/HTTPS请求)
    • [3.2 HTTP请求的内容](#3.2 HTTP请求的内容)
  • 四、服务器处理请求并返回响应
  • • [4.1 服务器如何处理请求？](#4.1 服务器如何处理请求？)
    • [4.2 HTTP响应的内容](#4.2 HTTP响应的内容)
  • 五、浏览器渲染页面：从HTML到最终显示
  • • [5.1 浏览器接收并解析HTML](#5.1 浏览器接收并解析HTML)
    • [5.2 构建渲染树并布局](#5.2 构建渲染树并布局)
    • [5.3 绘制页面并显示](#5.3 绘制页面并显示)
  • 六、持续加载与交互
  • • [6.1 异步加载资源](#6.1 异步加载资源)
    • [6.2 用户交互与新请求](#6.2 用户交互与新请求)
  • [七、 关闭连接](#七、 关闭连接)
  • 八、总结（可以直接跳过看总结）

一、DNS 解析：从域名到IP地址

1.1 输入网址与域名系统的作用

当你在浏览器中输入一个网址（例如www.example.com）并按下回车，首先发生的是DNS（域名系统）解析。DNS的作用是将用户输入的域名转换为服务器的IP地址，这是因为浏览器和服务器之间的通信是通过IP地址进行的。

1.2 DNS 解析过程

• 浏览器检查本地缓存、操作系统缓存，甚至是路由器和 ISP 的缓存中是否已有该域名对应的 IP 地址。
• 如果没有找到，浏览器会向 DNS 服务器（域名系统服务器）发送一个请求，询问www.example.com对应的 IP 地址是什么。
• DNS 服务器返回域名对应的 IP 地址（例如192.0.2.1），该地址唯一标识了你要访问的服务器。

示例代码：通过Java代码演示如何获取域名的IP地址。

import java.net.InetAddress;  // 导入用于IP地址操作的类

public class DNSLookup {
    public static void main(String[] args) {
        try {
            // 获取域名的IP地址
            InetAddress address = InetAddress.getByName("www.example.com");  
            System.out.println("IP Address: " + address.getHostAddress());  // 打印出IP地址
        } catch (Exception e) {
            e.printStackTrace();  // 如果解析失败，则输出错误信息
        }
    }
}

解释 ：这个代码示例展示了如何使用Java获取一个域名的IP地址。InetAddress.getByName("www.example.com") 方法将域名转换为IP地址，模拟了浏览器的DNS解析过程。

二、建立连接：TCP 三次握手

2.1 什么是TCP三次握手？

获得IP地址后，浏览器需要与服务器建立连接，这通常通过TCP协议完成。TCP协议保证了数据传输的可靠性。在正式发送数据之前，浏览器和服务器之间需要通过三次握手来确认彼此的连接。

2.2 TCP 三次握手的步骤

1. 第一次握手：浏览器向服务器发送一个SYN（同步）包，表示请求建立连接。
2. 第二次握手：服务器收到SYN包后，返回一个SYN-ACK包，表示同意建立连接。
3. 第三次握手：浏览器收到SYN-ACK包后，发送一个ACK（确认）包，连接正式建立。

Browser Server SYN (建立连接) SYN-ACK (确认) ACK (建立连接确认) Browser Server

解释：这个图示展示了TCP三次握手的过程，从浏览器发送请求到服务器确认连接建立的过程。

三、发送请求：HTTP/HTTPS 请求的处理

3.1 浏览器发送HTTP/HTTPS请求

连接建立后，浏览器将发送HTTP请求获取网页数据。如果是HTTPS请求，则会在发送请求前通过TLS/SSL进行加密通信，确保数据的安全性。

引申：HTTP 与 HTTPS 的区别

3.2 HTTP请求的内容

HTTP请求包括请求方法（如GET、POST）、请求头、以及可选的请求体。请求头包含了用户代理、可接受的响应类型、cookies等信息。

引申：GET请求和POST请求的区别

示例代码：发送一个简单的HTTP GET请求。

import java.net.HttpURLConnection;  // 导入用于HTTP连接的类
import java.net.URL;  // 导入用于处理URL的类

public class HttpGetRequest {
    public static void main(String[] args) {
        try {
            // 创建URL对象
            URL url = new URL("http://www.example.com");
            // 打开HTTP连接
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();  
            // 设置请求方法为GET
            connection.setRequestMethod("GET");  
            
            // 获取响应码
            int responseCode = connection.getResponseCode();  
            System.out.println("Response Code: " + responseCode);  // 打印响应码
        } catch (Exception e) {
            e.printStackTrace();  // 如果请求失败，则输出错误信息
        }
    }
}

解释：这个代码示例演示了如何通过Java发送一个HTTP GET请求并获取服务器的响应状态码。类似地，浏览器在用户输入网址后，也会向服务器发送类似的请求来获取网页数据。

四、服务器处理请求并返回响应

4.1 服务器如何处理请求？

服务器收到浏览器的请求后，会根据请求的内容执行相应的操作，如访问数据库、调用应用程序、读取文件等。服务器处理完成后，将生成的响应（包括HTML、CSS、JavaScript等资源）发送回浏览器。

4.2 HTTP响应的内容

HTTP响应通常包括状态码（如200表示成功），响应头，以及响应体（实际的数据内容，如HTML文档）。

五、浏览器渲染页面：从HTML到最终显示

接收HTML 解析HTML 构建DOM树 解析CSS 构建CSSOM树 构建渲染树 布局计算 绘制并显示页面

5.1 浏览器接收并解析HTML

浏览器接收到服务器返回的HTML后，开始解析HTML文档，并构建DOM树（Document Object Model）。同时，浏览器会解析并下载HTML文档中引用的CSS样式表、JavaScript文件、图片等资源。

5.2 构建渲染树并布局

浏览器根据DOM树和CSSOM树（CSS对象模型）构建渲染树（Render Tree），然后计算每个元素的布局，确定其在页面中的位置和大小。

5.3 绘制页面并显示

最后，浏览器根据渲染树绘制页面内容，并将其显示在屏幕上。

解释：这幅图展示了浏览器如何从接收HTML开始，经过一系列的解析和计算步骤，最终将网页内容绘制到屏幕上的过程。

六、持续加载与交互

6.1 异步加载资源

在页面显示后，浏览器还可能会继续加载其他资源，如通过JavaScript的异步请求（AJAX，Asynchronous Javascript And XML（异步JavaScript和XML））来动态获取数据并更新页面内容。

6.2 用户交互与新请求

用户可以与网页进行交互，如点击按钮、提交表单等，这些操作可能会触发新的HTTP请求，重新经历之前的流程。

七、 关闭连接

TCP 四次挥手：当浏览器和服务器都确认不会再发送数据时，TCP 连接会通过四次挥手关闭。下面是TCP四次挥手的信令图：
Browser Server FIN (第一次挥手，浏览器发送 FIN 包，表示数据发送完毕，不再发送数据) ACK (第二次挥手，服务器收到 FIN 包后，发送 ACK 包，确认收到) FIN (第三次挥手，服务器发送 FIN 包，表示服务器的数据也发送完毕) ACK (第四次挥手，浏览器收到服务器的 FIN 包后，发送 ACK 包确认，至此连接关闭) Browser Server

解释：

• 第一次挥手：浏览器向服务器发送FIN包，表示数据发送完毕，不再发送数据。
• 第二次挥手：服务器收到FIN包后，向浏览器发送ACK包，表示确认收到。
• 第三次挥手：服务器也发送一个FIN包，表示服务器的数据也发送完毕。
• 第四次挥手：浏览器收到服务器的FIN包后，发送ACK包确认，至此连接关闭。

通过这个信令图，可以直观地看到TCP四次挥手的过程是如何关闭一个TCP连接的。

八、总结（可以直接跳过看总结）

在从浏览器输入网址到最终呈现网页的过程中，涉及到多个关键步骤，概括如下：

1. DNS解析：将用户输入的域名转换为服务器的IP地址，以便浏览器能够找到目标服务器。

2. 建立连接：通过TCP三次握手建立可靠的通信连接，确保数据能够稳定传输。

3. 发送请求：浏览器通过HTTP或HTTPS协议向服务器发送请求，以获取网页所需的资源和数据。

4. 服务器处理并响应：服务器处理请求，生成并返回HTML、CSS、JavaScript等内容，供浏览器渲染。

5. 浏览器渲染页面：浏览器解析并构建DOM树、CSSOM树和渲染树，最终将网页内容绘制到用户的屏幕上。

6. 持续加载与交互：页面渲染完成后，浏览器可能会继续加载其他资源，并响应用户的交互操作。

7. 关闭连接：通过TCP四次挥手，浏览器和服务器之间的连接在数据传输完毕后被关闭。

✨ 我是专业牛，一个渴望成为大牛🏆的985硕士🎓，热衷于分享知识📚，帮助他人解决问题💡，为大家提供科研、竞赛等方面的建议和指导🎯。无论是科研项目🛠️、竞赛🏅，还是图像🖼️、通信📡、计算机💻领域的论文辅导📑，我都以诚信为本🛡️，质量为先！🤝 如果你觉得这篇文章对你有所帮助，别忘了点赞👍、收藏📌和关注🔔哦！你的支持是我继续分享知识的动力🚀！✨ 如果你有任何问题或需要帮助，随时留言📬或私信📲，我都会乐意解答！😊