From d7e50f78881ed0b48355860ba9cbf2887b0581a2 Mon Sep 17 00:00:00 2001 From: dEthan3 Date: Thu, 28 Nov 2024 13:24:16 +0800 Subject: [PATCH] =?UTF-8?q?[zh]=20=E8=AE=BF=E9=97=AE=E7=BD=91=E7=AB=99?= =?UTF-8?q?=E6=97=B6=E4=BC=9A=E5=8F=91=E7=94=9F=E4=BB=80=E4=B9=88=EF=BC=9F?= =?UTF-8?q?=E7=BD=91=E7=BB=9C=E8=BF=90=E8=A1=8C=E5=8E=9F=E7=90=86=E8=AF=A6?= =?UTF-8?q?=E8=A7=A3=20(#543)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [draft] what-happens-when-you-visit-a-website * [translate] what-happens-when-you-visit-a-website * Update 543 --- .../what-happens-when-you-visit-a-website.md | 435 +++++++++--------- 1 file changed, 211 insertions(+), 224 deletions(-) diff --git a/articles/zh/what-happens-when-you-visit-a-website.md b/articles/zh/what-happens-when-you-visit-a-website.md index 818fe69..d03587a 100644 --- a/articles/zh/what-happens-when-you-visit-a-website.md +++ b/articles/zh/what-happens-when-you-visit-a-website.md @@ -1,272 +1,257 @@ --- - -title: 访问网站时会发生什么？网络如何运作详解 - +title: 访问网站时会发生什么？网络运行原理详解 date: 2024-11-19T09:53:40.335Z - author: Viviana Yanez - authorURL: https://www.freecodecamp.org/news/author/vivianay/ - originalURL: https://www.freecodecamp.org/news/what-happens-when-you-visit-a-website/ - -posteditor: "" - +posteditor: "yiwei" proofreader: "" - --- -在本文中，我将指导您了解使用浏览器导航至网站时会发生的情况概述。 +在这篇文章中，我将引导你了解使用浏览器访问网站时发生的整个过程。 -无论您是网络开发新手还是有一些经验，本篇文章都将帮助您更好地理解网络及其核心技术的工作原理。 +无论你是刚接触 web 开发还是已经有一些经验，这篇文章都将帮助你更好地理解网络及其核心技术的工作原理。 ## 目录 -- [找到资源：URL][1] - -- [匹配 IP 与 URL：DNS 解析][2] - - - [什么是 DNS 解析器？][3] - - - [什么是根 DNS 服务器？][4] - - - [什么是顶级域名服务器？][5] - - - [权威名称服务器][6] - -- [建立连接：TCP/IP 模型][7] - - - [TCP 连接如何工作？][8] - - - [TCP 三次握手][9] - -- [开始交流：客户端-服务器通信][10] - - - [什么是 HTTP 协议？][11] - - - [HTTP 请求/响应][12] - - - [HTTPS][13] - - - [首字节时间][14] - -- [从数据到像素：关键渲染路径][15] - - - [构建 DOM 树][16] - - - [构建 CSSOM 树][17] - - - [JavaScript 编译与执行][18] - - - [构建辅助功能树][19] - - - [渲染树][20] - - - [布局][21] - - - [绘制][22] - - - [关于 JavaScript Hydration 的一点说明][23] - -- [总结][24] +- [资源定位：URL][1] + +- [匹配 IP 和 URL：DNS 解析][2] + - [什么是 DNS 解析器？][3] + - [什么是根 DNS 服务器？][4] + - [什么是顶级域名服务器？][5] + - [权威域名服务器][6] + +- [建立连接：TCP/IP 模型][7] + - [TCP 连接如何工作？][8] + - [TCP 三次握手][9] + +- [开始交换：客户端-服务器通信][10] + - [什么是 HTTP 协议？][11] + - [HTTP 请求/响应][12] + - [HTTPS][13] + - [第一字节时间][14] + +- [从数据到像素：关键渲染路径][15] + - [构建 DOM 树][16] + - [构建 CSSOM 树][17] + - [Javascript 编译和执行][18] + - [构建可访问性树][19] + - [渲染树][20] + - [布局][21] + - [绘制][22] + - [关于 JavaScript 水合的说明][23] + +- [结论][24] -在详细分析过程中每一步之前，让我们先回顾一些我们将会涉及的基本概念。 +在深入介绍过程中的每个步骤细节之前，让我们先回顾一下将会涉及的基本概念。 -互联网是一个由互联计算机组成的巨大网络。万维网（也称为网络）基于该技术构建，并且还有其他服务，例如电子邮件、聊天系统或文件共享等。 +互联网是一个由相互连接的计算机组成的庞大网络。万维网（又称 web）建立在这项技术之上，还有电子邮件、聊天系统或文件共享等其他服务。 -连接到互联网的计算机可以是： +连接到互联网的计算机分为： -- **客户端**，即网络用户的设备和这些设备用来访问网络的软件。 +- **客户端**，web 用户的设备和这些设备用来访问 web 的软件。 -- **服务器**，存储网页、网站或应用程序的计算机及它们需要在用户的网页浏览器或设备中显示的文件。 +- **服务器**，存储网页、网站或应用程序以及在用户的 web 浏览器或设备中显示所需文件的计算机。 -## 找到资源：URL +## 资源定位：URL -存储在服务器中的每个资源都可以通过其有效的关联 URL 被客户端定位。以下是一个有效 URL 的示例： +每个存储在服务器上的资源都可以通过其对应的 URL 被客户端定位。以下是一个有效 URL 的示例： -![有效 URL 示例，包括协议、授权、资源路径、两个参数和一个锚点。](https://cdn.hashnode.com/res/hashnode/image/upload/v1731414821178/970907db-f349-421e-b410-45f4ee978e0b.jpeg) +![一个有效的 URL 示例，包括其机制、授权、资源路径、两个参数和一个锚点。](https://cdn.hashnode.com/res/hashnode/image/upload/v1731414821178/970907db-f349-421e-b410-45f4ee978e0b.jpeg) -您可能已经知道什么是 URL，但让我们详细看看它的每个部分： +你可能已经知道 URL 是什么，但让我们详细看看它的每个组成部分: -- **协议**：URL 的第一部分指示应该使用哪个协议来检索资源。网站使用 HTTP 和 HTTPS 协议，但我们稍后会更详细地讨论这一点。协议后的 `:` 是将其与 URL 下一部分分隔开的符号。 +- **协议类型**： URL 的第一部分表明应该使用哪种协议来获取资源。网站可以使用 HTTP 和 HTTPS 协议，我们稍后会详细介绍。协议类型后面的 `:` 用来分隔 URL 的下一部分。 -- **授权**：这一部分由域名和由冒号分隔的端口号组成。只有当网络服务器没有使用 HTTP 协议的标准端口 （HTTP 是 80，HTTPS 是 443） 时才需要端口。在域名前的 `//` 表示授权的开始。 +- **授权**： 这部分由域名和端口号组成，用冒号分隔。只有当 web 服务器不使用 HTTP 协议的标准端口(HTTP 用 80，HTTPS 用 443)时，端口才是必需的。域名前的 `//` 表示授权的开始。 -- **资源路径**：这是网络服务器中资源的抽象路径或物理路径。 +- **资源路径**： 这是 web 服务器上资源的抽象或物理路径。 -- **参数**：一组键/值对，为返回请求的资源添加额外选项。它们由 `&` 分隔，并且每个网络服务器都有自己的处理参数的方式。该部分以 `?` 开始。 +- **参数**： 一组键/值对，为返回请求的资源添加额外选项。它们用 `&` 分隔，每个 web 服务器都有自己处理参数的方式。这部分以 `?` 开始。 -- **锚点**：如果存在，此部分以 `#` 开始，并由浏览器处理以显示已返回文档的特定部分。例如，它可以指向 HTML 文档中的特定部分。 +- **锚点**： 如果存在，以 `#` 开始，由浏览器处理以显示返回文档的特定部分。例如，它可以指向 HTML 文档中的特定部分。 -当您在浏览器的地址栏中输入 URL 时，会发生一些事情，以便您可以导航到网站并与其内容交互。让我们详细看看每一个。 +当你在浏览器地址栏中输入 URL 时，会发生一些让你能够访问网站并与其内容交互的事情。让我们详细了解每一个过程。 -## 匹配 IP 与 URL：DNS 解析 +## 匹配 IP 和 URL：DNS 解析 -虽然作为人类，我们更喜欢由单词组成的域名，但计算机之间通过使用 IP 地址进行通信。IP 地址由数字组成，对于我们大脑来说更难记住。[域名系统][25]（**DNS**）是将域名和 IP 地址结合在一起的系统。 +虽然作为人类我们更喜欢由单词组成的域名，但计算机之间使用 IP 地址进行通信。IP 地址由数字组成，对人类来说更难记忆。[域名系统](25)（**DNS**）就是将域名和 IP 地址关联起来的系统。 -当您输入 URL 时，浏览器将首先查看本地缓存，以查看 DNS 查找的结果是否已存储。然后，它同样会检查操作系统缓存。 +当你输入 URL 时，浏览器首先会查看本地缓存，检查是否已存储 DNS 查询结果。然后，它还会检查操作系统缓存。 -如果没有存储结果，浏览器将调用 DNS 解析器来尝试查找与域名关联的 IP 地址。 +如果没有存储结果，浏览器将调用 DNS 解析器来尝试找到域名对应的 IP 地址。 ### 什么是 DNS 解析器？ -解析器通常由您的互联网供应商的 DNS 定义，即使这是大多数人使用的默认设置，也可以将其更改为 Google 的或 Cloudflare 的，或任何您想要的其他服务。 - +解析器通常由你的互联网提供商的 DNS 定义。尽管这是大多数人使用的默认设置，但你可以将其更改为 Google、Cloudflare 或其他任何你想要的服务。 +同样，提供商的 DNS 可能在其缓存中存储了域名的结果，如果没有，它会询问根 DNS 服务器。 -```markdown ### 什么是根 DNS 服务器？ -根 DNS 服务器是驱动整个互联网的系统。它由分布在全球的十三台服务器组成。它将来自解析器的查询返回给请求的域名的相关顶级域名服务器。 +根 DNS 服务器是实际驱动整个互联网的系统。它由分布在全球的十三个服务器组成。它会用请求域名的相关顶级域服务器来响应解析器的查询。 -此时，DNS 解析器会缓存该顶级域名服务器的 IP，以便以后不再需要再次请求根 DNS 服务器。 +此时，DNS 解析器会缓存该顶级域服务器的 IP，这样就不必再次向根 DNS 服务器询问。 ### 什么是顶级域名服务器？ -[顶级域名][26]（**TLD**）服务器存储用户要查找的域的权威名称服务器的 IP 地址。 +[顶级域](26)（**TLD**）服务器存储用户所查找域名的权威域名服务器的 IP 地址。 -在 URL `www.exampleurl.com` 中，顶级域名是 `.com`。有不同类型的顶级域名，如通用顶级域名（如 `.com` 或 `.org`），国家代码顶级域名（通常由两位字母的 ISO 国家代码表示）等。 +在 URL `www.exampleurl.com` 中，顶级域是 `.com`。有不同类型的顶级域，如通用顶级域（`.com` 或 `.org`）、通常由两个字母 ISO 国家代码表示的国家代码顶级域等。 -TLD 返回请求域的权威名称服务器。再次，DNS 解析器会缓存这些结果，以便不用再回来请求。 +TLD 返回请求域名的权威域名服务器。DNS 解析器会再次缓存结果，这样以后就不必再回来请求。 -### 权威名称服务器 +### 权威域名服务器 -此服务器包含将域名映射到 IP 地址的 DNS 记录。任何域都附有不止一个名称服务器。 +此服务器包含将域名映射到 IP 地址的 DNS 记录。每个域名都有多个域名服务器。 -因为权威名称服务器是最高权限，也是 DNS 解析链中的最新环节，该阶段不涉及缓存。 +此时不涉及缓存，因为权威域名服务器是最高权威机构，也是 DNS 解析链的最后一环。 -如果 IP 地址可用，权威名称服务器会以域名的 IP 地址回应 DNS 解析器的查询。如果不可用，则会以错误回应。然后，DNS 解析器存储 IP 地址并将其发送回客户端的浏览器。 +如果 IP 地址可用，权威域名服务器会用域名的 IP 地址响应 DNS 解析器查询。如果不可用，则会返回错误。然后，DNS 解析器存储 IP 并将其发送回客户端浏览器。 -一旦 DNS 查找完成且浏览器获取了 IP 地址，便可以尝试与服务器建立连接。 +一旦 DNS 查询完成且浏览器获得 IP 地址，它就可以尝试与服务器建立连接。 ## 建立连接：TCP/IP 模型 -客户端和服务器之间的连接是通过[传输控制协议][27]（**TCP**）和[互联网协议][28]（**IP**）建立的。这些协议是万维网及其他互联网技术（如电子邮件）的基础，它们决定了数据如何在网络中传输。 +客户端和服务器之间的连接使用[传输控制协议](27)（**TCP**）和[互联网协议](28)（**IP**）建立。这些协议是万维网和其他互联网技术（如电子邮件）背后的主要协议，它们决定了数据如何在网络上传输。 -[TCP/IP 模型][29]是一个用于组织互联网及其他网络通信中涉及的不同协议的框架。TCP/IP 的主要职责是将数据分成数据包并发送到其最终目的地，确保数据包在通信的另一端能重新组合。 +[TCP/IP 模型](29)是一个用于组织互联网和其他网络通信中不同协议的框架。TCP/IP 的主要责任是将数据分成数据包并将其发送到最终目的地，确保数据包可以在通信的另一端重新组装。 -这一过程遵循一个四层模型，数据沿一个方向传输，达到目的地后再按相反方向传输： +这个过程遵循四层模型，数据在一个方向上传输，到达目的地后再反向传输： -![四层模型包括应用层、传输层、互联网层和网络层。数据在这些层间来回传输。](https://cdn.hashnode.com/res/hashnode/image/upload/v1731414848576/178ce64e-2216-487a-b142-c88c2125dcde.jpeg) +![四层模型包括应用层、传输层、互联网层和网络接口层。数据在这些层间来回传输。](https://cdn.hashnode.com/res/hashnode/image/upload/v1731414848576/178ce64e-2216-487a-b142-c88c2125dcde.jpeg) -传输层确保应用程序可以通过建立数据通道进行数据交换。它也是引入网络端口概念的层，这是一个为特定通信通道分配的编号数据通道系统，应用程序所需的通信通道。 -TCP/IP 模型的传输层包括两种互联网中最常用的协议：TCP 和[用户数据报协议][30]（UDP）。 +传输层确保应用程序可以通过建立数据通道来交换数据。它还建立了网络端口的概念，这是一个为应用程序需要的特定通信通道分配的编号数据通道系统。 -TCP 包含一些功能，使其在大多数基于互联网的应用程序（如 Web）中占据主导地位，因此我们将重点关注它。 +TCP/IP 模型的传输层包括互联网上最常用的两个协议：TCP 和[用户数据报协议](30)（UDP）。 -### TCP 连接是如何工作的？ +TCP 包含一些功能，使其在大多数基于互联网的应用程序中普遍存在，所以我们重点讨论它。 -TCP 允许数据可靠且按顺序地传输到其目的地。它是一个面向连接的协议，这意味着发送者和接收者必须在真正建立连接之前就连接参数达成一致。这个过程被称为握手程序。 +### TCP 连接如何工作？ + +TCP 允许数据可靠且有序地传输到目的地。它是一个面向连接的协议，这意味着发送者和接收者必须在实际建立连接之前就连接参数达成一致。这个过程被称为握手程序。 ### TCP 三次握手 -握手是客户端和服务器建立安全连接并确保双方同步并准备好开始交换消息的一种方式。 +握手是客户端和服务器建立安全连接并确保双方同步和准备好开始交换消息的方式。 + +![The three steps of the TCP handshake.](https://cdn.hashnode.com/res/hashnode/image/upload/v1731414866173/6d66c360-2d2e-427b-8c8d-1555fdaa7197.jpeg) + +TCP 握手包括三个步骤： + +1. 客户端通过发送 SYN（同步）数据包通知服务器它想建立连接。这个数据包指定后续段将开始的序列号。 -![TCP 握手的三个步骤。](https://cdn.hashnode.com/res/hashnode/image/upload/v1731414866173/6d66c360-2d2e-427b-8c8d-1555fdaa7197.jpeg) +2. 服务器收到 SYN 并用 SYN-ACK（同步-确认）段响应。它包括服务器的序列号和对客户端序列号的确认(加一)。 -TCP 握手的三个步骤包括： +3. 客户端用 ACK 消息响应，确认服务器的序列号。此时，连接已建立。 -1. 客户端通过发送 SYN（同步）数据包通知服务器，它希望建立连接。该数据包指定后续段将开始使用的序列号。 - -2. 服务器收到 SYN 并通过 SYN-ACK（同步确认）段进行回应。它包括服务器的序列号和客户端序列号的确认，客户端序列号加一。 - -3. 客户端以 ACK 消息回应，确认服务器的序列号。此时，连接已经建立。 ## 开始交换：客户端-服务器通信 -一旦建立 TCP 连接，客户端和服务器便可以开始使用 HTTP 协议交换消息。 +一旦建立 TCP 连接，客户端和服务器就可以使用 HTTP 协议开始交换消息。 ### 什么是 HTTP 协议？ -[超文本传输协议][31]（**HTTP**）是 TCP/IP 套件中最广泛使用的应用层协议，但由于其被认为不安全，已转向使用在 TCP 之上加密数据的 HTTPS，稍后您会看到更多细节。 -``` +[超文本传输协议](31)（HTTP）是 TCP/IP 套件中最广泛使用的应用层协议，但它被认为是不安全的，导致向 HTTPS 转变，HTTPS 在 TCP 之上使用 TLS 进行数据加密。稍后你会看到更多相关细节。 + +浏览器将首先向服务器发送 HTTP 请求消息，请求以 HTML 文件形式获取网站的副本。HTTP 协议可以传输 HTML、CSS、JS、SVG 等文件。 ### HTTP 请求/响应 HTTP 消息有两种类型： -- **请求**：由客户端发送到服务器以触发一个操作。 -- **响应**：由服务器发送到客户端作为对先前请求的回复。 +- **请求**：由客户端发送到服务器以触发操作。 -消息是纯文本文件，按照通信协议（在这种情况下是 HTTP）确定的精确方式进行结构化。 +- **响应**：由服务器发送到客户端作为对先前请求的答复。 -**HTTP 请求**包括以下三个部分： +消息是纯文本文档，按照通信协议（在本例中是 HTTP）确定的精确方式构建。 -1. **请求行**：包括请求方法，这是定义执行的动作的动词。在此博客文章中提到的情况是，浏览器将发出一个 GET 请求以从服务器获取页面。请求行还将包括资源位置，在此情况下为 URL，以及所使用的协议版本。 +**HTTP 请求**包含三个部分： -2. **请求头**：一组键值对。其中两个是必需的。`Host` 指示要访问的域名，`Connection` 总是设置为关闭，除非必须保持打开状态。请求头总以空行结束。 +1. **请求行**： 包括请求方法，这是定义要执行的操作的动词。在我们这篇博文中讨论的情况下，浏览器将发出 GET 请求从服务器获取页面。请求行还将包括资源位置(在本例中是 URL)和使用的协议版本。 -3. **请求体**：一个可选字段，允许向服务器发送数据。 +2. **请求头**： 一组键值对。其中两个是必需的。`Host` 表示目标域名，`Connection` 除非必须保持打开，否则总是设置为 close。请求头总是以空行结束。 -服务器将使用 HTTP 响应来回复请求。响应包括有关请求状态的信息，并可能包含请求的资源或数据。 +3. **请求正文**： 是一个可选字段，允许向服务器发送数据。 -HTTP 响应结构化为以下部分： +服务器将用 HTTP 响应回复请求。响应包括有关请求状态的信息，可能包括请求的资源或数据。 -1. **状态行**：包括所用协议版本、状态码和状态文本，提供状态码的可读描述。 +HTTP 响应的结构包括以下部分： -2. **头部**：一组键值对，可以是通用头部，适用于整个消息；响应头部，提供有关服务器状态的附加信息；或表述头部，描述消息数据的格式和编码（如果存在）。 +1. **状态行**： 包括使用的协议版本、状态代码和状态文本，以及状态代码的人类可读描述。 -3. **主体**：包含请求的数据或资源。如果客户端不希望有数据或资源，请求通常不会包含主体。 +2. **响应头**： 一组键值对，可以是应用于整个消息的通用标头、提供服务器状态附加信息的响应标头或描述消息数据格式和编码（如果存在）的表示标头。 -当服务器批准网页请求时，响应将包含 `200 OK` 消息。其他现有的 HTTP 响应代码有： +3. **响应正文**： 包含请求的数据或资源。如果客户端不期望数据或资源，响应通常不会包含主体。 + +当服务器批准网页请求时，响应将包含 `200 OK` 消息。其他现有的 HTTP 响应代码包括： - 404 未找到 -- 403 禁止访问 +- 403 禁止 - 301 永久移动 -- 500 内部服务器错误 +- 500 内部服务器错误 - 304 未修改 - 401 未授权 -响应还将包含一系列 HTTP 头部和响应主体，其中包括请求页面的相应 HTML 代码。 +响应还将包含 HTTP 标头列表和响应主体，包括请求页面对应的 HTML 代码。 ### HTTPS -[超文本传输安全协议][32]（**HTTPS**）不是一个不同的协议，而是 HTTP 的扩展。它通常被称为传输层安全（**TLS**）上的 HTTP。让我们看看它到底意味着什么。 +[超文本传输协议安全版](32)（**HTTPS**）并不是一个不同的协议，而是 HTTP 的扩展。它通常被称为基于传输层安全（**TLS**）的 HTTP。让我们看看这具体是什么意思。 + +HTTP 是浏览器和服务器之间大多数通信使用的协议，但它缺乏安全性。通过 HTTP 发送的任何数据都可能被网络上的任何人看到。当连接涉及敏感数据时，这尤其危险，比如登录凭证、财务信息、健康信息等。 + +HTTPS 的主要目的是确保数据隐私、完整性和身份识别。这意味着确保数据只能被预期的接收者访问，不能被中间人截获或修改。同时，发送者和接收者都可以通过合法的权威机构确认其身份。 + +在 HTTPS 中，通信使用 TLS 协议加密，该协议依赖于非对称公钥基础设施。它结合了两个密钥：一个公钥和一个私钥。服务器共享其公钥，客户端可以用它加密消息，而这些消息只能用服务器的私钥解密。 + +为建立加密通信，客户端和服务器必须启动另一次握手。在握手期间，它们就使用的 TLS 版本以及在连接期间如何加密数据和相互认证达成一致，这一组规则被称为密码套件。 -HTTP 是用于大多数浏览器与服务器之间通信的协议，但缺乏安全性。通过 HTTP 发送的任何数据都可能对网络上的任何人可见。这在涉及敏感数据的连接中尤其危险，例如登录凭据、财务信息、健康信息等。 +![SSL 握手的步骤](https://cdn.hashnode.com/res/hashnode/image/upload/v1731414891509/541f6b6c-ad54-4301-834a-1056aea524c0.jpeg) -HTTPS 背后的主要动机是确保数据隐私、完整性和身份验证。这意味着确保数据只能被其预期的访问者访问，并且不能被中间的任何人拦截或修改。此外，发送方和接收方都可以通过合法权威机构被识别为其声称的身份。 +这个握手或 TLS 协商在建立 TCP 连接后开始，包括以下步骤： -在 HTTPS 中，通信使用 TLS 协议加密，依赖于非对称公钥基础设施。它结合两个密钥：一个公钥和一个私钥。服务器分享其公钥，以便客户端可以使用它加密消息，这些消息只有通过服务器的私钥才能解密。 +- **客户端问候**： 浏览器发送一个包含所有支持的 TLS 版本和密码套件的问候消息。 -为了建立加密通信，客户端和服务器必须启动另一个握手。在握手期间，它们商定使用的 TLS 版本，以及如何在连接期间加密数据和相互认证，一组称为密码套件的规则。 +- **服务器问候**： 服务器回应选定的密码套件和 TLS 版本，以及包含服务器公钥的 SSL 证书。 -![SSL 握手步骤。](https://cdn.hashnode.com/res/hashnode/image/upload/v1731414891509/541f6b6c-ad54-4301-834a-1056aea524c0.jpeg) +- **认证和预主密钥**： 客户端通过相应的可信机构验证服务器的 SSL 证书，然后使用服务器的公钥（之前在证书中共享）创建预主密钥并与服务器共享。 -此握手或 TLS 协商在建立 TCP 连接后开始，并包括以下步骤： +- **预主密钥解密**： 预主密钥只能使用服务器的私钥解密。如果服务器能够解密它，客户端和服务器就可以就会话使用的共享主密钥达成一致。 -- **客户端 Hello**：浏览器发送一条 hello 消息，其中包含所有支持的 TLS 版本和密码套件。 -- **服务器 Hello**：服务器响应选择的密码套件和 TLS 版本，以及其包含服务器公钥的 SSL 证书。 -- **认证和预主密钥**：客户端使用相应的可信任机构验证服务器的 SSL 证书，然后使用服务器的公钥（之前在证书中共享）创建预主密钥，并将此预主密钥与服务器共享。 -- **预主密钥解密**：预主密钥只能使用服务器的私钥解密。如果服务器能够解密它，则客户端和服务器可以就会话使用的共享主密钥达成一致。 -- **客户端 ChangeCipherSpec**：客户端使用共享主密钥创建会话密钥，并将之前交换的所有记录发送给服务器，这次使用会话密钥加密。 -- **服务器 ChangeCipherSpec**：如果服务器生成了正确的会话密钥，则能够解密消息并验证接收到的记录。然后服务器发送一条记录以确认客户端也拥有正确的密钥。 -- **建立安全连接**：握手完成。 +- **客户端更改密码规范**： 客户端使用共享主密钥创建会话密钥，并向服务器发送所有先前交换的记录，这次使用会话密钥加密。 -### 首字节时间 +- **服务器更改密码规范**： 如果服务器生成正确的会话密钥，它就能解密消息并验证收到的记录。然后服务器发送记录以确认客户端也有正确的密钥。 -一旦浏览器的请求被批准，服务器将发送一个 200 OK 消息以及响应头和请求的内容。因为这是一个网站，内容很可能是一个 HTML 文档。 +- **安全连接建立**： 握手完成。 -数据在客户端与服务器之间传输时被分成一系列小的数据块，称为数据包。这使得在需要时可以轻松替换损坏的数据块，同时也允许数据从不同位置传输往返，使得多个用户能够更快且同时访问数据。 +一旦握手完成，客户端和服务器之间的所有通信都由会话密钥进行对称加密保护，浏览器就可以发出网站的第一个 HTTP GET 请求。 -当客户端发出第一个请求时，第一个到达的响应数据包标志着[首字节时间][33]（**TTFB**），它表示从请求发出到接收到第一个数据块之间的时间。这包括进行 DNS 查找、建立连接的 TCP 握手，以及如果是通过 HTTPS 发出的请求，还包括 TLS 握手所花的时间。 +### 第一字节时间 + +一旦浏览器的请求被批准，服务器将发送 200 OK 消息以及响应头和请求的内容。因为是网站，内容很可能是 HTML 文档。 + +数据在客户端和服务器之间传输时被分成一系列小数据块，称为数据包。这使得在需要时很容易替换损坏的数据块，也允许数据往返于不同位置，使多个用户能够更快且同时访问数据。 + +当客户端发出第一个请求时，作为响应到达的第一个数据包标志着[第一字节时间](33)（TTFB），它表示从请求发起到接收到第一块数据作为响应所经过的时间。这包括 DNS 查询、建立连接的 TCP 握手，以及如果请求通过 HTTPS 发送则包括 TLS 握手所需的时间。 ## 从数据到像素：关键渲染路径 -[关键渲染路径][34]（**CRP**）是浏览器执行的一系列步骤，将服务器返回的数据转换为屏幕上的像素。它包括创建[文档对象模型][35]（**DOM**）和[CSS 对象模型][36]（**CSSOM**）、**渲染树**和**布局**。 +[关键渲染路径][34]（CRP）是浏览器执行的一系列步骤，用于将从服务器接收回来的数据转换为屏幕上的像素。它包括创建[文档对象模型][35]（DOM）和 [CSS 对象模型][36]（CSSOM、**渲染树**和**布局**。 ### 构建 DOM 树 -当第一个数据块到达时，浏览器开始解析 HTML。解析意味着分析并将一段输入代码转换为可以被特定运行环境解释的语法和表示。在这种情况下，浏览器组装接收到的数据包并解析 HTML，构建称为 DOM 树的文档表示。 +当第一块数据到达时，浏览器开始解析 HTML。解析意味着分析并将一段输入代码转换为特定运行时可以解释的语法和表示。在这种情况下，浏览器组装接收到的数据包并解析 HTML，构建文档的节点树表示，称为 DOM 树。 -文档中的每个 HTML 标签都表示为 DOM 树中的一个节点。节点根据它们在文档中的层次结构连接到 DOM 树上，每个节点的表示都包括关于该标签的所有相关信息。 +文档中的每个 HTML 标签都在 DOM 树中表示为一个节点。节点根据它们在文档中的层次位置连接到 DOM 树，每个节点的表示包含关于该标签的所有相关信息。 对于以下 HTML 代码： -```html +``` @@ -283,7 +268,7 @@ HTTPS 背后的主要动机是确保数据隐私、完整性和身份验证。

Intro

- Before entering into the details of every step included in the process, let's review some of the basic concepts we will be discussing throughout the blog. + Before entering into the details of every step included in the process let's review some of the basic concepts we will be discussing throughout the blog.

The Internet is a huge network of interconnected computers. The World Wide Web (aka web) is built on top of that technology, as well as other services such as email, chat systems, or file sharing. @@ -310,15 +295,15 @@ HTTPS 背后的主要动机是确保数据隐私、完整性和身份验证。 生成的 DOM 树如下所示： -![DOM树包括所有HTML元素、其内容及其层次关系。](https://cdn.hashnode.com/res/hashnode/image/upload/v1731498370760/4267c646-145e-487c-83af-f97d6f8ce21d.jpeg) +![此图展示了包含所有 HTML 元素、其内容及层次关系的 DOM 树。](https://cdn.hashnode.com/res/hashnode/image/upload/v1731498370760/4267c646-145e-487c-83af-f97d6f8ce21d.jpeg) -在解析 HTML 的同时，浏览器会对遇到的资源进行额外请求。CSS 文件和图像是非阻塞资源，意味着解析器在等待请求资源的同时会继续其任务。但如果遇到一个 `