我为什么要关心 HTTP？

HTTP 是 URL 开头的四个字母，对吧？构建 Web 应用你只需要了解这些，但就像理解二进制一样，它能帮助你理解一些你原本无法理解的问题。它并非必修课，但它能让你成为一个更全面的开发者。

由于它是我们的软件将要使用的首要通信协议，让我们来了解一下 HTTP！

什么是 HTTP？

HTTP 代表超文本传输​​协议。这是一组用于发送和接收（传输）网页（超文本）的规则（协议）。虽然它仍然被称为 HTTP，但现在除了超文本之外，它还用于发送许多其他内容，例如 JSON 和图像。

HTTP 如何工作？

HTTP 通信发生在客户端和服务器之间。客户端发出 HTTP 请求，服务器响应该请求。您的 Web 浏览器就是一个 HTTP 客户端。当您访问网页时，浏览器会向服务器发送 HTTP 请求，服务器会发送响应。就这么简单。

实际上，一个网页通常由多个请求组成。通常情况下，浏览器会请求一些 HTML，然后服务器会返回该 HTML。浏览器会开始渲染 HTML，并请求渲染页面所需的其他资源，例如 JavaScript 文件、CSS 文件和图片。

请求的组成部分

以下是对 RadDevon.com 主页的原始请求：

