（译）Web是如何工作的：给Web开发新手的初级读物

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

 

如果你刚开始学习Web开发，你可能会认为你知道网络是如何工作的——至少基本上是这样的。

 

……但是当你尝试去解释一个简单网站是如何工作的时，头脑却是一片空白。IP地址又意味着什么？“客户端——服务器端”具体又是如何运作的？

 

事实上，在有功能强大的开发框架的今天，对于一些新手很容易就忽略掉对Web的基础认识。

 

我知道，我曾经就是这样的，这没有什么不好意思承认的。Web是复杂的，只有当你开始后端工程师的生涯时，你才会意识到这些基础的重要性。（如果你想写出一个能够正常运行的Web程序。）

 

所以，我把每个人都应该掌握的基础知识写成了四个部分的引导文章，无论你是以Web开发为职业，还是仅仅是抱着学习的兴趣，都可以看看：

 

第一部分：Web是如何工作的

第二部分：Web程序的结构

第三部分：HTTP和REST

第四部份：客户端与服务端互动的示例代码

 

一个基础的网页搜索

让我们从我们都做过的事情开始讲解：你在浏览器的地址栏里敲入“www.github.com”后，页面将会加载在浏览器里。

 

这个操作看起来很简单，它后面其实发生了许多神奇的事情，我们现在就来一探究竟。

 

Web组成部分的定义

了解Web是比较难的，因为它包含了很多术语。

不幸的是，部分术语决定了你能否理解接下来的文章。

 

如果你想知道万维网的秘密，以下是一些你必须理解的重要术语：

 

客户端：就是一个运行在电脑上，用来连接因特网的程序，比如谷歌浏览器或火狐浏览器。它的主要角色是接受用户的输入，并按用户输入去请求另一台称之为web服务器的电脑。尽管我们通常使用浏览器去访问网页，但是你可以把你的整台电脑当作客户端-服务器模型中的“客户端”。每一台客户端电脑都有唯一标识的地址——IP地址，这样其它电脑就能根据IP地址去识别它。

 

服务器：连接互联网的机器，它也有一个IP地址。一台服务器是等待其它机器（比如说客户端）的请求，并响应它们。不像你拥有IP地址的电脑（比如说客户端），服务器是安装和运行着特殊的服务器软件，这些软件来告诉服务器如何去回应来自你浏览器的请求。Web服务器的主要功能是存储、处理和传送网页至客户端。服务器有很多种类型，比如Web服务器、数据库服务器、文件服务器和应用程序服务器等等。（在这篇文章中，我们谈论的是Web服务器。）

 

IP地址：网际协议地址，在TCP/IP网络中，它是一台设备（电脑、服务器、打印机、路由器等）的数字标识。在互联网中的每一台电脑都有一个IP地址，它用来识别与其他电脑的通信。IP地址是由四组数字，通过点来隔开的字符串（比如224.155.65.2）。这也称之为“逻辑地址”。为了定位网络中的设备，通过TCP/IP协议软件把逻辑IP地址转换成一个物理地址，这个物理地址是烧制在你的硬件中的。

 

ISP：网络服务提供商。ISP是一个在客户端和服务器之间的中间商。对于典型的家庭，ISP通常是“电缆公司”。当你的浏览器接受去www.github.com的请求时，它是不知道去哪里查找www.github.com的，所以这是ISP的工作，ISP通过DNS查找你试图访问的站点所对应的IP地址。

 

DNS：域名系统。DNS是一个分布式数据库，用来跟进互联网上电脑域名与它们相对应的IP地址记录。在目前不用去操心“分布式数据库”是如何工作的，只要知道DNS的存在使得用户输入的www.github.com可以用一个IP地址代替。

 

域名：用来标识一个或多个IP地址。用户使用域名（比如www.github.com）去互联网上浏览一个网站。但你在浏览器里敲入域名，DNS查找其对应的IP地址。

 

TCP/IP：传输控制协议/因特网互联协议。TCP/IP是使用最广泛的通信协议。“协议”只是一系列规则做什么的标准，TCP/IP是用来作为网络间传送数据的标准协议。

 

端口号：是一个16位的整型数字，用来标识服务器上具体的端口，端口通常是与IP地址关联起来的。它作为识别服务器上特定进程的一种方式，将网络请求转发到服务器上。

 

主机：连接网络的电脑——它可以使客户端、服务器或者任意类型的设备。每一台主机都有一个唯一的IP地址。就拿www.google.com这个网站来说，主机可以是Web服务器，用来给该网站提供网页服务。主机与服务器通常容易引起混淆，但是注意它们两个是不同的东西。服务器是主机中的一种——它们是一种特指的机器。另一方面，一台主机可能涉及整个组织，该组织提供一个托管服务来维护多个Web服务器。按这个意义来说，你可以一台主机上运行一个服务。

 

HTTP：超文本传输协议。该协议是浏览器和Web服务器在互联网间通信用的。

 

