网络如何工作

docs.scrimba.com

你打开的每个页面都遵循相同的简短旅程。你通过地址请求某些内容，某处的机器发回一个文本文档，你的浏览器将该文本转换为你看到的页面。HTML 是该文本所用的语言，因此了解它所经历的旅程是本手册中所有其他内容的基础。

客户端和服务器

网络是两方之间的对话。你的浏览器是**客户端：请求页面的程序。持有网站并将其交付出去的机器是服务器**。你请求，它回答。

想象在餐厅点餐。你是顾客，厨房看不见，服务员在你和厨房之间来回奔跑。你不会走进厨房自己做饭。你点一道菜，厨房准备好后把它送出来。你的浏览器是顾客，服务器是厨房，网络是在它们之间奔跑的服务员。

每次页面加载都是**客户端与服务器**对话。客户端是发出请求的程序，几乎总是浏览器，但也可以是移动应用或命令行工具。服务器是某台机器上运行的程序，等待请求并发回响应。

这种关系最初是单向的：客户端总是首先发言。服务器不会凭空向你推送页面。它坐着等待，直到客户端请求某些内容，然后它回复。一个服务器同时为数千个客户端服务，这就是为什么单个网站可以从同一地址服务许多访问者。

客户端和服务器是角色，不是固定的机器。客户端是发起请求的任何东西；服务器是监听请求并返回响应的任何东西。同一台物理计算机可以在一个连接中是服务器，在另一个连接中是客户端，例如一个本身调用数据库的网络服务器。

该模型在其核心是请求驱动且无状态的。无状态意味着服务器将每个请求视为独立完成：默认情况下，不会记住前一个请求的任何内容。这就是为什么在后续请求中必须重新建立登录，通常使用客户端每次发送的 cookie 或令牌，因为连接本身不会保留任何记忆。保持协议无状态是让一个服务器能够扩展到巨大流量的原因，因为它不需要为两个请求之间的每个访问者保持一个开放的上下文线程。

Juno客户端和服务器 两方，一次对话：你的浏览器是提出请求的客户端，服务器是回答的机器。就像顾客和厨房中间有服务员一样，你永远不会走进厨房，你下单，食物就出来了。记住这个画面，本页上的所有其他内容都是它的一个版本。

Juno客户端和服务器 客户端问，服务器答，客户端总是首先发言。一个服务器同时处理许多客户端，这就是单个地址如何为大量访问者服务。当某些东西加载时，你看到的是该来回的一个往返。

Juno客户端和服务器 客户端和服务器是角色，不是盒子，同一台机器可以扮演两种角色。网络默认是无状态的，因此服务器在两个请求之间什么都不记得，除非客户端每次重新发送证明，这就是 cookie 或令牌所做的。无状态性不是需要绕过的限制，它是让一个服务器能够承受真实流量的原因。

URL 和域名

你输入的地址是一个**URL**：统一资源定位符。它是网络上一个东西的完整地址，就像邮政地址指向一所房子一样。

看看 https://scrimba.com/learn。https 部分是浏览器应该如何与服务器通信。scrimba.com 部分是域名，网站的名称，就像街道和城镇。/learn 部分是到一个特定页面的路径，就像房号。一起，它们指向一个确切的页面，输入它们会告诉浏览器去哪里。

一个**URL** 由多个部分组成，命名它们可以使整个事情更容易阅读。拿 https://scrimba.com/learn/html：

• https 是方案：浏览器用来获取页面的协议。
• scrimba.com 是域名：网站的人类可读名称。
• /learn/html 是路径：该网站上的哪个页面。

域名是一个数字的友好替代品。每个服务器都可以通过IP 地址到达，一个像 192.0.2.10 这样的字符串，域名是使你不必记住它的东西。当你输入一个域名时，浏览器通过DNS（域名系统）查找其 IP 地址，它的工作原理就像一个电话簿，将名称转换为数字。

一个**URL** 包含浏览器定位资源所需的所有内容，每个段都有一个作用。在 https://shop.example.com:443/products?id=42#reviews 中：方案是 https，shop 是子域，example.com 是注册域，443 是端口，/products 是路径，?id=42 是查询字符串，#reviews 是片段。

