How the Web works

客户端和服务器

Client connect Server

  • 客户端是典型的网络用户的互联网连接设备(例如,你的电脑连接到 Wi-Fi,或者你的手机连接到移动网络),以及这些设备上可用的网络访问软件(通常是 Firefox 或 Chrome 这样的网络浏览器)。

  • 服务器是存放网页、站点和应用的地方。当客户端设备想访问一个网页时,服务器会把网页的拷贝发送到客户端,用来显示在用户的网络浏览器上。

想像一下,在一条长长的马路(Web)上,客户端就像你位于马路一端的家,服务器如同位于马路另一端的商店。

除此之外,我们还需要通过以下概念的作用,来达到正常访问网页的目的:

  • 你的网络连接:允许你收发来自网络的数据。就像你的房子和商店之间的那条街

  • TCP/IP:传输控制协议和网际协议是沟通协议,它们定义数据应该如何在网络中传输。这像某种运输机制,让你下订单,去商店,并购买你的商品。在例子中,它可能是汽车或自行车等工具

  • DNS:域名系统就像网站的地址簿。当你输入想访问的网站时,浏览器会在域名系统中寻找网站的真正地址,在它找到网站以前。浏览器需要找到网站所在的服务器,这样就能够给服务器发送 HTTP 消息。这就像寻找商店地址,这样你就能进去购物

  • HTTP:超文本传输协议是一个应用层协议,它为客户端和服务器的互相通信定义了一种语言。这就像你订货时使用的语言

  • Component files:一个网站由很多不同的文件构成,这就像你从商店购买不同的商品一样。这些文件主要分为两种:

    • 代码文件:网站主要使用 HTML,CSS,JavaScript 构建

    • 附件(Assets):这是构成一个网站的所有其他东西的统称,比如,图片、音乐、视频、 Word 文档和 pdf 文件

当访问网页时究竟发生了什么

  1. 浏览器向 DNS 服务器询问要访问网站的真正服务器地址

  2. 浏览器向服务器发送 HTTP 请求消息,请求发送一个网站备份给客户端。使用 TCP/IP 协议通过你的网络连接互传这个消息以及其他用于客户端和服务器通信的数据

  3. 如果服务器批准客户端的请求,服务器会发送“200 OK”给客户端,意思是:当然,你可以访问这个网站!给你。服务器把网站文件分成被称为数据包的小块,然后发送小块到浏览器

  4. 浏览器组装小块后,把一个完整的页面呈现给访问者

解析组件文件的顺序

  • HTML 文件最先被解析

  • HTML 解析完成后,DOM 树结构也已经生成。链接的 CSS 被解析,样式被应用于 DOM 树的合适位置。这时,页面的视觉呈现被画在屏幕上,用户就可以看到

  • HTML 和 CSS 被渲染后,JS 通常在此时解析并应用于页面

解释 DNS

真正的 Web 地址是一串数字,不好看也不容易记忆。它们是 IP 地址。它代表网络中的唯一位置。这就是 DNS 存在的原因:DNS 想一个地址簿把域名和 IP 地址联系起来。网站有两种访问方式:IP 地址和域名。

解释 Packets

首先,数据在网络中传输是以块的形式的。有多种原因导致数据以小包的形式发送。它们有时可能会丢失/中断,当这种情况发生时小包很容易替换。另外,数据包可以沿不同的路径传送,使交换更快,并允许许多不同的用户同时下载同一网站。如果每个网站作为一个大块传输,一次只有一个用户能够下载,这明显会降低效率,而且使用起来不那么有趣。

ref: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works