GET / HTTP/2
Host: raddevon.com
User-Agent: curl/7.54.0
Accept: */*

当你在地址栏中输入 raddevon.com 并按下回车键时，你的浏览器会向我的主机发送此请求。请求内容如下：

• GET请求方法。它告诉服务器该请求的目的是什么。该请求希望服务器返回一些数据。MDN 上有一个很棒的请求方法参考。
• /– 我们正在请求的资源。由于主页位于服务器的根目录，所以它就是我们在这里请求的资源。
• HTTP/2– 协议。此特定请求使用 HTTP 版本 2 发出。
• 其余三行是标头。它们向接收服务器提供有关此请求的附加信息。
  • Host很明显。它识别了目标主机。
  • User-Agent标识发送请求的客户端。我使用 cURL 发送了此请求，它是一个简单的 Unix 命令行 HTTP 客户端。当您使用浏览器发出请求时，它将显示浏览器的名称和版本。
  • Accept告诉服务器客户端可以接收哪些类型的响应。

您还可以在请求中使用其他标头。以上只是本次请求所使用的标头。您甚至可以创建自己的标头，以便向服务器发送更多信息。

除了标头之外，您的请求可能还包含正文。提交表单时，该数据通常会通过请求正文发送到服务器。

为什么我需要了解 HTTP？

了解 HTTP 的工作原理，尤其是各种响应状态代码及其含义，有助于您调试应用程序并妥善处理错误。了解页面上使用的每个资源（脚本、图像、样式表等）都代表一个单独的请求，也有助于提高应用程序的性能。

这对你有帮助吗？我的目标是帮助人们转型进入 Web 开发行业。🤬🔜🤩 在Rad Devon报名参加免费辅导课程，我会帮你规划下一步。

您可以按照以下方式查看浏览器向您的应用发出的请求。浏览器的开发者工具将显示所有请求、响应状态，甚至请求标头和响应正文。以下是在 Chrome 开发者工具的“网络”选项卡中查看 Chrome 向 RadDevon.com 发出的请求的示例：

首次切换到“网络”选项卡时，它可能为空。只需刷新，它就会在页面重新加载时捕获所有请求。

每一行代表浏览器为呈现此页面而发出的一个请求。点击该请求，您将看到几个选项卡，其中包含有关该请求的更多信息。以下是返回 Rad Devon 主页 HTML 的主请求的响应选项卡：

请求如何影响性能？

完成请求所需的时间是请求到达服务器的时间、服务器准备响应的时间以及响应返回的时间的总和。除了请求数据返回所需的时间之外，每个请求还会有一些开销。如果您可以减少资源大小和请求数量，就可以减少页面加载所需的时间。

想象一下，你正在帮别人烤蛋糕。你主动提出做他们的“跑腿”，在他们专心烘焙的时候帮他们准备好所有需要的东西。他们先让你去拿面粉。你走到橱柜前，拿了面粉，然后拿了回来。

接下来，他们向你要可可粉。你有点恼火地回到柜子前，抓起可可粉递给他们。现在，他们又向你要泡打粉。好吧，这有点荒谬了。如果他们直接向你要柜子里所有需要的东西，你一次就能全部拿齐，那不是很好吗？

答对了。虽然由于物品略重，你可能需要更长的时间才能把所有东西都带回给他们，但这比跑三趟要快得多。如果你只拿他们需要的物品数量，而不是拖着一袋5磅重的物品，这个过程也会更快。如果最终发现他们根本不需要可可粉，这也会加快速度！

这与您在优化 Web 应用程序性能时可能采用的方法相同。请按顺序尝试以下优化：

1. 通过删除任何您不需要的图像或脚本来消除不必要的请求。
2. 通过优化图像和缩小代码来减轻重量。
3. 通过将所有 Javascript 和 CSS 连接到单个文件中来减少请求数量。

查看开发人员工具中的“时间”列，了解哪些请求导致您的页面变慢。

理解 HTTP 不仅有助于提高性能，还能提升应用的可用性，并使其更易于调试。当应用的行为不符合预期时，可能是因为请求存在问题。因此，了解“网络”选项卡中显示的内容对于调试非常有帮助。HTTP状态码是一个很好的起点。

什么是 HTTP 状态代码？

HTTP 状态码会与响应的其余部分一起由服务器返回给 HTTP 客户端。它们告知客户端请求是否成功；如果失败，则提供一些失败原因的信息。它们在 Chrome 开发者工具中如下所示：

状态码是三位数字。以下是其范围及其含义：

• 100 – 100 左右的响应被描述为“信息性响应”。我个人从未在现实生活中见过这样的响应代码。我确信它们确实存在，但我怀疑它们并不常见。
• 200 – 这是一个成功的请求，没有任何警告。如果您要求服务器执行某项操作，它会执行。如果您请求某些数据，它会返回。
• 300 – 您的请求已被重定向。这个响应可能仍然正常，因为服务器知道您请求的资源的位置……即使它不在您认为的位置。
• 400 – 400 类错误是客户端错误。这意味着请求中的某些内容与服务器预期的不符。也许您发送了一个 URL 参数，而该参数不受您发出请求的终端节点支持。如果错误代码在 400 类错误中，您可能无法在响应正文中收到任何有用的信息。
• 500 – 500 级错误代表服务器错误。请求没有问题，但服务器出了问题。与 400 级错误类似，500 级错误可能不会返回任何有用的数据。

这涵盖了范围，但这些范围内的每个状态代码都有更具体的含义。MDN 有一篇很棒的文章，详细介绍了每个响应代码的含义。这可以帮助您进一步缩小应用程序遇到的问题范围。它还可以帮助您更智能地处理应用程序中的不成功请求。

例如，如果由于用户在表单中输入了无效数据而导致请求返回 400 错误，而该表单随后通过参数传递给 API，则您可能需要显示一条错误消息，告知用户如何提供有效数据。另一方面，如果收到 500 错误，表示服务器出现了问题，则用户可能无法采取任何措施来纠正该问题。

为什么状态代码并不总是可靠的

理解状态码对于调试和编写处理错误的应用程序非常有用。但问题在于它们并不总是可靠的。原因如下。

在编写服务器端代码时，开发人员可以完全自行选择适合自己的错误代码。以上描述说明了每个范围的含义，但这并不意味着每个应用程序都以这种方式实现它们。事实上，并非如此。

您可能会收到包含有用数据的 500 错误代码，也可能收到包含错误消息的 200 错误代码。每个应用程序都是独一无二的“雪花”，因此在编写前端代码时，请确保您知道实际会返回什么。

理解 HTTP 的快速优势

即使你一直在为 Web 构建应用，但对 HTTP 协议一无所知，至少粗略地了解一下也是值得的。这样，你就能拥有更好的工具来提升性能，轻松处理服务器返回的错误，还能调试一些原本可能难以发现的问题。

这是一套很好的福利，只需阅读一些内容并在浏览器的开发工具中进行一些探索即可。