(译)Web是如何工作的:给Web开发新手的初级读物

时间:2021-08-12 09:56:44
 
如果你刚开始学习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
(译)Web是如何工作的:给Web开发新手的初级读物
 
2、浏览器解析这个URL所包含的信息。这个URL包含了使用的协议(“https”),主机名(github.com)以及资源(“/”)。在这个例子中,“.com”后面没有任何东西去指向一个特指的资源,所以浏览器就知道只检索主页。
(译)Web是如何工作的:给Web开发新手的初级读物
 
3、浏览器与ISP通信,通过DNS查找主机名为www.github.com的Web服务器所对应的IP地址。DNS服务将先联系根域名服务器,该服务器将查找https://www.github.com,并取得“.com”*域名的域名服务器对应的IP地址,然后将这个IP地址返回给你的DNS服务。DNS服务对“.com”做扩展查询https://www.github.com对应的IP地址。
 
4、一旦ISP接受到目标服务器对应的IP地址,它就会把这个IP地址发送给你的浏览器。
(译)Web是如何工作的:给Web开发新手的初级读物
 
5、你的浏览器将拿这个IP地址和URL中的端口号(HTTP协议默认端口号是80,HTTPS默认端口号是443),打开一个TCP套接字连接。这时,你的浏览器和服务器就建立了连接。
 
6、你的浏览器发送一个HTTP请求至Web服务器,去获取www.github.com的主页。
(译)Web是如何工作的:给Web开发新手的初级读物
 
7、Web服务器接收请求,并查找HTML页面。如果该页面存在,该Web服务器准备响应并把它发回给你的浏览器。如果服务器找不到你请求的页面,它将发送一个404错误消息,404表示“页面未找到”
(译)Web是如何工作的:给Web开发新手的初级读物
 
8、你的浏览器把它接收到的HTML页面从头到尾扫描一遍,并去寻找其它相关的资源,如图片、CSS文件、JavaScript脚本文件等等。
 
(译)Web是如何工作的:给Web开发新手的初级读物
9、在网页中涉及的其它资源,服务器会重复上面的步骤去发起HTTP请求每个相应的资源。
 
10、一旦浏览器加载完HTML涉及到的所有资源,页面最终会加载在浏览器窗体里,并关闭与服务器的连接。
(译)Web是如何工作的:给Web开发新手的初级读物
 
 

跨越互联网的深渊

一件值得注意的是,当你发起一个请求时,你请求获取的信息是如何传送的。当你发起一个请求,这些信息是拆分成许多小块的,我们称之为包,每一个包包含TCP头部,这个头部里包含了源主机和目的主机的端口号,以及IP头部包含源主机和目的主机的IP地址。然后这个包通过以太网、WiFi和蜂窝网络传输,并允许在任何路径上进行传输,并在到达最终目的地时获取尽可能多的跳转。
(事实上我们并不关心包是如何到达目的地的,我们关心的是这些包能够安全地传送到目的主机),一旦这些包到达目的主机,它们将再次组合起来,当成一个整体进行传送。
 
那么所有这些包是怎么知道它们应如何到达目的主机,而不丢失任何包的呢?
答案就是TCP/IP。
TCP/IP是两部分组成的,它的功能是作为因特网的基本“控制系统”。IP表示因特网互联协议,它的主要任务是通过每个包的IP头部(例如IP地址)去发送和寻找路径传送到其它电脑。第二部分是传输控制协议(TCP),它的任务是拆分信息或者是把文件拆成小包,通过TCP头部把包路由至目的电脑相应的应用上,如果包发生丢失时,就重新发送,一旦当他们都到达另一端时,就按正确的顺序组装起来。
 

描绘最终的图形

等等,任务还未完成。现在你的浏览器已经取得了网站首页的全部资料(HTML、CSS、JavaScript、图片等等),它还得经过几步把这些资源以人可读的网页的方式呈现。
你的浏览器有一个渲染引擎,它就是负责展示内容的。这个渲染引擎以小块的方式接受所有资源的内容,然后通过HTML解析算法告诉浏览器如何解析这些资源。
 
一旦解析完成,它会生成一个由DOM元素组成的结构树,DOM代表文档对象模型,它是在HTML文档中如何呈现所有对象位置的一种约定。每个文档中的对象或者说节点,可以使用脚本语言,如JavaScript,去操作它们。
(译)Web是如何工作的:给Web开发新手的初级读物
构建了DOM树之后,将对样式表进行解析,以了解如何对每个节点进行样式化。使用上面的信息,浏览器从上至下遍历DOM节点,并计算每个节点的CSS样式、位置、坐标等等。
一旦浏览器取得了DOM节点和它们的样式,它最终根据你的屏幕准备绘制页面。最终页面就是你之前在网络上看到的页面一样。
 
Web是复杂的,但是你已经了解了其中难懂的一部分
以上就是Web的一个概括,迷失了吗?我们都有迷失,但是你已经读到了这,你已经了解了难懂的一部分。我在这里显然跳过了一些细节,以一种有趣的方式向你展示它的全图,但是如果你的思路能跟上上面概述的基本顺序,那细节上的填补将是小菜一碟。
 
在下一部分,我们将处理基本web应用程序的结构。