从浏览器输入URL到展示页面的全流程

本文详细阐述了从本地终端访问网站的全过程,包括浏览器缓存检查、DNS解析、TCP/IP协议栈工作原理,以及数据的封装与解包过程。同时,还深入探讨了一次页面请求可能涉及的多个TCP连接及浏览器缓存机制。

从本地终端(如手机、电脑)访问一个网站,怎么处理请求并且加载出数据的。实际上考察的是计算机网络TCP/IP协议栈。
主要的得分项为TCP协议各层的描述、数据传送的封装和解包、一次页面包含多个TCP连接,另外还有一个加分项,能不能考虑到浏览器缓存的情况。
1、输入URL,浏览器读取缓存,判断请求是否被缓存,如果是,直接加载数据;不是的话,进行下列请求。
2、访问应用层,通过DNS协议进行域名解析,找到对应服务器的IP地址,进行请求。
3、访问TCP层,在请求数据前加上TCP协议头,通过可靠传输协议,向IP层传递。
3、IP层,通过路由选址等操作,找出通往对应服务器接口的路由方案,并且对TCP数据进一步封装,在前面加上IP协议头
4、通过数据链路层访问到服务器的链路层接口
5、服务器按照链路层、IP层、TCP层、应用层的顺序进行请求传递,并逐层去除协议头。
6、请求到的数据原路返回,展现到页面上。
7、一次请求会建立多个TCP请求,比如每一个图片或CSS等资源都会建立一个TCP请求,请求结束会断开连接。
在这里插入图片描述

在用户输入 URL页面加载完成的整个过程中,涉及多个层次的技术细节,包括网络通信、浏览器解析与渲染、资源加载等多个阶段。以下是整个流程的详细解析: ### 1. 用户输入 URL 用户在浏览器地址栏输入一个 URL(例如 `https://www.example.com`),浏览器会首先解析该 URL,提取出协议(如 HTTPS)、主机名(如 `www.example.com`)、路径(如 `/index.html`)等信息。 ### 2. DNS 解析 浏览器需要将域名解析为对应的 IP 地址。此过程通常包括以下步骤: - **本地 DNS 缓存查询**:浏览器首先检查自身的 DNS 缓存,看是否已经缓存了该域名的 IP 地址。 - **操作系统 DNS 缓存查询**:如果浏览器缓存中没有,则查询操作系统级别的 DNS 缓存。 - **向 DNS 服务器发起请求**:如果缓存中没有,则操作系统会向配置的 DNS 服务器发起查询请求,获取目标服务器的 IP 地址[^1]。 ### 3. 建立 TCP 连接 在获得服务器 IP 地址后,浏览器会通过 TCP 协议与服务器建立连接。通常使用 **三次握手** 机制完成连接建立: 1. 客户端发送 SYN 报文。 2. 服务器回应 SYN-ACK。 3. 客户端发送 ACK 确认。 若使用 HTTPS 协议,还需在此基础上进行 TLS 握手,协商加密密钥[^1]。 ### 4. 发送 HTTP 请求 建立连接后,浏览器发送 HTTP 请求报文。请求报文通常包含请求方法(如 GET)、请求路径、HTTP 协议版本、请求头(Headers)等信息。例如: ```http GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html,application/xhtml+xml Accept-Encoding: gzip, deflate Connection: keep-alive ``` ### 5. 服务器处理请求并返回响应 服务器接收到请求后,根据请求内容生成响应。响应报文包括状态码(如 200 表示成功)、响应头(Headers)和响应体(Body)。例如: ```http HTTP/1.1 200 OK Content-Type: text/html Content-Length: 1234 Date: Mon, 01 Jan 2024 00:00:00 GMT <!DOCTYPE html> <html> <head>...</head> <body>...</body> </html> ``` ### 6. 浏览器解析与渲染 浏览器接收到响应后,开始解析 HTML 文档,并逐步构建 DOM 树和 CSSOM 树,最终生成渲染树。在此过程中: - **HTML 解析器** 会解析 HTML 标签,并构建 DOM 树。 - **CSS 解析器** 会解析样式表,构建 CSSOM 树。 - **JavaScript 执行** 可能会修改 DOM 和 CSSOM,影响渲染流程。 - **渲染引擎** 会根据渲染树计算布局(Layout),绘制页面内容(Paint),并最终将页面呈现在用户面前[^2]。 ### 7. 加载其他资源 HTML 文档中通常包含对其他资源的引用,如图片、CSS、JavaScript 文件等。浏览器会根据这些引用再次发起 HTTP 请求,加载这些资源,并重复解析、渲染流程,直到所有资源加载完成。 ### 8. 断开 TCP 连接 当所有数据交换完成后,浏览器与服务器之间的 TCP 连接可以通过 **四次挥手** 断开连接: 1. 客户端发送 FIN 报文。 2. 服务器回应 ACK。 3. 服务器发送 FIN 报文。 4. 客户端回应 ACK。 若使用 HTTP/1.1 的 `keep-alive` 机制,连接可能保持一段时间以复用[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值