从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连接。这一系列步骤构成了网络请求的全过程,深入了解其中的细节能够帮助我们更好地理解网络运行机制,优化网络性能。

相关推荐
littleplayer18 小时前
SwiftUI 导航
前端
用户924262570073118 小时前
Vue 组件入门学习笔记:局部注册、全局注册与 Props 传值详解
前端
云枫晖18 小时前
Webpack系列-构建性能优化实战:从开发到生产
前端·webpack·性能优化
Patrick_Wilson19 小时前
AI会如何评价一名前端工程师的技术人格
前端·typescript·ai编程
顾安r19 小时前
11.10 脚本算法 五子棋 「重要」
服务器·前端·javascript·游戏·flask
一枚前端小能手19 小时前
「周更第11期」实用JS库推荐:Pinia
前端·javascript·vue.js
kirinlau19 小时前
requst payload和query string parameters
前端·javascript
合作小小程序员小小店19 小时前
web网页开发,在线%就业信息管理%系统,基于idea,html,layui,java,springboot,mysql。
java·前端·spring boot·后端·intellij-idea
刘一说19 小时前
在 Web 地图上可视化遥感数据:以芜湖市为例
前端·遥感
huangql52019 小时前
Vite与Webpack完全指南:从零开始理解前端构建工具
前端·webpack·node.js