从输入URL到网页显示的详细过程:解析域名、建立连接、发送请求、接收响应、渲染页面

最新推荐文章于 2025-02-25 20:13:42 发布

阿珊和她的猫

最新推荐文章于 2025-02-25 20:13:42 发布

阅读量940

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/weixin_42554191/article/details/144597221

版权

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

一、域名解析

浏览器缓存检查
- 当在浏览器地址栏输入URL后，浏览器首先会检查自己的缓存。浏览器会维护一个域名 - IP地址的缓存列表，用于快速查找之前访问过的网站的IP地址。如果缓存中存在对应的记录，就直接使用这个IP地址，跳过域名解析的后续步骤，这可以大大提高访问速度。
- 例如，如果之前访问过example.com，并且缓存中还保留着它的IP地址，浏览器就会直接使用这个IP地址进行后续的连接。
操作系统缓存检查
- 如果浏览器缓存中没有找到对应的IP地址，浏览器会向操作系统查询。操作系统也有自己的DNS缓存（域名系统缓存），它存储了之前解析过的域名和IP地址的映射关系。如果操作系统缓存中有该域名的IP地址，就会将其返回给浏览器。
本地DNS服务器查询
- 如果浏览器和操作系统缓存中都没有找到IP地址，浏览器会向本地DNS服务器发送请求。本地DNS服务器通常由网络服务提供商（ISP）提供，它会首先检查自己的缓存。如果本地DNS服务器的缓存中有该域名的IP地址，就会将其返回给浏览器。
- 例如，用户使用的是某电信运营商的网络，电信的本地DNS服务器会查找它所存储的域名 - IP映射关系。
递归查询或迭代查询（如果本地DNS服务器没有缓存）
- 递归查询：本地DNS服务器可以代替浏览器进行递归查询。它会向根DNS服务器发送请求，根DNS服务器会返回负责该域名顶级域（如.com、.org等）的DNS服务器的地址。然后，本地DNS服务器会向这个顶级域DNS服务器发送请求，顶级域DNS服务器又会返回负责该域名二级域（如example.com中的example）的DNS服务器的地址。如此层层递进，直到找到该域名对应的IP地址。
- 迭代查询：另一种方式是迭代查询。本地DNS服务器会向根DNS服务器询问关于该域名的信息，根DNS服务器返回顶级域DNS服务器的地址后，本地DNS服务器需要自己向顶级域DNS服务器发送请求。每次收到返回的信息后，它都要继续向其他相关的DNS服务器发送请求，直到找到IP地址。

二、建立连接

TCP连接建立（三次握手）
- 浏览器获取到目标网站的IP地址后，会使用传输控制协议（TCP）与服务器建立连接。这个过程称为三次握手。
- 首先，浏览器向服务器发送一个带有SYN（同步序列号）标志的TCP数据包，这个数据包中的序列号是一个随机生成的初始序列号。服务器收到这个数据包后，会发送一个带有SYN和ACK（确认）标志的数据包，其中的SYN标志用于同步服务器的序列号，ACK标志用于确认收到浏览器发送的数据包，并且这个数据包中的确认号是浏览器发送的序列号加1。最后，浏览器收到服务器的数据包后，会发送一个带有ACK标志的数据包，确认号是服务器发送的序列号加1。这样，TCP连接就建立起来了。
- 例如，浏览器发送的SYN数据包序列号为100，服务器收到后，发送的SYN/ACK数据包的序列号为200，确认号为101。浏览器发送的最后一个ACK数据包的确认号为201。
SSL/TLS握手（如果是HTTPS协议）
- 如果访问的是HTTPS协议的网站，在TCP连接建立后，还需要进行SSL/TLS握手来建立安全连接。
- 浏览器会向服务器发送一个ClientHello消息，其中包含浏览器支持的SSL/TLS版本、加密算法列表、随机数等信息。服务器收到后，会选择一个合适的加密算法和SSL/TLS版本，发送一个ServerHello消息给浏览器，同时发送自己的证书（包含公钥）。浏览器会验证服务器的证书，通过后会生成一个随机的对称密钥，用服务器的公钥进行加密，发送给服务器。服务器使用自己的私钥解密，得到对称密钥。这样，双方就可以使用对称密钥进行加密通信了。

