如果您刚接触Web开发，您认为自己知道网络的工作原理 - 至少在基本层面上。

...但是，当您尝试解释一个网站为什么出现空白。 什么是IP地址？ “客户 - 服务”模型是如何工作的？

最近开发框架功能很强大。强大到让我们这些新码农忽视了网站工作的基本原理。

我确实是这样， 没什么不好意思承认的：网络很复杂，只有当您开式编程时，您才意识到这些基础知识有多重要。 （如果您想让你的web app正常工作）

所以我写了一个关于这些基础知识的四部分的指南，这些基础每个人都需要掌握，无论你是编程菜鸟还是只是对编程感兴趣。

Part 1:网站工作原理

第2部分：Web应用程序的结构

第3部分：HTTP和REST

第4部分：客户端 - 服务器交互的代码示例

一个基本的网页搜索

让我们像之前那样开始，在浏览器的地址栏中输入“www.github.com” ，我们会看到页面开始加载。

看起来似乎很简单，幕后却隐藏着一大堆魔法。 让我们来深入学习吧。

定义网络的部分

了解网络是非常麻烦的，因为有很多术语。不幸的是，有些术语对于理解这篇文章的其余部分至关重要。

如果您想了解万维网的秘密，以下是最重要的术语：

客户端：在计算机上运行并连接到互联网的应用程序，如Chrome或Firefox。其主要作用是进行用户交互，并将其转换为对另一台称为Web服务器的计算机的请求。虽然我们通常使用浏览器访问网络，但您可以将整个计算机视为客户端 - 服务器模型的“客户端”。每个客户端计算机都有一个唯一的地址，称为IP地址，其他计算机可以用来识别它。

服务器：连接到互联网且具有IP地址的机器。服务器等待来自其他机器（例如客户机）的请求并对其进行响应。不同于您的计算机（即客户端），服务器也具有IP地址并安装运行特殊的服务器软件，确定如何响应来自浏览器的请求。 Web服务器的主要功能是将网页存储，处理和传送给客户端。有许多类型的服务器，包括Web服务器，数据库服务器，文件服务器，应用程序服务器等。 （在这篇文章中，我们在谈论Web服务器。）

IP地址：互联网协议地址。 TCP / IP网络上的设备（计算机，服务器，打印机，路由器等）的数字标识符。互联网上的每台计算机都有一个IP地址，用于识别和与其他计算机通信。 IP地址有四组数字，以小数点分隔（例如244.155.65.2）。这被称为“逻辑地址”。为了在网络中定位设备，通过TCP / IP协议软件将逻辑IP地址转换为物理地址。这个物理地址（即MAC地址）内置在您的硬件中。

ISP：互联网服务提供商。 ISP是客户端和服务器之间的中间人。典型的ISP通常是“有线电视公司”。当您的浏览器收请求www.github.com, 时，它不会知道在哪里寻找www.github.com, 因此，ISP的工作是进行DNS（域名系统）查找，以询问查找的网站的IP地址。

DNS：域名系统。跟踪计算机的域名及其在互联网上相应IP地址的分布式数据库。不要担心“分布式数据库”如何工作：只需要知道输入www.github.com, 而不是IP地址就行了。

域名：用于标识一个或多个IP地址。用户使用域名（例如www.github.com, ）访问互联网上的网站。当您在浏览器中键入域名时，DNS使用它来查找该给定网站的IP地址。

TCP / IP：传输控制协议/互联网协议。最广泛使用的通信协议。 “协议”是一些标准的规则。TCP / IP被用作通过网络传输数据的标准。

端口号：一个16位整数，用于标识服务器上的特定端口，并始终与IP地址相关联。它可以用来识别服务器上可以转发网络请求的特定进程。

主机：连接到网络的计算机 - 它可以是客户端，服务器或任何其他类型的设备。每个主机都有唯一的IP地址。对于www.google.com, 等网站，主机可以是为该网站的网页提供服务的网络服务器。主机和服务器概念经常混合，但是它们是两个不同的东西。服务器是一种主机 - 它们是一个特定的机器。另一方面，提供托管服务来维护多个Web服务器的机器可以称作主机。在这个意义上，您可以从主机运行服务器。

HTTP：超文本传输协议。 Web浏览器和Web服务器用于通过互联网进行通信的协议。

URL：统一资源定位符。 URL识别特定的Web资源。一个简单的例子是https://github.com/someone. URL指定协议（“https”），主机名（github.com）和文件名（某人的个人资料页面）。用户可以从域名为github.com的网络主机通过HTTP获取该URL所标识的Web资源。（很绕口吗？）

