Web 的工作原理（针对前端开发人员）

在开始学习如何制作网站之前，我们需要了解网络的工作原理。这是我在开始我的网页开发之旅时犯的一个错误——我一开始只是搭建网站，却从未努力去了解我的网站将要运行的平台。
我之所以说这是一个无心之失，是因为正如苏格拉底所说：we don't know what we don't know“……我们不知道该用谷歌搜索什么，因此也就无法接触到我们需要了解的关键信息！”

以下是我尝试从 Web 开发的角度解释互联网是如何运作的。
让我们开始吧。

互联网上的一切要么是客户端，要么是服务器。客户端发出请求，服务器响应。简而言之，你的机器使用浏览器向服务器请求一些资源，然后服务器响应。服务器是另一台连接到互联网的机器。总体情况就是这样。

因此，这里的客户端可以是任何东西——你的手机或笔记本电脑，使用任何浏览器，例如 Chrome、Firefox、Edge。
而服务器可以是你尝试访问的网站、Web 服务或应用程序。

让我们更深入地探讨一下。

互联网上的每台机器都有一个 IP 地址。IP 地址可用于访问连接到互联网的任何东西。事实上，你的笔记本电脑也有一个 IP 地址。但服务器是一种特殊的机器，它们可以提供一些资源。因此，每当你作为客户端在浏览器中输入任何网站时，比如www.google.com，你都会被定向到域名服务器（DNS）查找。DNS 就像一个将域名（如 google.com ）映射到其 IP 地址的表。
当你访问www.google.com时，你正在向 Google 的服务器发送请求。
作为回报，Google 的服务器会给你一个回应。响应通常由Content-Type组成。此属性可帮助浏览器评估服务器响应的内容类型。现在，访问 google.com 可能会响应一个 HTML 网页，浏览器将通过其 content-type: 识别text/html它，然后它将知道如何处理它。它会将响应解析为 HTML 文件。

假设我们收到以下 HTML 作为响应：

<html>
   <head>
      <link href="/styles/main.css" />
   </head>
   <body>
     :
     :
     <script src="/javascript/app.js" />
   </body>
</html>

在这里，当浏览器遇到<link>标签时，它会说：“啊，这个网页需要这个资源。让我们从服务器请求它。” 这时浏览器就会请求文件main.css，服务器会发送文件，Content-Type 为text/css。标签也是如此<script>。

让我们看一个例子：

这表示，content-type : image/gif。因此浏览器知道这个特定的资产是一个图像，并且它会相应地显示在网页上。

您可以在任何网页上检查元素，然后转到“网络”选项卡，点击任何返回的资产。它将显示相应的请求和响应！

您还可以留意一些其他请求和响应：

方法：HTTP 方法使客户端能够指定对资产或资源执行的操作。
cookies：Cookie 是存储在您的本地机器中的小块数据，用于记住有用的信息或记录您的浏览活动。
状态代码：这些是服务器响应客户端的请求而发出的代码。

就是这样！现在，你知道了你不知道的东西。最后，我想说，了解网络的工作原理虽然短期内不会对网站建设或写作有帮助，但长期来看会带来好处，因为你知道幕后发生了什么。

我是不是漏了什么？我期待您的反馈。
好了！

文章来源：https://dev.to/anonyda/how-the-web-works-for-front-end-devs-2g6c