端口是服务器上编号的门（443 是 HTTPS 的默认值，所以通常被省略）。查询字符串将参数传递给服务器，这可以改变它返回的内容。片段在 # 之后由浏览器单独处理，永远不会发送到服务器；它指向页面内的位置。解析域名为 IP 地址通过DNS（域名系统，网络的名称到数字的目录）进行，该查询本身就是一个网络往返，所以冷 DNS 解析是用户在第一个字节到达之前要付出的延迟。了解解剖结构是实用的：它告诉你服务器可以看到什么（路径和查询），看不到什么（片段），以及缓慢的首次加载可以隐藏在哪里。

JunoURL 和域名 URL 是一个页面的完整地址。https 说明了如何与服务器通信，像 scrimba.com 这样的域名是网站的名称，像 /learn 这样的路径指向该网站上的一个页面。从左到右阅读，它会告诉你浏览器的确切去向。

JunoURL 和域名 URL 分为方案、域名和路径，一旦你看到这些部分，你就可以一眼读出任何地址。域名是一个数字的友好名称：DNS 是将 scrimba.com 转换为浏览器实际可以到达的 IP 地址的电话簿。该查询在页面加载之前静静进行。

JunoURL 和域名 URL 的每个部分都有其位置：方案、子域、域、端口、路径、查询、片段。服务器看到路径和查询，但永远看不到片段，因为 # 之后的部分留在浏览器中。而且 DNS 解析是真正的往返，所以冷查询是用户在第一个字节之前要付出的延迟，这在首次加载感觉缓慢时值得记住。

请求和响应周期

当你按下 Enter 时，你的浏览器向服务器发送一个**请求：一个短消息，说"请发给我这个页面"。服务器发回一个响应**：页面本身。那个来回是一个完整的往返，这就是每次打开页面或点击链接时发生的情况。

想象要求图书管理员借一本书。你给出书名（你的请求），图书管理员找到它并把它交给你（响应），现在你手里有了。如果这本书不存在，图书管理员告诉你这一点，这也是一个回复。网络的工作原理相同，快得多，每秒多次。

页面加载是一个**请求和一个响应**。浏览器发送一个请求，命名它想要的页面以及它想要的方式；服务器发回一个响应，包含页面，加上一个状态码，说明请求进行得如何。

你会经常看到三个状态码，所以首先要学会这些：

• 200 OK：成功了，这是你要求的东西。
• 404 Not Found：服务器没问题，但该地址没有任何东西。
• 301 Moved Permanently：这个页面现在住在其他地方，浏览器应该跟随到新地址。

服务器为普通页面发回的东西不是页面的图片。它是用 HTML 编写的纯文本文档，与你手写的标签相同。浏览器接收该文本并从中构建可见页面。

请求和响应周期由 HTTP（超文本传输协议）定义：客户端和服务器如何表达其消息的商定规则集。请求携带方法（动词：GET 获取，POST 发送数据）、路径和标头（元数据名称和值对，例如客户端接受哪些格式）。响应携带状态码、它自己的标头，通常还有主体（实际内容）。

状态码分范围，范围告诉你要查看谁。2xx 是成功（200 OK）。3xx 是重定向（301 Moved Permanently 告诉浏览器和搜索引擎资源有一个新的规范地址，所以对 SEO 来说是值得正确获取的）。4xx 是客户端错误，意味着请求出错（404 Not Found、403 Forbidden）。5xx 是服务器错误，意味着请求没问题但服务器失败了（500 Internal Server Error）。这种区分是实用的：4xx 指向你的请求，5xx 指向服务器。文档的响应主体是 HTML 文本，Content-Type 标头是告诉浏览器将其视为 HTML 而不是纯文本或图像的东西。还有一行值得知道：HTTP 通过网络发送所有可读的东西，而 HTTPS 用加密包装相同的协议，这样中间的任何人都无法读取或篡改它，这就是为什么现在每个真正的网站都使用 HTTPS。

Juno请求和响应周期 每个页面都是一个往返：你的浏览器发送一个请求，说请发给我这个，服务器用页面发回响应。就像要求图书管理员借一本书并把它交给你，或被告知它不在这里一样。那个往返每次你打开页面时都会静静地、快速地发生。