从代码到网页的旅程

好的，现在我们有了必要的定义，让我们尝试Github的搜索，看看从地址栏输入一个网址到获取到网页经历了什么：

1）您在浏览器中输入URL

2）浏览器解析URL中包含的信息。包括协议（“https”），域名（“github.com”）和资源（“/”）。 在这种情况下，“.com”之后没有指示特定的资源，所以浏览器知道检索主（索引）页面

3)浏览器与ISP进行通信，对主机的Web服务器的IP地址进行DNS查找www.github.com. DNS服务首先联系根服务器, 查询 https://www.github.com 顶级域服务器的IP地址。 该地址被发送回您的DNS服务。 DNS服务与“.com”名称服务器进行另外的沟通，并请求 https://www.github.com. 的地址。

source: https://technet.microsoft.com/en-us/library/bb962069.aspx

4)一旦ISP收到目标服务器的IP地址，它会将其发送到您的Web浏览器

5)您的浏览器从URL中获取IP地址和给定的端口号（HTTP协议默认为端口80，HTTPS默认为端口443），并打开TCP套接字连接。 此时，您的Web浏览器和Web服务器终于连接了。

6) 您的网络浏览器向网页服务器发送HTTP请求，请求 www.github.com. 的主页面

来自客户端的GET请求

7）Web服务器接收请求并查找该HTML页面。 如果页面存在，则Web服务器准备响应并将其发送回您的浏览器。 如果服务器找不到请求的页面，它将发送一个HTTP 404错误消息，代表“找不到页面”。

服务端响应

8）您的Web浏览器将接收到HTML页面，然后通过它从上到按下解析寻找列出的其他资源，如图像，CSS文件，Java文件等。

index.html 页面

9）对于列出的每个资源，浏览器重复上述整个过程，向服务器发送HTTP请求。

10）浏览器完成加载HTML页面中列出的所有其他资源后，页面将最终加载到浏览器窗口中，并且连接将被关闭

Github

穿越互联网深渊

值得注意的一件事是当您提出信息请求时，如何传输信息。当您发出请求时，该信息被分解成许多称为数据包的小块。每个数据包都标有一个包括源和目标端口号的TCP报头，以及包含源IP地址和目标IP地址作为身份标识的IP报头。然后，数据包通过以太网，WiFi或蜂窝网络传输，并允许在任何路由上经过多次跳转，直到到达目的地。

（我们实际上并不关心数据包到达那里 - 重要的是它们到达目的地安全无恙！）一旦数据包到达目的地，它们将被重新组合。

那么所有的数据包怎么知道如何到达目的地而不会迷路？

答案是TCP / IP。

TCP / IP是一个两部分系统，作为互联网的基本“控制系统”。IP代表互联网协议;其作用是使用每个数据包上的IP头（即IP地址）将数据包发送到其他计算机。传输控制协议（TCP）负责将消息或文件分解成较小的数据包，使用TCP头将数据包路由到目的地计算机上的正确应用程序，如果丢包，则重新发送数据包;一旦到达另一端，重新组装数据包。

绘制最后的图片

等等 - 工作还没有完成！ 现在，您的浏览器具有构成网站（HTML，CSS，Java，图像等）的资源，必须通过几个步骤将资源呈现为可读的网页。

您的浏览器有一个渲染引擎，负责显示内容。 渲染引擎以小块形式接收资源的内容。 然后有一个HTML解析算法告诉浏览器如何解析资源。

一个DOM树

构建DOM树后，将分析样式表以了解如何对每个节点进行样式化。 使用此信息，浏览器遍历DOM节点并计算每个节点的CSS样式，位置，坐标等。

一旦浏览器具有DOM节点及其样式，那么最终就可以将页面绘制到屏幕上了。 结果是：你在互联网上看过的一切。

网络很复杂，但你刚刚完成了很多的工作

所以这就是网络。迷惑吗？ 我们都是，但是如果你已经读到这里，你已经完成了最艰难的部分。 我跳过了一些细节，以便在这里向大家展示这个大图; 但是如果你能记起上面列出事件的基本顺序，填写细节将是小菜一碟。

查看Part 2, 在那里我们将讲解一个基本的Web应用程序的结构)

译者：众里寻他千百度

译文：http://www.zcfy.cc/article/4137

原文：https://medium.freecodecamp.org/how-the-web-works-a-primer-for-newcomers-to-web-development-or-anyone-really-b4584e63585c