网站的工作原理：网络开发新手
如果您刚接触 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地址。
补充一下域名的知识：
- 一个域名自右向左，第一个点 "."，的右边是顶级域名（也称一级域名），第一个点 "." 的左边开始为二级域名，依次类推
- 举个栗子：https://www.zhihu.com 其中 .com 为顶级域名，.zhihu.com 为二级域名，www 通常不被看做域名的组成部分，但从规则上来看，可认为 www.zhihu.com 为一个三级域名
- 对于 www.sina.com.cn 这种域名而言，.cn 为顶级域名，.com.cn 为二级域名，以此类推
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）和文件名（someone）。用户可以从域名为 github.com 的网络主机通过 HTTP 获取该 URL 所标识的
Web资源。（很绕口吗？）
从代码到网页的旅程
好的，现在我们有了必要的定义，让我们尝试 Github 的搜索，看看从地址栏输入一个网址到获取到网页经历了什么：
1）您在浏览器中输入URL
image
2）浏览器解析 URL 中包含的信息。包括协议（https），域名（github.com）和资源（/）。 在这种情况下，.com 之后没有指示特定的资源，所以浏览器知道检索主（索引）页面
image
3)浏览器与 ISP 进行通信，对主机的 Web服务器 的 IP地址 进行 DNS 查找
www.github.com DNS 服务首先联系根服务器，查询 https://www.github.com 顶级域服务器的 IP地址。 该地址被发送回您的 DNS 服务。 DNS 服务与 .com 名称服务器进行另外的沟通，并请求 https://www.github.com 的地址。
image
source:https://technet.microsoft.com/en-us/library/bb962069.aspx
4)一旦 ISP 收到目标服务器的 IP地址，它会将其发送到您的 Web浏览器
image
5)您的浏览器从 URL 中获取 IP地址 和给定的端口号（HTTP 协议默认为端口 80，HTTPS
默认为端口 443），并打开 TCP 套接字连接。 此时，您的 Web浏览器 和 Web服务器 终于连接了。
- 您的网络浏览器向网页服务器发送 HTTP 请求，请求 www.github.com 的主页面
来自客户端的GET请求
7）Web 服务器接收请求并查找该 HTML 页面。 如果页面存在，则 Web服务器 准备响应并将其发送回您的浏览器。 如果服务器找不到请求的页面，它将发送一个 HTTP 404 错误消息，代表 找不到页面。
服务端响应
8）您的 Web浏览器 将接收到 HTML 页面，然后通过它从上到下解析寻找列出的其他资源，如图像，CSS 文件，JavaScript 文件等。
index.html 页面
9）对于列出的每个资源，浏览器重复上述整个过程，向服务器发送 HTTP 请求。
10）浏览器完成加载 HTML 页面中列出的所有其他资源后，页面将最终加载到浏览器窗口中，并且连接将被关闭
Github
穿越互联网深渊
值得注意的一件事是当您提出信息请求时，如何传输信息。当您发出请求时，该信息被分解成许多称为数据包的小块。每个数据包都标有一个包括源和目标端口号的 TCP 报头，以及包含 源 IP 地址 和 目标 IP 地址 作为身份标识的 IP 报头。然后，数据包通过以太网，WiFi 或蜂窝网络传输，并允许在任何路由上经过多次跳转，直到到达目的地。
（我们实际上并不关心数据包到达那里 - 重要的是它们到达目的地安全无恙！）一旦数据包到达目的地，它们将被重新组合。
那么所有的数据包怎么知道如何到达目的地而不会迷路？
答案是 TCP / IP。
TCP / IP 是一个两部分系统，作为互联网的基本 控制系统。IP 代表互联网协议；其作用是使用每个数据包上的 IP 头（即 IP 地址）将数据包发送到其他计算机。传输控制协议（TCP）负责将消息或文件分解成较小的数据包，使用 TCP头 将数据包路由到目的地计算机上的正确应用程序，如果丢包，则重新发送数据包；一旦到达另一端，重新组装数据包。
绘制最后的图片
等等 - 工作还没有完成！ 现在，您的浏览器具有构成网站（HTML，CSS，JavaScript，图像等）的资源，必须通过几个步骤将资源呈现为可读的网页。
您的浏览器有一个渲染引擎，负责显示内容。 渲染引擎以小块形式接收资源的内容。 然后有一个 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
网友评论