Web 是如何工作的
万维网如何工作高层次地描述了您使用网络浏览器访问网页时会发生什么，解释了幕后发生的“魔法”，即将相关代码传送到您的计算机，供浏览器组装成您可以查看的内容。
短期内，这些理论对于编写网络代码并非必不可少，但不久之后，您将真正开始受益于对后台发生的事情的理解。
注意：本文不涵盖网络浏览器如何实际将代码渲染成网页。这部分内容在浏览器如何加载网站中介绍。
| 预备知识 | 熟悉您的计算机操作系统、Web 浏览器和 Web 技术的基本知识。 |
|---|---|
| 学习成果 |
|
客户端和服务器
连接到互联网的计算机称为客户端和服务器。它们之间交互的简化图可能如下所示
- 客户端是典型的网络用户的互联网连接设备（例如，连接到Wi-Fi的计算机，或连接到移动网络的手机）以及这些设备上可用的网络访问软件（通常是像Firefox或Chrome这样的网络浏览器）。
- 服务器是存储网页、网站或应用程序的计算机。当客户端想要访问网页时，网页代码的副本会从服务器下载到客户端机器，由浏览器渲染并显示给用户。
工具箱的其他部分
我们上面描述的客户端和服务器并非故事的全部。还有许多其他部分参与其中，我们将在下面进行描述。
现在，让我们想象互联网是一条道路。道路的一端是客户端，就像您的家。道路的另一端是服务器，就像您想从中购买东西的商店。
为了使数据来回传输，我们需要以下事物
-
您的互联网连接：允许您在互联网上发送和接收数据。它基本上就像您家和商店之间的街道。
-
TCP/IP：传输控制协议和互联网协议（TCP/IP）是定义数据应如何在互联网上传输的通信协议。这就像让您下订单、去商店、购买商品的运输机制。在我们的例子中，这就像一辆汽车或一辆自行车（或者您沿着道路旅行的其他方式）。
-
DNS：域名系统（DNS）就像网站的地址簿。当您在浏览器中输入网址时，浏览器会查看DNS以查找网站的IP地址——服务器实际所在的地址——然后才能检索网站（有关更多信息，请参阅下面的DNS解释）。浏览器需要找出网站位于哪个服务器上，以便它可以向正确的位置发送HTTP消息（见下文）。这就像在访问商店之前查找商店的地址。
-
HTTP：超文本传输协议（HTTP）是一种应用程序协议，它定义了客户端和服务器相互通信的语言。这就像您用来订购商品的语言。请参阅下面的HTTP基础。
-
文件：网站由许多不同的文件组成，就像您从商店购买的不同商品一样。这些文件主要分为两种类型
- 代码：网站主要由HTML、CSS和JavaScript构建——网站用不同的编程语言编写，浏览器会解释这些语言并将其组装成网页显示给用户。
- 资产：这是网站上出现的所有其他项目的统称——例如图片、音乐、视频、Word文档和PDF文件——这些不是浏览器解释的代码。
注意：您可以在本课程的稍后部分，在浏览器如何加载网站中了解浏览器如何将这些文件组装成网页。
那么，具体发生了什么？
当您在浏览器地址栏中输入网址（这在技术上是URL的一部分）时，会发生以下步骤
- 浏览器访问DNS服务器，并找到网站所在服务器的真实地址。
- 浏览器向服务器发送HTTP请求消息，请求服务器将网站副本发送给客户端。此消息以及客户端和服务器之间发送的所有其他数据，都通过您的互联网连接使用TCP/IP发送。
- 如果服务器批准客户端的请求，服务器会向客户端发送“200 OK”消息，这意味着“您当然可以查看该网站！它在这里”，然后开始将网站文件作为一系列称为数据包的小块发送给浏览器。
- 浏览器将这些小块组装成完整的网页并显示给您。
DNS解释
真实的网址（URL）并不是您在地址栏中输入以查找您喜欢的网站的那些好记的字符串。它们是特殊的数字，看起来像这样：192.0.2.172。
这称为IP地址，它表示万维网上的一个独特位置。然而，它并不是很容易记住，对吗？这就是为什么发明了域名系统。这个系统使用特殊的服务器，将您在浏览器中输入的网址（例如“mozilla.org”）与网站的真实（IP）地址进行匹配。
网站可以通过其IP地址直接访问。您可以使用DNS查找工具来查找网站的IP地址。
现在让我们查找MDN的IP地址，并证明它指向与网址相同的位置
- 访问NsLookup.io DNS查找工具，输入
developer.mozilla.org，然后点击按钮。 - 在结果屏幕上，将IP地址（IPv4地址）复制到系统剪贴板。
- 打开一个新的浏览器标签页，将IP地址粘贴到地址栏中，然后按Enter/Return。您应该会看到MDN加载，这证明IP地址指向它。
数据包解释
早些时候，我们使用“数据包”一词来描述数据在客户端和服务器之间传输的格式。这里我们指的是什么？
当数据通过网络发送时，它以多个称为数据包的小块发送。每个数据包包含
- 一个标头，其中包含服务器和客户端IP地址、数据包编号、传输中的数据包总数以及传输中使用的协议详细信息等信息。
- 一个有效载荷，其中包含数据包中发送的实际数据。
数据以小数据包发送的原因有很多，但最主要的原因是
- 它们有时会丢失或损坏，发生这种情况时，客户端请求丢失的数据包比请求整个文件更快捷、更容易。
- 数据包可以沿着不同的路径路由，使传输尽可能高效并减少网络变慢的可能性——尤其是当许多用户同时请求同一资源时。数据包可能会乱序到达，但客户端可以使用数据包标头中的信息来确保它们以正确的顺序组装。
HTTP基础
HTTP使用简单的动词语言来执行诸如发出请求之类的操作（参见HTTP请求方法）。HTTP GET方法通常用于发出上述类型的HTTP请求。例如，请求MDN主页可能看起来像这样
GET /en-US/ HTTP/2
Host: developer.mozilla.org
服务器发送的响应可能看起来像这样
HTTP/2 200
date: Tue, 11 Feb 2025 11:13:30 GMT
expires: Tue, 11 Feb 2025 11:40:01 GMT
server: Google frontend
last-modified: Tue, 11 Feb 2025 00:49:32 GMT
ETag: "65f26b7f6463e2347f4e5a7a2adcee54"
content-length: 45227
content-type: text/html
<!doctype html> ... (the 45227 bytes of the requested web page HTML)
完整的响应比这更复杂，但为简洁起见，我们省略了大部分。主要部分如下
HTTP/2 200-
服务器用于发送响应的HTTP版本，在本例中为HTTP/2，后跟一个状态码，指示请求是否成功。
200表示成功。 date、expires等-
HTTP标头包含有关响应的附加信息（请注意，请求也可以有标头），这些信息提供额外信息和/或修改其行为。
<!doctype html>等-
响应体，在本例中包含MDN主页的HTML文档。
其他状态码
上面，我们遇到了200状态码，它表示HTTP请求成功。有许多具有特定含义和用途的HTTP状态码，但您只会经常看到少数几个
URL的组成部分
从技术上讲，您在浏览器地址栏中输入的网址构成了统一资源定位符（URL）的一部分。URL定义了互联网上唯一资源的位置。
URL是网址加上协议：例如，如果您在浏览器中打开一个新标签页，在地址栏中输入developer.mozilla.org，然后按Enter/Return，您将被重定向到如下URL
https://mdn.org.cn/en-US/
URL的主要部分是
https-
用于发送请求的协议。在这种情况下，我们使用的是HTTPS，它是HTTP的安全版本，可以防止坏人在数据传输过程中读取您的数据。在现代网络上，几乎所有服务器都使用HTTPS，因此如果您不明确包含它，浏览器会假定您正在使用它并为您添加。
developer.mozilla.org-
URL的域名，它表示您正在连接的服务器的顶级位置。在这种情况下，您输入的网址等于域名，但这并非总是如此——您可以选择输入更复杂的网址。请注意，
developer部分是Mozilla的mozilla.org域的子域（不同的内容区域）。Mozilla网站上还有其他托管不同内容的子域——例如，请参阅support.mozilla.org和bugzilla.mozilla.org。 /en-US/-
您正在访问的服务器上资源的路径。MDN将其所有美国英语内容保存在一个名为
en-US的文件夹中，这就是此URL所指向的。如果您的浏览器默认设置为偏好英语内容，那么当您输入
developer.mozilla.org时，您将被重定向到此URL。如果您的浏览器设置为偏好MDN支持的其他语言，例如法语，您将被重定向到不同的URL，例如https://mdn.org.cn/en-US/。这并非所有网站都默认可用；MDN开发人员将MDN设置为这样，以允许人们轻松访问他们喜欢的语言。
注意：URL中可以出现更多组件。有关更多详细信息，请参阅什么是URL？
另见
致谢
街景照片：街道构图，作者：Kevin Digga。