HTTP请求流程(浏览器工作原理学习-课3)

jason_xiewenqiang
419 阅读3分钟

HTTP请求流程：为什么很多站点第二次打开速度会很快

HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础，通常由浏览器发起请求，用来获取不同类型的文件，例如 HTML 文件、CSS 文件、JavaScript 文件、图片、视频等

浏览器端发起 HTTP 请求流程

  1. 构建请求 -> 浏览器构建请求行信息
  2. 查找缓存 -> 浏览器会先在浏览器缓存中查询是否有要请求的文件
  3. 准备 IP 地址和端口 ->
    1. HTTP 的内容是通过 TCP 的传输数据阶段来实现的;
    2. 负责把域名和 IP 地址做一一映射关系 -> 域名映射为 IP 的系统就叫做“域名系统”，简称 DNS（Domain Name System）
    3. 浏览器提供了 DNS 数据缓存服务; 某个域名已经解析过了，那么浏览器会缓存解析的结果，以供下次查询时直接使用，这样也会减少一次网络请求
  4. 等待 TCP 队列 -> Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接
  5. 建立 TCP 连接 -> 浏览器通过 TCP 与服务器建立连接 3次握手
  6. 发送 HTTP 请求 -> 浏览器会向服务器发送请求行，它包括了请求方法、请求 URI（Uniform Resource Identifier）和 HTTP 版本协议、请求体等

服务器端处理 HTTP 请求流程

  1. 返回请求 ->

    1. 服务器会返回响应行，包括协议版本和状态码
    2. 服务器随同响应向浏览器发送响应头 -> 响应头包含了服务器自身的一些信息，比如服务器生成返回数据的时间、返回的数据类型（JSON、HTML、流媒体等类型），以及服务器要在客户端保存的 Cookie 等信息
    3. 服务器继续发送响应体的数据 -> 通常，响应体就包含了 HTML 的实际内容

  2. 断开连接 -> 通常情况下，一旦服务器向客户端返回了请求数据, 它就要关闭 TCP 连接

    1. 保持 TCP 连接可以省去下次请求时需要建立连接的时间，提升资源加载速度
    Connection:Keep-Alive

  3. 重定向 ->

    1. 响应行返回的状态码是 301，状态 301 就是告诉浏览器，我需要重定向到另外一个网址
    2. 需要重定向的网址正是包含在响应头的 Location 字段中，接下来，浏览器获取 Location 字段中的地址

问题： 为什么很多站点第二次打开速度会很快？

  1. DNS 缓存和页面资源缓存这两块数据是会被浏览器缓存

  2. 服务器是通过什么方式让浏览器缓存数据的？

    1. 浏览器是通过响应头中的 Cache-Control 字段来设置是否缓存该资源

      Cache-Control:Max-age=2000

    2. 缓存过期了，浏览器则会继续发起网络请求，并且在 HTTP 请求头中带上

      If-None-Match:"4f80f-13c-3a1xb12a"

    3. 如果没有更新，就返回 304 状态码 -> 如果资源有更新，服务器就直接返回最新资源给浏览器

  3. 登录状态是如何保持的？

    1. Set-Cookie
    2. 浏览器在接收到服务器的响应头后，开始解析响应头，如果遇到响应头里含有 Set-Cookie 字段的情况，浏览器就会把这个字段信息保存到本地

HTTP 请求流程 大致流程

  1. 构建请求、
  2. 查找缓存、
  3. 准备 IP 和端口、
  4. 等待 TCP 队列、
  5. 建立 TCP 连接、
  6. 发起 HTTP 请求、
  7. 服务器处理请求、
  8. 服务器返回请求和断开连接

文章内容来自极客时间

avatar
文章
阅读
粉丝