从URL输入到网页呈现:深入探究网络请求的全过程

前言

在当今数字化时代,我们每天都在与互联网打交道,浏览网页已成为日常生活的一部分。然而,我们往往忽视了背后复杂的网络请求过程。今天我将带领读者深入探究从输入URL到网页呈现的全过程,涵盖URL解析、缓存查找、域名解析、TCP握手、HTTP请求、服务器处理、浏览器渲染以及TCP挥手等关键步骤。

1.URL解析

URL(统一资源定位符)是指定了资源在网络上的位置以及访问该资源所用的协议的字符串

当我们在浏览器中输入URL时,首先浏览器会对URL进行解析。浏览器会解析URL中的协议、域名、路径等信息,以便进行后续的请求。

URL⼀般包括⼏⼤部分: protocol,协议头,例如有http,ftp等 host,主机域名或IP地址 port,端口号 path,⽬录路径 query,即查询参数 fragment,即 #后的hash值,⼀般⽤来定位到某个位置

2.查找缓存

在发起网络请求之前,浏览器会检查本地缓存中是否已经存在所请求的资源的副本。如果资源已经存在并且未过期,浏览器将直接从缓存中加载资源,从而加快页面加载速度。

3.域名解析

如果缓存中没有所请求资源的副本,浏览器将进行域名解析,将域名解析为对应的IP地址。域名解析过程包括多个步骤,浏览器会依次查找浏览器缓存系统缓存本地hosts文件,并根据域名的层级结构从根域名到顶级域名再到二级域名、三级域名逐级进行解析,最终获取到目标服务器的IP地址。

4.TCP三次握手

获取到目标服务器的IP地址后,浏览器将通过TCP协议与服务器建立连接。TCP连接的建立采用三次握手的方式,即客户端向服务器发送SYN请求,服务器回应ACK确认,并发送自己的SYN请求,客户端再次发送ACK确认,完成连接的建立。

5.发送HTTP请求

建⽴TCP连接后,在这基础上进⾏通信,浏览器发送http请求到⽬标服务器,请求的内容包括请求⾏,请求头请求体。当服务器接收到浏览器的请求之后,就会进⾏逻辑操作,处理完之后返回⼀个HTTP响应消息,包括响应⾏响应头响应体

6.服务器处理请求并返回报文

服务器接收到HTTP请求后,将根据请求的内容进行处理,并生成相应的HTTP响应。服务器处理请求的过程包括资源定位、权限验证、业务处理等,处理完成后将生成HTTP响应报文发送给客户端。

7.浏览器解析渲染页面

浏览器接收到服务器返回的HTTP响应后,将解析响应报文中的HTML、CSS、JavaScript等资源,并根据这些资源构建DOM树、CSSOM树和JavaScript执行环境,最终将页面渲染到用户的屏幕上。

8.TCP四次挥手,关闭TCP连接

页面呈现完成后,浏览器与服务器之间的TCP连接并不会立即关闭,而是需要经过四次挥手的过程。客户端发送FIN请求表示关闭连接,服务器回应ACK确认,并发送自己的FIN请求,客户端再次发送ACK确认,完成连接的关闭。

结语

从输入URL到网页呈现,涉及诸多关键步骤,包括URL解析、缓存查找、域名解析、TCP握手、HTTP请求、服务器处理、浏览器渲染以及TCP挥手等。首先,浏览器解析URL,然后查找缓存,若无缓存则进行域名解析并建立TCP连接。随后,浏览器发送HTTP请求,服务器处理请求并返回报文。最后,浏览器解析渲染页面并关闭TCP连接。这一系列步骤构成了网络请求的全过程,深入了解其中的细节能够帮助我们更好地理解网络运行机制,优化网络性能。

相关推荐
我命由我1234520 小时前
微信小程序开发 - 为 tap 事件的处理函数传递数据
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
百万蹄蹄向前冲1 天前
Trae Genimi3跟着官网学实时通信 Socket.io框架
前端·后端·websocket
狂炫冰美式1 天前
TRAE SOLO 驱动:重构AI模拟面试产品的复盘
前端·后端·面试
1024肥宅1 天前
JavaScript 拷贝全解析:从浅拷贝到深拷贝的完整指南
前端·javascript·ecmascript 6
欧阳天风1 天前
js实现鼠标横向滚动
开发语言·前端·javascript
局i1 天前
Vue 指令详解:v-for、v-if、v-show 与 {{}} 的妙用
前端·javascript·vue.js
码界奇点1 天前
Java Web学习 第15篇jQuery从入门到精通的万字深度解析
java·前端·学习·jquery
小鑫同学1 天前
Alias Assistant:新一代 macOS Shell 别名管理解决方案
前端·前端工程化
꒰ঌ小武໒꒱1 天前
RuoYi-Vue 前端环境搭建与部署完整教程
前端·javascript·vue.js·nginx
名字越长技术越强1 天前
前端之相对路径
前端