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

相关推荐
2分钟速写快排19 分钟前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60611 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角2 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!2 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰2 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
Interview Aid1123 小时前
Walmart Global Tech SDE 三轮面经|基础、并发、压力面
面试·职场和发展
mayaairi4 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen4 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马5 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒6 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端