三、发送请求

构建HTTP请求
- 连接建立后，浏览器会构建一个HTTP请求。HTTP请求由请求行、请求头和请求体组成。
- 请求行包含请求方法（如GET、POST等）、请求的URL路径和HTTP协议版本。例如，GET /index.html HTTP/1.1。请求头包含了许多关于请求的信息，如用户代理（User - Agent，用于标识浏览器的类型和版本）、接受的内容类型（Accept）、语言（Accept - Language）等。请求体通常在POST等请求方法中使用，用于发送数据，如表单数据。
发送请求到服务器
- 浏览器将构建好的HTTP请求通过已经建立的TCP连接发送给服务器。服务器会根据请求的内容进行相应的处理。

四、服务器处理请求

服务器接收请求
- 服务器的网络接口会接收到浏览器发送的HTTP请求，然后将请求传递给服务器的Web服务器软件（如Apache、Nginx等）。
服务器软件处理请求
- Web服务器软件会根据请求的URL路径，将请求转发给相应的应用程序（如PHP、Python Flask等）进行处理。如果请求的是静态文件（如HTML文件、图片、CSS文件等），Web服务器软件可以直接从磁盘中读取文件内容并返回。如果请求的是动态内容，应用程序会执行相应的代码来生成内容。
- 例如，如果请求的是一个PHP页面，服务器会启动PHP解释器来执行页面中的PHP代码，生成最终的HTML内容。
服务器生成响应
- 服务器处理完请求后，会生成一个HTTP响应。HTTP响应也由响应行、响应头和响应体组成。响应行包含HTTP协议版本、响应状态码（如200表示成功、404表示未找到等）。响应头包含了关于响应的信息，如内容类型（Content - Type）、内容长度（Content - Length）等。响应体则是实际返回给浏览器的内容，如HTML页面、JSON数据等。

五、浏览器接收并渲染响应

浏览器接收响应
- 浏览器通过已经建立的TCP连接接收服务器发送的HTTP响应。首先接收响应行和响应头，根据响应头中的信息，浏览器可以知道响应的类型（如HTML、CSS、JavaScript等）、内容长度等。
解析响应头和状态码
- 浏览器会检查响应状态码。如果状态码是200，表示请求成功，浏览器会继续处理响应体。如果是404，表示请求的资源未找到，浏览器可能会显示一个错误页面。如果是301或302，表示资源被永久或临时重定向，浏览器会根据响应头中的重定向地址，重新发送请求。
渲染页面
- HTML解析：如果响应体是HTML内容，浏览器会开始解析HTML。浏览器会构建一个DOM（文档对象模型）树，将HTML标签解析为DOM节点，按照HTML的层次结构构建树状结构。例如，<html>标签是根节点，<body>标签是<html>节点的子节点。
- CSS解析和应用：在解析HTML的同时，浏览器会加载和解析CSS文件（如果有）。浏览器会根据CSS选择器，将样式规则应用到DOM树中的相应节点上，确定每个节点的布局和外观。
- JavaScript执行：如果HTML中包含JavaScript代码，浏览器会执行这些代码。JavaScript可以操作DOM树，修改页面的内容、样式和行为。例如，通过document.getElementById获取DOM节点，然后修改其innerHTML属性来改变内容。
- 构建渲染树和布局计算：浏览器会根据DOM树和CSS规则构建渲染树，渲染树只包含需要显示的节点（排除了如<script>标签等不需要显示的节点）。然后，浏览器会进行布局计算，确定每个节点在页面中的位置和大小。
- 绘制页面：最后，浏览器会根据渲染树和布局信息，将页面的内容绘制到屏幕上，完成网页的显示。