深入剖析 Web HTTP 请求:从浏览器到服务器的完整流程

目录

背景

[1. 用户输入 URL ------ 浏览器发起请求](#1. 用户输入 URL —— 浏览器发起请求)

[步骤:DNS 解析](#步骤:DNS 解析)

[步骤:建立 TCP 连接(TCP 三次握手)](#步骤:建立 TCP 连接(TCP 三次握手))

[2. 构建 HTTP 请求报文](#2. 构建 HTTP 请求报文)

[3. 服务器接收请求与中间层路由](#3. 服务器接收请求与中间层路由)

步骤:反向代理与负载均衡

步骤:应用层处理

[4. 生成 HTTP 响应报文](#4. 生成 HTTP 响应报文)

[5. 响应返回给浏览器客户端](#5. 响应返回给浏览器客户端)

[6. 浏览器显示结果](#6. 浏览器显示结果)

总结


背景

当你在浏览器中输入一个 URL 并按下回车时,从客户端发送请求到服务器响应再返回浏览器,这一过程涉及多个环节。本文将深入解析从浏览器客户端发出 HTTP 请求,到服务器处理请求、经过中间层路由,最后响应到浏览器的整个流程。

1. 用户输入 URL ------ 浏览器发起请求

首先,用户在浏览器地址栏输入一个 URL,比如 https://www.example.com。浏览器的任务是解析这个 URL,并通过 HTTP 协议向服务器发送请求。URL 的结构大致可以分为以下几个部分:

  • 协议(https://):指定使用的协议,常见的有 HTTP 和 HTTPS。
  • 域名(www.example.com:用来标识服务器位置,通常需要通过 DNS 查找解析为一个 IP 地址。
  • 路径(/path/to/resource):指定服务器上的资源位置。
  • 查询参数(key=value):用于传递额外的信息。
步骤:DNS 解析

在浏览器能够向服务器发送请求之前,它需要将域名(如 www.example.com)转换为服务器的 IP 地址。这个过程叫做 DNS 解析。浏览器会向本地 DNS 服务器发送查询请求,获取目标服务器的 IP 地址。

步骤:建立 TCP 连接(TCP 三次握手)

获取到目标服务器的 IP 地址后,浏览器会通过 TCP/IP 协议 与服务器建立连接。在 HTTPS 中,除了 TCP 连接之外,还会进行 SSL/TLS 握手,以确保通信的加密与安全性。

2. 构建 HTTP 请求报文

一旦 TCP 连接建立成功,浏览器就开始构建 HTTP 请求报文。一个典型的 HTTP 请求包括:

  • 请求行:包含请求方法(如 GET、POST 等)、请求的 URL 路径、协议版本(如 HTTP/1.1)等。
  • 请求头部:包含用户代理(浏览器类型)、接受的内容类型、Cookies 等信息。
  • 请求体(可选):在 POST 请求中,客户端向服务器发送的实际数据,通常是表单数据或 JSON 格式的请求体。

例如,浏览器向服务器发送的 GET 请求可能如下所示

GET /path/to/resource HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
3. 服务器接收请求与中间层路由

当 HTTP 请求到达目标服务器时,服务器首先通过负载均衡器进行流量分配,确保请求能够被正确路由到后端的 Web 服务器或应用服务器。如果有中间层(如反向代理、API 网关等),它会根据请求的路径、参数等信息将请求转发到正确的处理程序。

步骤:反向代理与负载均衡

许多大型应用部署了反向代理(如 Nginx、HAProxy 等)和负载均衡策略,目的是提高系统的性能和可扩展性。反向代理服务器会根据请求的不同特征(如路径、头信息等)将请求分发到不同的应用服务器实例。

例如,www.example.com/api/ 可能被路由到 API 服务,而 www.example.com/static/ 可能被路由到静态资源服务器。

步骤:应用层处理

服务器或应用层接收到请求后,会根据请求的内容执行相应的业务逻辑。比如:

  • 查询数据库。
  • 处理表单提交。
  • 动态生成 HTML 内容。
  • 返回 API 响应(如 JSON 数据)。
4. 生成 HTTP 响应报文

经过处理后,服务器会构建一个 HTTP 响应报文,准备返回给客户端。一个典型的 HTTP 响应报文由以下几部分组成:

  • 响应行:包含响应的状态码(如 200 OK、404 Not Found 等)、响应的协议版本(如 HTTP/1.1)等。
  • 响应头部 :包含服务器信息、返回的内容类型(如 Content-Type: text/html)、缓存策略、Cookies 等。
  • 响应体:包含服务器返回的实际内容,通常是 HTML 文件、JSON 数据或其他资源。

例如,服务器返回的响应可能如下所示:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>
<html>
<head><title>Example Page</title></head>
<body><h1>Welcome to Example!</h1></body>
</html>
5. 响应返回给浏览器客户端

服务器将响应报文通过 TCP 连接发送回浏览器。浏览器收到响应后,开始处理响应数据:

  • HTML 页面渲染:如果响应内容是 HTML 页面,浏览器会解析 HTML,构建 DOM 树,并渲染出页面。
  • 资源加载:如果 HTML 页面中有图片、CSS 或 JavaScript 文件,浏览器会根据文件路径发出进一步的请求,以加载这些资源。
  • 执行 JavaScript:浏览器会执行页面中的 JavaScript 代码,这可能会导致页面的动态变化或发起额外的网络请求(例如 AJAX 请求)。
6. 浏览器显示结果

最终,经过以上多个步骤的交互,浏览器将显示最终的页面或数据。用户看到的是经过 Web 服务器渲染出来的网页或 API 返回的数据。

总结

从浏览器发出请求,到服务器经过反向代理、路由、处理业务逻辑后返回响应,再到浏览器解析渲染,

相关推荐
m0_748235958 分钟前
前端性能优化面试题汇总
前端·性能优化
weixi_kelaile5209 分钟前
智能语音机器人代替人工电销能不能促进成单率
java·服务器·人工智能·机器人·语音识别
Williamoses12 分钟前
挺详细的记录electron【V 33.2.0】打包vue3项目为可执行程序
前端·vue.js·electron
草明13 分钟前
轻量级的 HTML 模板引擎
开发语言·前端·javascript·cloudflare
逻辑猎人42 分钟前
linux 下硬盘挂载c
linux·运维·服务器
幽兰的天空43 分钟前
介绍一下CSS中伪类和伪元素的概念
前端·css·html·html5
问道飞鱼1 小时前
【云原生知识】Kubernets实践-前端服务如何访问后端服务
前端·nginx·云原生
AiFlutter1 小时前
Linux yum-config-manager命令异常
linux·运维·服务器
我爱布朗熊2 小时前
2.Linux - 基础结构及命令
linux·运维·服务器
张姐学编程2 小时前
【C++】vector
前端·c++·学习·html