URL：统一资源定位符。URL是用来标识一个特定的Web资源。就拿https://github.com/someone这个简单的例子来说，这个URL规定了使用的协议（“https”），主机名(github.com)和文件名（某人的个人资料页面）。一个用户可以拿这个URL，通过HTTP从一个域名为github的主机上获得这个网页资源。

 

从代码到网页的旅程

现在我们对这旅程中主要名词有了一定的了解，让我们通过github搜索来看下，我们是如何通过在地址栏里输入一个URL到达对应的网页的：

1、在你的浏览器里输入URL

 

2、浏览器解析这个URL所包含的信息。这个URL包含了使用的协议（“https”），主机名(github.com)以及资源（“/”）。在这个例子中，“.com”后面没有任何东西去指向一个特指的资源，所以浏览器就知道只检索主页。

 

3、浏览器与ISP通信，通过DNS查找主机名为www.github.com的Web服务器所对应的IP地址。DNS服务将先联系根域名服务器，该服务器将查找https://www.github.com，并取得“.com”顶级域名的域名服务器对应的IP地址，然后将这个IP地址返回给你的DNS服务。DNS服务对“.com”做扩展查询https://www.github.com对应的IP地址。

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

 

4、一旦ISP接受到目标服务器对应的IP地址，它就会把这个IP地址发送给你的浏览器。

 

5、你的浏览器将拿这个IP地址和URL中的端口号（HTTP协议默认端口号是80，HTTPS默认端口号是443），打开一个TCP套接字连接。这时，你的浏览器和服务器就建立了连接。

 

6、你的浏览器发送一个HTTP请求至Web服务器，去获取www.github.com的主页。

 

7、Web服务器接收请求，并查找HTML页面。如果该页面存在，该Web服务器准备响应并把它发回给你的浏览器。如果服务器找不到你请求的页面，它将发送一个404错误消息，404表示“页面未找到”

 

8、你的浏览器把它接收到的HTML页面从头到尾扫描一遍，并去寻找其它相关的资源，如图片、CSS文件、JavaScript脚本文件等等。

 

9、在网页中涉及的其它资源，服务器会重复上面的步骤去发起HTTP请求每个相应的资源。

 

10、一旦浏览器加载完HTML涉及到的所有资源，页面最终会加载在浏览器窗体里，并关闭与服务器的连接。

 

 

跨越互联网的深渊

一件值得注意的是，当你发起一个请求时，你请求获取的信息是如何传送的。当你发起一个请求，这些信息是拆分成许多小块的，我们称之为包，每一个包包含TCP头部，这个头部里包含了源主机和目的主机的端口号，以及IP头部包含源主机和目的主机的IP地址。然后这个包通过以太网、WiFi和蜂窝网络传输，并允许在任何路径上进行传输，并在到达最终目的地时获取尽可能多的跳转。

（事实上我们并不关心包是如何到达目的地的，我们关心的是这些包能够安全地传送到目的主机），一旦这些包到达目的主机，它们将再次组合起来，当成一个整体进行传送。

 

那么所有这些包是怎么知道它们应如何到达目的主机，而不丢失任何包的呢？

答案就是TCP/IP。

TCP/IP是两部分组成的，它的功能是作为因特网的基本“控制系统”。IP表示因特网互联协议，它的主要任务是通过每个包的IP头部（例如IP地址）去发送和寻找路径传送到其它电脑。第二部分是传输控制协议（TCP），它的任务是拆分信息或者是把文件拆成小包，通过TCP头部把包路由至目的电脑相应的应用上，如果包发生丢失时，就重新发送，一旦当他们都到达另一端时，就按正确的顺序组装起来。

 

描绘最终的图形

等等，任务还未完成。现在你的浏览器已经取得了网站首页的全部资料（HTML、CSS、JavaScript、图片等等），它还得经过几步把这些资源以人可读的网页的方式呈现。

你的浏览器有一个渲染引擎，它就是负责展示内容的。这个渲染引擎以小块的方式接受所有资源的内容，然后通过HTML解析算法告诉浏览器如何解析这些资源。

 

一旦解析完成，它会生成一个由DOM元素组成的结构树，DOM代表文档对象模型，它是在HTML文档中如何呈现所有对象位置的一种约定。每个文档中的对象或者说节点，可以使用脚本语言，如JavaScript，去操作它们。

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

一旦浏览器取得了DOM节点和它们的样式，它最终根据你的屏幕准备绘制页面。最终页面就是你之前在网络上看到的页面一样。

 

Web是复杂的，但是你已经了解了其中难懂的一部分

以上就是Web的一个概括，迷失了吗？我们都有迷失，但是你已经读到了这，你已经了解了难懂的一部分。我在这里显然跳过了一些细节，以一种有趣的方式向你展示它的全图，但是如果你的思路能跟上上面概述的基本顺序，那细节上的填补将是小菜一碟。

 

在下一部分，我们将处理基本web应用程序的结构。