网络工作原理

网页工作原理 提供了一个简化的视图，展示了你在电脑或手机上用浏览器查看网页时发生了什么。

短期内，理解这些理论对于编写网页代码不是必需的，但不久之后你就会发现，了解后台发生的事情会让你受益匪浅。

客户端和服务器

连接到互联网的电脑被称为 **客户端** 和 **服务器**。它们之间交互的简化图可能如下所示

Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client

  • 客户端是普通网页用户连接互联网的设备（例如，连接到 Wi-Fi 的电脑，或连接到移动网络的手机），以及这些设备上可用的网页访问软件（通常是像 Firefox 或 Chrome 这样的网页浏览器）。
  • 服务器是存储网页、网站或应用程序的电脑。当客户端设备想要访问一个网页时，网页的副本会从服务器下载到客户端机器上，并在用户的网页浏览器中显示。

工具箱的其他部分

我们上面描述的客户端和服务器并没有完整地说明情况。还有许多其他部分参与其中，我们将在下面进行描述。

现在，让我们想象一下网络是一条路。路的尽头是客户端，就像你的房子。路的另一端是服务器，就像你想去购物的商店。

A black-and-white photo of a person crossing a road at a crosswalk

除了客户端和服务器之外，我们还需要向以下内容打招呼

  • **你的网络连接**：允许你在网络上发送和接收数据。它基本上就像你家和商店之间的街道。
  • **TCP/IP**：传输控制协议和互联网协议是定义数据如何在互联网上传输的通信协议。这就像让你下单、去商店和购买商品的运输机制。在我们的例子中，这就像一辆汽车或自行车（或者你可能使用的任何其他交通工具）。
  • **DNS**：域名系统就像网站的地址簿。当你在浏览器中输入网页地址时，浏览器会查看 DNS 以查找网站的 IP 地址，然后才能检索网站。浏览器需要找出网站位于哪个服务器上，以便它可以向正确的位置发送 HTTP 消息（见下文）。这就像查找商店的地址以便你能够访问它。
  • **HTTP**：超文本传输协议是一种应用程序 协议，它定义了客户端和服务器之间互相通信的语言。这就像你用来订购商品的语言。
  • **组件文件**：一个网站由许多不同的文件组成，这些文件就像你从商店购买的商品的不同部件。这些文件主要分为两种类型
    • **代码文件**：网站主要由 HTML、CSS 和 JavaScript 构建，尽管你以后会遇到其他技术。
    • **资源**：这是构成网站的所有其他内容的统称，例如图像、音乐、视频、Word 文档和 PDF 文件。

到底发生了什么？

当你将网页地址输入浏览器时（在我们的类比中，这就像走到商店）

  1. 浏览器会访问 DNS 服务器，并找到网站所在的服务器的真实地址（你找到商店的地址）。
  2. 浏览器向服务器发送一个 HTTP 请求消息，要求它将网站的副本发送到客户端（你走到商店并订购你的商品）。此消息以及客户端和服务器之间发送的所有其他数据都是通过你的网络连接使用 TCP/IP 发送的。
  3. 如果服务器批准了客户端的请求，服务器会向客户端发送一个“200 OK”消息，表示“当然你可以查看该网站！它在这里”，然后开始将网站的文件作为一系列称为数据包的小块发送到浏览器（商店给你你的商品，你把它们带回你的家）。
  4. 浏览器将这些小块组装成一个完整的网页并显示给你（商品到达你的家门口——闪亮的新东西，太棒了！）。

组件文件解析顺序

当浏览器向服务器发送 HTML 文件请求时，这些 HTML 文件通常包含 <link> 元素，引用外部 CSS 样式表，以及 <script> 元素，引用外部 JavaScript 脚本。了解浏览器加载页面时这些文件被 解析的顺序 非常重要。

  • 浏览器首先解析 HTML 文件，这会导致浏览器识别任何 <link> 元素对外部 CSS 样式表的引用以及任何 <script> 元素对脚本的引用。
  • 当浏览器解析 HTML 时，它会向服务器发送请求，获取它从 <link> 元素中找到的任何 CSS 文件，以及它从 <script> 元素中找到的任何 JavaScript 文件，然后从这些文件中解析 CSS 和 JavaScript。
  • 浏览器从解析后的 HTML 生成一个内存中的 DOM 树，从解析后的 CSS 生成一个内存中的 CSSOM 结构，并 编译并执行 解析后的 JavaScript。
  • 当浏览器构建 DOM 树并应用 CSSOM 树中的样式并执行 JavaScript 时，页面的可视化表示会绘制到屏幕上，用户可以看到页面内容并开始与之交互。

DNS 解释

真实的网页地址并不是你在地址栏中输入以查找你最喜欢的网站的那些友好且易于记忆的字符串。它们是看起来像这样的特殊数字：192.0.2.172。

这被称为 IP 地址，它代表网络上的一个唯一位置。但是，它不太容易记住，不是吗？这就是发明域名系统的原因。该系统使用特殊的服务器，将你在浏览器中输入的网页地址（如“mozilla.org”）与网站的真实（IP）地址匹配。

可以通过网站的 IP 地址直接访问网站。你可以使用 DNS 查询工具 查找网站的 IP 地址。

数据包解释

前面我们使用“数据包”一词来描述客户端和服务器之间传输数据的格式。这里我们指的是什么？基本上，当数据通过网络发送时，它是以数千个小块发送的。数据以小数据包发送有多个原因。它们有时会被丢弃或损坏，并且在这种情况下替换小块更容易。此外，数据包可以通过不同的路径路由，从而使交换速度更快，并允许许多不同的用户同时下载同一个网站。如果每个网站都作为单个大块发送，那么一次只能有一个用户下载它，这显然会使网络效率低下且使用起来不有趣。

另请参阅

鸣谢

街景照片：街景构成，作者 kevin digga。