基础架构 | 在浏览器一份代码如何变成一个网页，涉及到哪些协议和流程？

XMX303
218 阅读6分钟

简述浏览器中 IP 地址与 TCP 协议、UDP 协议的实践

我们通过浏览器打开某个网站的网页，需要向对应主机的对应端口请求对应的数据，这里就涉及到 IP 地址、端口号、TCP 协议和 UDP 协议了：

  • 我们需要知道服务器主机的 IP 地址，从而发送网页数据请求

  • 服务器主机也需要知道我们的 IP 地址，从而发送响应请求

  • 包含 IP 地址的 IP 头附加到数据上，形成 IP 数据包

  • 发送的数据只求快而不求稳和准，可以使用 UDP 协议，UDP 头有请求应用的端口号信息，通过 IP + UDP 就可以实现应用级的数据传输。

  • 发送的数据需要准确又高效，需要使用 TCP 协议，TCP 头有请求应用的端口号信息，通过 IP + TCP 也可以实现应用级的数据传输。一个完整的 TCP 连接的生命周期包括了“建立连接”、“传输数据”和“断开连接”三个阶段：

    1. 建立连接：客户端和服务端总共要发送三个数据包以确认连接的建立，分别是

      1. 客户端携带请求数据通道建立请求信息前往服务端
      2. 服务端接收信息并返回建立成功信息以及响应数据通道请求建立信息
      3. 客户端接收信息并返回建立成功信息给服务端
      4. 服务端接收到包，完成建立连接步骤。

    2. 传输数据：接收端需要对每个数据包进行操作确认，需要发送确认数据包给发送端，当规定时间内发送端没收到确认信息，就会触发重发机制，重新发送该数据包。一个大的文件在传输过程中会被拆成很多小的数据包，在接收端再安装 TCP 头中的序号为这些包排序，从而组成完整的数据。

    3. 断开连接：客户端和服务端总共要发送四个数据包以确认连接的断开，可以参考建立连接步骤。

建立在 TCP 之上的 HTTP 请求流程

一个 TCP 连接过程包括了建立连接、传输数据和断开连接三个阶段。而 HTTP 协议，正是运行在传输数据阶段的。HTTP 是一种允许浏览器向服务器获取资源的协议。

请求之前的准备动作

  1. 构建请求
GET /index.html HTTP1.1
  1. 查找缓存

服务端会通过缓存协议，将返回的部分数据资源打上缓存标记，这部分资源在抵达浏览器端后会被缓存在本地，以供下次请求时直接使用。

当浏览器发现部分请求的资源已经在浏览器缓存中存有副本，它会拦截这部分数据请求，返回该资源的副本，并结束对应的请求，而不会再去服务器重新下载。

  1. 准备 IP 地址和端口

HTTP 请求需要建立在 TCP 连接之上，而 TCP 需要 IP 地址和端口。显而易见，我们需要在 HTTP 请求头中携带 IP 地址和端口号。我们可以选择直接使用 IP + 端口号的形式访问服务器，也可以输入服务器对应的 URL（例如：baidu.com），通过“域名系统”（DNS【域名：IP 地址】）解析后，我们可以获得对应的 IP，通常情况下，如果 URL 没有特别指明端口号，那么 HTTP 协议默认是 80 端口 。

  1. 等待 TCP 队列

当我们拿到 IP 和端口后，可能要进入 TCP 队列等待。Chrome 有个机制，通个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时又 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。

  1. 建立 TCP 连接（复用 TCP 连接）

TCP 排队结束后，如果该 TCP 连接设置了 Keep-Alive 模式，我们可以通过复用 TCP 连接以访问服务端，否则将重新建立 TCP 连接以搭建 HTTP 请求环境。

HTTP 请求与响应

  1. 首先服务器会向服务器发送请求数据包，它包括了请求行【请求方法+请求URI+HTTP 协议版本】、请求体【通常是浏览器应用的交互数据】和请求头【浏览器数据+请求资源数据包+服务器设置的资源数据】，这三者是按顺序发的，前一个数据对象发送完毕后才会发送后一个数据对象。

  2. 如果服务器在路由系统中设置了重定向规则，HTTP 请求的网页资源将被重定向到指定资源位置。

  3. 服务器接收到请求后，通过响应数据包返回响应数据，它包含了响应行【HTTP协议版本 + 响应状态码】、响应头【服务器设置的该响应数据包的资源数据】和响应体【响应数据包的内容】，与请求数据包对应，响应数据包的三个数据也是按顺序响应。

  4. 断开连接

通常情况下，服务器返回数据后，就会关闭 TCP 连接。但是浏览器或者服务器在头信息中加入

Connection:Keep-Alive

那么 TCP 连接在发送后仍然保持打开状态，省去下次请求时需要建立连接的时间，直到服务器/客户端主动关闭或者出现异常情况后，该 TCP 才会关闭。

一些问答

  1. 通过什么设置，可以提高站点的二次访问速度？

通过 DNS 缓存和页面资源缓存。

  1. 登录状态是如何保持的？
  • 用户在登录页面提交登录信息给服务器。
  • 服务器验证用户登录信息，如果信息正确，会生成一段表示用户身份的字符串，并把该字符串写到响应头的 Set-Cookie 字段内，并随着响应数据包返回给浏览器
Set-Cookie: UID=3412uca;
  • 浏览器接收到响应包后，解析响应头，如果有 Set-Cookie 字段，就将对应数据存入到本地的 Cookie 中。
  • 当用户再次访问时，浏览器会将 Cookie 数据写进请求头的 Cookie 字段中，随着请求数据包一同发给服务器。
Cookie: UID=3412uca;
  • 服务器接收到带有“Cookie”的请求头时就会验证用户信息，验证成功后判断用户为已登录状态，之后生成带有该用户信息的页面数据，并将其发送给浏览器。
  • 浏览器接收并展示对应数据。
avatar
文章
阅读
粉丝