解析URL—生成HTTP请求消息

url的组成部分:

  • 协议: URL的开头是协议,它指定了如何访问资源。常见的协议包括 http(超文本传输协议)、https(安全的超文本传输协议)、ftp(文件传输协议)等。协议后跟冒号和两个斜杠,例如 https://
  • 域名: 域名是资源所在服务器的网络地址。在URL中,域名紧跟在协议后面,例如 www.example.com。域名有时也包括子域名(如 www)。
  • 端口: 端口是可选的,位于域名之后,由冒号隔开。如果未指定,HTTP默认使用端口80,HTTPS默认使用端口443。例如 https://www.example.com:443
  • 路径: 路径指定服务器上资源的具体位置。例如,在 https://www.example.com/index.html 中,/index.html 是路径,指向服务器上名为 index.html 的文件。
  • 查询字符串: 查询字符串(可选)开始于问号 ?,后跟一个或多个参数,用于传递额外信息给服务器。例如, https://www.example.com/search?q=example 中的 q=example 是查询参数,用于搜索关键词。
    对 URL 进行解析之后,浏览器确定了 Web 服务器和文件路径,接下来就是根据这些信息来生成 HTTP 请求消息了。

DNS解析获取IP

通过浏览器解析 URL 并生成 HTTP 消息后,需要委托操作系统将消息发送给 Web 服务器。
但在发送之前,还有一项工作需要完成,那就是查询服务器域名对应的 IP 地址,因为委托操作系统发送消息时,必须提供通信对象的 IP 地址。详见应用层协议详解

TCP连接

关于TCP报文格式以及其他详细介绍,见传输层协议详解
在 HTTP 传输数据之前,首先需要 TCP 建立连接,TCP 连接的建立,通常称为三次握手

ARP获取MAC

ARP用于将IP地址解析为MAC地址,详细过程见网络层协议详解

HTTP 请求与响应

发送 HTTP 请求

  • 构建请求报文:浏览器构建一个 HTTP 请求报文,包括请求行、请求头和请求体。
    • 请求行GET / HTTP/1.1
    • 请求头:包含 Host、User-Agent、Accept 等信息。
  • 发送请求:通过已建立的 TCP 连接,将 HTTP 请求发送到服务器。

服务器处理请求

  • 解析请求:服务器接收到 HTTP 请求后,解析请求行和请求头。
  • 生成响应:服务器根据请求内容,生成相应的 HTTP 响应报文,包括状态行、响应头和响应体。
    • 状态行HTTP/1.1 200 OK
    • 响应头:包含 Content-Type、Content-Length 等信息。
    • 响应体:包含网页的 HTML 内容。

发送 HTTP 响应

  • 通过 TCP 连接:服务器将 HTTP 响应报文通过 TCP 连接发送回客户端。

浏览器渲染网页

解析 HTML

  • DOM 树:浏览器解析 HTML,生成 DOM(文档对象模型)树。
  • CSSOM 树:解析 CSS,生成 CSSOM(CSS 对象模型)树。
  • 渲染树:结合 DOM 树和 CSSOM 树,生成渲染树。

布局与绘制

  • 布局:计算每个元素的尺寸和位置。
  • 绘制:将渲染树的每个节点绘制到屏幕上。

处理资源

  • 外部资源:浏览器遇到 <img><script><link> 等标签时,发送新的 HTTP 请求下载资源。
  • 异步请求:如果遇到 JavaScript 发起的异步请求(如 AJAX),则重复 DNS 解析、TCP 连接和 HTTP 请求过程。

TCP 连接断开

TCP连接通过四次挥手断开三次握手和四次挥手 | 星落溪桥