Juno请求和响应周期 一个请求出去，一个响应回来，附带状态码。首先学习 200（成功）、404（该地址没有东西）和 301（移动，跟随我），它们涵盖了你将看到的大部分情况。记住页面实际返回的是纯 HTML 文本，不是图片，浏览器然后将其构建为视图。

Juno请求和响应周期 HTTP 是这次旅行的语法：请求有方法、路径和标头，响应有状态码、标头和主体。按范围读取状态码，4xx 意味着修复请求，5xx 意味着服务器出现故障，这个分割告诉你要查看的位置。主体是由 Content-Type 标记的 HTML 文本，HTTPS 是围绕它包装了加密的 HTTP，这就是为什么每个真正的网站都使用它。

浏览器如何处理它接收的 HTML

响应是一个页面的 HTML 文本。你的浏览器从上到下读取该文本并在屏幕上绘制：它看到一个标题标签并显示粗体大字，它看到一个段落标签并显示一行正文，它看到一个图像标签并获取图片。

你可以把它想象成阅读食谱并烹饪它。文本不是餐厅，它是对餐厅的描述，浏览器是将描述转化为你实际可以看到和使用的东西的厨师。相同的 HTML 总是产生相同的页面，因为浏览器每次都遵循相同的指令。

浏览器不显示 HTML 文本，它从它构建一个页面。当它从上到下读取文档时，它将标签转换为**DOM**，文档对象模型：一个页面元素的实时树，保存在内存中。DOM 是实际显示的东西，也是 CSS 和 JavaScript 稍后读取和更改的东西。

顺序在这里很重要。浏览器按照你写的顺序读取文档，所以靠近顶部的 <script> 或样式表在它下面的内容之前处理。这是页面将有关页面的信息放在 <head> 中，将其可见内容放在 <body> 中的实际原因，也是为什么标签的放置位置影响其效果发生的时间。你不仅仅是列出元素，你给浏览器一个阅读顺序。

将 HTML 转换为像素是一个管道，了解其形状可以告诉你为什么某些页面绘制速度较慢。浏览器解析 HTML 文本（读取它并构建结构）进入**DOM（文档对象模型：每个元素的内存中树）。它将 CSS 解析为平行树，组合两者，计算几何（布局：每个盒子的位置），最后向屏幕绘制**像素。

因为解析器从上到下读取，放置改变时间。当浏览器在完成该资源之前不会绘制内容时，资源是渲染阻止。<head> 中的样式表是渲染阻止设计，所以页面不会闪现无样式，但一个缓慢的样式表会阻止整个首次绘制。<head> 中的经典 <script> 更糟：解析器停止，下载并运行脚本，然后继续，所以文档高处的脚本会延迟它下面的每个元素（defer 和 async 属性存在是为了打破这种阻止）。这就是为什么文档顺序和 <head> 放置决定首次绘制的东西：渲染阻止资源上方的所有东西都在它上等待。

这与延迟相连，字节到达用户所需的时间，没有任何本地速度可以消除。每个请求都有往返成本，所以更少的请求和更小、更早的字节意味着页面开始绘制更早。更少和更早的字节是该层的整个性能游戏。你在 HTML 中控制的杠杆是顺序：将用户需要首先看到的东西放在文档的高处，让阻止资源远离它，而首次有意义的绘制会更早到达。

Juno浏览器如何处理它接收的 HTML 返回的 HTML 是对页面的描述，浏览器是将其转化为真实事物的厨师。它从上到下读取：标题标签、粗体大字、段落标签、正文、图像标签、获取图片。相同的 HTML 进来，相同的页面出来，每次都是。

Juno浏览器如何处理它接收的 HTML 浏览器从上到下读取你的 HTML 并构建 DOM，一个元素的实时树，这是实际显示的东西。因为它按顺序读取，你放置标签的位置决定了它何时生效，这是 head 和 body 分割的真实原因。你在给浏览器一个阅读顺序，而不仅仅是一堆元素。

Juno浏览器如何处理它接收的 HTML 解析到 DOM，与 CSS 组合，布局，绘制：该管道是为什么放置改变时间。渲染阻止资源上方的任何东西都在它上等待，所以 head 中的缓慢样式表或普通 <script> 会阻止首次绘制，这就是 defer 和 async 的用途。加上你无法消除的延迟，举动总是相同的，更少和更早的字节，重要的东西放在文档的高处。