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

在现代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地址。

java 复制代码

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 三次握手的步骤

第一次握手：浏览器向服务器发送一个SYN（同步）包，表示请求建立连接。
第二次握手：服务器收到SYN包后，返回一个SYN-ACK包，表示同意建立连接。
第三次握手：浏览器收到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请求。

java 复制代码

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连接的。

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

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

DNS解析：将用户输入的域名转换为服务器的IP地址，以便浏览器能够找到目标服务器。
建立连接：通过TCP三次握手建立可靠的通信连接，确保数据能够稳定传输。
发送请求：浏览器通过HTTP或HTTPS协议向服务器发送请求，以获取网页所需的资源和数据。
服务器处理并响应：服务器处理请求，生成并返回HTML、CSS、JavaScript等内容，供浏览器渲染。
浏览器渲染页面：浏览器解析并构建DOM树、CSSOM树和渲染树，最终将网页内容绘制到用户的屏幕上。
持续加载与交互：页面渲染完成后，浏览器可能会继续加载其他资源，并响应用户的交互操作。
关闭连接：通过TCP四次挥手，浏览器和服务器之间的连接在数据传输完毕后被关闭。

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

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