type
status
date
slug
summary
tags
category
icon
password
万维网和互联网

1. 万维网

这篇文章简单描述了你在计算机或手机上通过浏览器访问网页时发生了什么。
这个理论在短期内对你编写网页代码不会有实质性的帮助,但是不久之后你就会真正受益于理解了后台究竟发生了什么。

客户端和服务器

连接到互联网的计算机被称作客户端和服务器。下面是一个简单描述它们如何交互的图表:
notion image
  • 客户端是典型的 Web 用户入网设备(比如,你连接了 Wi-Fi 的电脑,或接入移动网络的手机)和设备上可联网的软件(通常使用像 Firefox 和 Chrome 的浏览器)。
  • 服务器是存储网页,站点和应用的计算机。当一个客户端设备想要获取一个网页时,一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示。

其他部分

上文所述的客户端和服务器并不能完成全部工作。还有其他必要的部分,我们将在下面讲述。
现在,让我们假设 Web 就是一条路。路的一端是客户端,就像你的家。另一端则是服务器,就像你想去的商店。
notion image
除了客户端和服务器,我们还需要了解:
备注: 我感觉下面的比喻还不是很契合。我感觉再合理一点的比喻:
假如你生活在一个封闭的村子叫做“盘溪新村”,村子盛产苹果。
  • 互联网:好比地球上纵横交错的道路。
  • 网络连接:道路通到了村子路口。从此,村子里的苹果就可以运出去卖了。
  • TCP/IP:为了将村里的苹果能规范有效的运卖出去而不出问题,村长作出如下规定:“用规格刚好 20 cm * 20 cm * 20 cm 的泡沫箱来装,之后外面又用相应规格的纸箱包裹上,最后打上透明胶”。并且要求,对方收到时,一定要外包装完好,不然就会补发。而且还给对方发了一张发货单,明确说明了,苹果有多少,是用什么方法包装的,只有货和发货单对上了,对方才会确认收货。
  • DNS:突然一天,郭德纲想吃苹果,就跟于谦说,“我听说盘溪新村(域名)的苹果好,要他们那个套餐一选项啊!”,于谦一听,得,也不知道盘溪新村在哪,打开地图查(DNS)吧,一查,好嘛,江苏省苏州市(IP 地址),于是于谦去了苏州,找了村子,告诉村长,要套餐一,要用顺丰快递,并且留下了北京德云社的地址。
  • HTTP:过了几天,德云社的人一看,有快递来了,来了这么一句,“只收‘顺丰’,拒收其他快递”。司机忙说,“是顺丰,是顺丰”,这才对上暗号,德云社的人收下了货。
  • 组成文件:送来的货可不止一车,而且也不止一种苹果,这车是红富士,那车黄富士的。
    • 代码:有点像,村长事先安排的说明书,让司机到了地方,如何卸车,货放到什么位置,而德云社的看说明书,知道什么样的苹果放到什么位置上,什么样苹果如何食用最佳,等等。
    • 资源:不同种类的苹果。
一点拙见,在下抛砖引玉,希望有更好理解的比喻。
  • 网络连接: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。
  • TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式,比如汽车或自行车(或是你能想到的其他可能)。
  • DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时,浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器,才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。
  • HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议(protocol )。就像你下订单时所说的话一样。
  • 组成文件: 一个网页由许多文件组成,就像商店里不同的商品一样。这些文件有两种类型:
    • 代码 : 网页大体由 HTML、CSS、JavaScript 组成,不过你会在后面看到不同的技术。
    • 资源 : 这是其他组成网页的东西的集合,比如图像、音乐、视频、Word 文档、PDF 文件。

到底发生了什么?

当你在浏览器里输入一个网址时(在我们的例子里就是走向商店的路上时):
  1. 浏览器在域名系统(DNS)服务器上找出存放网页的服务器的实际地址(找出商店的位置)。
  1. 浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端(你走到商店并下订单)。这条消息,包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
  1. 服务器同意客户端的请求后,会返回一个“200 OK”信息,意味着“你可以查看这个网页,给你~”,然后开始将网页的文件以数据包的形式传输到浏览器(商店给你商品,你将商品带回家)。
  1. 浏览器将数据包聚集成完整的网页然后将网页呈现给你(商品到了你的门口——新东西,好棒!)。

解析组成文件的顺序

当浏览器向服务器发送请求获取 HTML 文件时,HTML 文件通常包含 <link> 和 <script> 元素,这些元素分别指向了外部的 CSS 样式表文件和 JavaScript 脚本文件。了解这些文件被浏览器解析的顺序是很重要的:
  • 浏览器首先解析 HTML 文件,并从中识别出所有的 <link> 和 <script> 元素,获取它们指向的外部文件的链接。
  • 继续解析 HTML 文件的同时,浏览器根据外部文件的链接向服务器发送请求,获取并解析 CSS 文件和 JavaScript 脚本文件。
  • 接着浏览器会给解析后的 HTML 文件生成一个 DOM 树(在内存中),会给解析后的 CSS 文件生成一个 CSSOM 树(在内存中),并且会编译和执行解析后的 JavaScript 脚本文件。
  • 伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件,浏览器会在屏幕上绘制出网页的界面;用户看到网页界面也就可以跟网页进行交互了。

DNS 解析

真正的网址看上去并不像你输入到地址框中的那样美好且容易记忆。它们是一串数字,像 63.245.217.105
这叫做 IP 地址,它代表了一个互联网上独特的位置。然而,它并不容易记忆,不是吗?那就是域名系统(DNS)被发明的原因。它们是将你输入浏览器的地址(像 "mozilla.org")与实际 IP 地址相匹配的特殊的服务器。
网页可以通过 IP 地址直接访问。你可以通过在 DNS 查询工具 等工具中输入域名来查找网站的 IP 地址。

数据包详解

前面我们用“包”来描述了数据从服务器到客户端传输的格式。这是什么意思?基本上,当数据在 Web 上传输时,是以成千上万的小数据块的形式传输的。大量不同的用户都可以同时下载同一个网页。如果网页以单个大的数据块形式传输,一次就只有一个用户下载,无疑会让 Web 非常没有效率并且失去很多乐趣。
 

2. 互联网

这篇文章讨论什么是互联网以及它是如何工作的。

概述

互联网是网络的支柱,以这种技术为基础使网络成为可能。作为基础,互联网是把电脑互相连接起来的一个巨大网络。
互联网的历史有些模糊不清。它始于 1960 年美国军方资助的研究项目。1980 年在许多公共大学和公司的支持下,它演变为一种公共基础设施。随着时间的变化,各种各样的技术支持着互联网的发展,但是它的工作方式却没有改变多少:互联网确保所有的电脑之间的连接,无论发生什么他们依旧保持连接。

自主学习

深入探索

一个简单的网络

当两台电脑需要通信的时候,你必须要连接他们,无论通过有线方式 (通常是网线) 还是无线方式(比如 WiFi 或 蓝牙 )。所有现代电脑都支持这些连接。
备注: 接下来的内容,我们将只谈论有线连接,而无线连接的原理与此相同。
notion image
通常一个网络不仅限于两台电脑。你可以尽你所想地连接电脑,但是情况立刻变得复杂了。如果你尝试连接,比如说十台电脑,每台电脑有九个插头,总共需要 45 条网线。
notion image
为了解决这个问题,网络上的每台电脑需要链接到一个叫做路由器(router)的特殊小电脑。路由器只干一件事:就像火车站的信号员,它要确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑 B,电脑 A 必须把信息发送给路由器,路由器将收到的信息转发给电脑 B,并且确保信息不会发送给电脑 C。
一旦我们把路由器加入到这个系统,我们的网络中便只需要十条网线:每台电脑一个插口,路由器上十个插口。
notion image

网络中的网

到目前为止一切都很好 . 但是我们要连接成百上千,上亿台电脑呢?当然一台路由器覆盖不了这么远,但是,如果你阅读得比较认真,我们曾提到路由器像其他电脑一样,所以我们为什么不把两个路由器彼此连接呢?
notion image
我们把电脑连接路由器,接着路由器连接路由器,我们就会有无穷的规模。
notion image
这样网络越来越接近我们所说的互联网,但是我们遗漏了一些东西。我们建立网络是为了我们自己的目的。所以不同的人会建立不同的网络:你的朋友,你的邻居,每个人都可以拥有自己的计算机网络。在你的房子和世界其他地方之间架设电缆将这些不同的网络连接起来是不可能的,那么你该如何处理这件事呢?其实已经有电缆连接到你的房子了,比如,电线和电话。电话基础设施已经可以把你家连接到世界的任何角落,所以它就是我们需要的线。为了连接电话这种网络我们需要一种基础设备叫做调制解调器(modem),调制解调器可以把网络信息变成电话设施可以处理的信息,反之亦然。
notion image
这样,我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些,我们需要把我们的网络连接到互联网服务提供商(ISP)。ISP 是一家可以管理一些特殊的路由器的公司,这些路由器连接其他 ISP 的路由器。你的网络消息可以被 ISP 捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。
notion image

寻找电脑

如果你想给一台电脑发送一条信息,你必须指明它是哪台电脑。因此,任何连接到网络中的电脑都需要有一个唯一的地址来标记它,叫做 "IP 地址" (IP 代表网络协议)。这个地址由四部分被点分隔的数字序列组成,比如:192.168.2.10
对于电脑这样已经很好了,但是人类却很难记忆这一串地址。为了简单处理,我们给 IP 地址取一个容易阅读的别名:域名。比如,google.com 被用于 IP 地址 172.217.7.14。这样我们通过这些域名可以很容易的通过网络连接到电脑。

互联网(Internet)和网络(web)

你可能注意到了,当我们通过浏览器上网的时候,我们通常是用域名去到达一个网站。这是否意味着互联网(Internet)和网络(Web)是一样的?事实并非这么简单。正如向我们所见,互联网是一种基础的技术,它允许我们把成千上万的电脑连接在一起。在这些电脑中,有 一些电脑(我们称之为网络服务器(Web servers))可以发送一些浏览器可以理解的信息。互联网是基础设施,网络是建立在这种基础设施之上的服务。值得注意的是,一些其他服务运行在互联网之上,比如邮箱和IRC.

内联网和外联网

内联网(Intranet)是仅限于特定组织成员使用的专用网络。它们通常用于为成员提供一个门户,以便安全地访问共享资源、进行协作和交流。例如,一个组织的内联网可能包含用于共享部门或团队信息的网页、用于管理关键文档和文件的共享驱动器、用于执行业务管理任务的门户网站,以及维基、讨论板和消息系统等协作工具。
外联网(Extranet)与内联网非常相似,只是它们开放了全部或部分专用网络,允许与其他组织共享和协作。外联网通常用于安全可靠地与客户和与企业密切合作的利益相关者共享信息。其功能通常与内联网类似:信息和文件共享、协作工具、讨论板等。
内联网和外联网都在与互联网相同的基础设施上运行,并使用相同的协议。因此,经授权的成员可以从不同的物理位置访问它们。
notion image
 
前端技术脑图元素
  • Giscus
  • Utterance