起因❓

我们都羡慕😮那些工作爱情双丰收的家伙，岂可修，事业好就算了，还有狗粮满满的爱情，😭让我们这些修狗有何颜面存活下去。

为此，有没有想过，人的精力是有限的，他们又是如何修炼的🤔。

既然如此，那么有没有一种可能，能从工作中领会爱情的真谛？让我们早日，事业蒸蒸日上，并收获完美的爱情🥰

我的回答是有的，👉🏻接下来我们尝试以寻缘的角度，分析页面加载的原理~

📊 图解

首先，我们先理解页面加载的整个过程，发现寻缘的真理也不过如此：

接下来，我们逐个击破，😍早日抱得美人归~

一、🏢 解析地址（描述理想型）

输入URL链接后，浏览器会对其进行解析

你想好，要找什么样的伴侣（理想型），这样找起来也事半功倍

URL一般包括几大部分：

1. 协议（Protocol）：指访问资源时使用的协议，常见的协议有 HTTP、HTTPS、FTP 等。
2. 主机名（Host）：指服务器的域名或 IP 地址，用于唯一标识一个服务器。
3. 端口号（Port）：指服务器上提供服务的端口号，可以省略。例如，默认的 HTTP 端口为 80，HTTPS 端口为 443。
4. 路径（Path）：指服务器上资源的路径，表示访问资源时需要进入的目录层级以及资源的名称。
5. 查询参数（Query）：指对资源请求的参数，格式为 key=value，多个参数间使用 & 连接。
6. 锚点（Fragment）：指 # 后的hash值，一般用来定位到某个位置。

二、⛪️ DNS域名解析（配对理想型）

域名查询dns服务器，找到对应的ip地址

你会将你的理想型，告知第三方（红娘、app）,ta会帮你匹配找到

2.1 👩🏻‍🦰 DNS（红娘）

DNS（Domain Name System）是一种用于将域名解析为IP地址的系统。

简单的理解，就是找对象的过程中，需要求助于第三方，让ta帮你找，这种的就被称为红娘

美好的爱情，是建立在良好的友谊关系上

三、☺️ 建立TCP连接（建立聊天）

拿到了IP地址后，就可以发起HTTP请求了。HTTP请求的本质就是TCP/IP的请求构建。建立连接时需要 3次握手 进行验证，断开连接也同样需要 4次挥手 进行验证，保证传输的可靠性。

然后你就可以与ta进行亲密聊天，但在确认关系之前，你需要建立信任感，多次耐心友好地回复对方，做到事事有回应，件件有着落，给ta安全感，让ta认为你是可靠的人

那么可靠性，安全性体现在哪呢？

首先，我们看几个模拟场景，来理解3次握手、以及4次挥手的含义。

3.1 🤝🏻 3次握手（聊天开始）

快速开启话题、寻找相同兴趣

• 你：哈喽，文学少女，最近还在看书吗？（对方信息提炼，抛出话题）
• ta: 哈哈是的，你呢？（收到话题，反问信息交换）
• 你：优秀，我刚看完blabla...（肯定对方回复，引出下文，开始步入正题）

原理：

• 第一次握手：客户端发送一个带有 SYN（synchronize同步）标志的数据包给服务端。
• 第二次握手：服务端接收成功后，回传一个带有 SYN/ACK 标志的数据包传递确认信息，表示我收到了。
• 第三次握手：客户端再回传一个带有 ACK 标志的数据包，表示我知道了，握手结束。

3.2 👋🏻 4次挥手（结束聊天）

礼貌淡出结束、尽量做到短语结束

• 你（主动方/客户端）：是吗，你说的那本书，真有趣，我要去看看（聊天结束暗示）
• ta（被动方/服务端）：好的，和你聊天，时间过得真快（收到暗示）
• ta（被动方/服务端）：我也要继续看书了（同意，聊天结束暗示）
• 你（主动方/客户端）：嗯嗯（收到暗示，达成一致，礼貌结束）

原理：

• 第一次挥手：客户端发送一个FIN，用来关闭客户端到服务器的数据传送，并且指定一个序列号。客户端进入FIN_WAIT_1状态。
• 第二次挥手：服务器收到FIN后，发送一个ACK给客户端，确认序号为客户端的序列号值 +1 ，表明已经收到客户端的报文了，此时服务器处于 CLOSE_WAIT 状态。
• 第三次挥手：服务器发送一个FIN，用来关闭服务器到客户端的数据传送，服务器进入LAST_ACK状态。
• 第四次挥手：客户端收到FIN后，客户端进入TIME_WAIT状态，接着发送一个ACK给服务器，确认序号为收到序号+1 ，服务器收到确认后进入CLOSED状态，完成四次挥手。

其中：FIN标志位数置1，表示断开TCP连接。

四、💞 发送HTTP请求（互动反馈）

那么在与人相处的过程中，也就是互动，会产生一些反馈，ta是啥意思呢？

HTTP请求报文主要由三个部分组成：请求行、请求头和请求体。

4.1 HTTP 状态码（反馈码）

1xx（信息响应）

缘未开始

状态码	描述	例子
100	Continue，服务器已经接收到请求头，客户端应继续发送请求主体。	你就打了招呼，主要的内容还没发
101	Switching Protocols，服务器通信协议将发生改变	ta告诉你，我的会员要到期了，我们加微信上聊

2xx（成功）

聊天要有积极的反馈，☀️乐观积极向上

状态码	描述	例子
200	OK，请求成功，响应体随之返回了请求的资源。	ta在线，聊天事事有回应，办事件件有着落
201	Created，请求已成功，并因此创建了一个新的资源。	聊天的时候，ta兴致勃勃，还会主动开启话题
202	Accepted，已经接受请求，但未处理完成。正如它可能被拒绝一样，最终该请求可能也会不被执行。	你发了消息，ta收到了，但还在忙（异步操作）未读。
203	Non-Authoritative Information，非授权信息，服务器已成功处理请求，但返回的信息可能来自其他地方，而非原始服务器。	聊天的时候，ta无脑给你发来一篇转载的文章
204	No Content，无内容，服务器成功处理了请求，但不需要返回任何内容。	你发了消息，ta已读，但没回你消息，你觉得这代表默认。
205	Reset Content，重置内容，请求已经成功处理。	你发了消息，ta已读，但没回你消息，你觉得ta不感兴趣，打算换个话题
206	Partial Content，部分内容，服务器已经成功处理了部分GET请求，例如文件的断点续传。	ta分段分时间多次回你消息

3xx（重定向）

见面总会打乱计划，☔️但心不要乱

状态码	描述	例子
300	Multiple Choices，针对请求，服务器可执行多种操作，需请求者选择一项操作。	你说，在哪见面，ta选了一些地方，让你决定
301	Moved Permanently，表示所请求的资源已被永久移动到了新的位置。	ta告诉你ta搬家了，并且给你发来ta家的地址，然后你记住了
302	Found，临时移动，表示请求的资源临时移动到了一个不同的URI。	ta告诉你ta现在在哪，并且给你发来ta现在的位置，然后你记住了
303	See Other，查看其他位置，请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。	ta告诉你在哪碰面，你去了之后，觉得那个地方不值得留念。
304	Not Modified，未修改，这意味着客户端缓存的版本仍然是最新的。	ta跟你说还是老地方见面。
305	Use Proxy，使用代理，所请求的资源必须通过代理访问。	ta跟你说，见面的地方，要坐地铁去。
307	Temporary Redirect，临时重定向，与302十分相像，但是与302不同的是，307保证请求方法和请求体不会改变	ta告诉你在哪碰面，并且只能开车去

4xx（客户端错误）

相处时，难免有困难，要勇于面对，保持一颗真诚之心♥️

状态码	描述	例子
400	Bad Request，服务器无法理解客户端的请求，因为请求的语法错误或格式不正确。	你们不同频，ta无法理解你的意思
401	Unauthorized，请求需要用户验证，如果之前已经发送过认证信息，那么401表示认证失败。	ta认为你不可靠，没有给ta安全感，给你致命三连问
402	Payment Required，保留，将来使用。在未来，它可能会用于数字支付系统。	你犯错了，要买买买才能解ta的气
403	Forbidden，服务器理解了客户端的请求，但是拒绝执行。	ta任性地拒绝了你的要求（我明白你的意思，搭嘎口头哇路）
404	Not Found，服务器无法根据客户端的请求找到资源（网页）。	消失/逃避的ta（或许是你沟通的方式有问题）
405	Method Not Allowed，客户端请求中的方法被禁止	ta认为你道歉的态度有问题，还是不理你
406	Not Acceptable，服务器无法生成客户端在请求的Accept头中指定的内容特性响应	你的期待值过高，ta没有办法给你想要的回应

5xx （服务器错误）

不要猜忌，互尊互重

状态码	描述	例子
500	Internal Server Error，服务器内部错误，无法完成请求。 500错误是一个“服务器端”错误，意味着问题出在服务器上，而不是客户端请求有误。这可能是由于服务器程序错误、配置问题或资源不足导致。	ta因为自己的问题，对你冷淡，不要猜想是你的原因
501	Not Implemented，服务器不支持当前请求所需的功能。当服务器不识别请求方法，并且无法支持其对任何资源的处理时，就会返回这个状态码。比如，客户端发送了一个服务器不识别的自定义请求方法。	ta或许不具备接住你的话的能力，我们不需要只依赖情绪价值活着
502	Bad Gateway，服务器作为网关或代理，从上游服务器收到无效响应。502错误表明你正在访问的服务器是一个网关或代理服务器，而它在处理请求时从上游服务器或辅助服务器接收到了无效的响应。	ta将自己所承受的事情，怨气撒在你身上，我们只需认真的倾听，表示理解，不需要给出解决方案
503	Service Unavailable，由于临时的服务器维护或者过载，服务器当前无法处理请求。这个状况是暂时的，并且将在一段时间以后恢复。如果能够预计延迟时间，那么响应中可以包含一个Retry-After头用以标明这个延迟时间。如果没有给出这个Retry-After信息，那么客户端应当以处理500响应的方式处理它。	ta在忙自己的事情，来不及回复你是正常现象，你不要多想
504	Gateway Time-out，作为网关或代理的服务器未能在允许的时间内从上游服务器（或辅助服务器）接收请求。504错误与502错误相似，但区别在于502错误表明无效响应，而504错误是由于响应超时。	ta在思考你们的未来，进行权衡利弊，十分迷茫，因此冷淡了你
505	HTTP Version not supported，服务器不支持或拒绝支持在请求中使用的HTTP协议版本。	ta反对异地恋

五、🫂 页面渲染（知己知彼）

浏览器拿到资源内容后，就会进行对资源的整合排版，加载其他依赖文件，重复整个流程，直至资源全部加载并渲染完成。

经过这些互动的经历，我们可以逐渐地了解自身的优点与不足，以及ta是怎样的一个人，适不适合自己，若是只感受到负面影响，请及时止损，下一个更乖哦（加载下一个文件）

渲染步骤大致可以分为以下几步：

1. 解析HTML: 解析 HTML 并构建 DOM 树。
2. 解析CSS: 解析 CSS 构建 CSSOM 树（样式树）。
3. 合成渲染树：将 DOM 与 CSSOM 合并成一个 渲染树（Render Tree） 。
4. 布局计算：根据渲染树的结构，计算每个节点在屏幕上的大小、位置等属性，生成布局信息（Layout）。这个过程会发生回流和重绘。
5. 绘制页面：将生成的布局信息交给浏览器的绘图引擎，通过 GPU 加速将像素绘制（Paint）到屏幕上。
6. 浏览器回流和重绘：如果页面发生改变，浏览器需要重新计算布局和绘制，这可能会导致性能问题。因此我们应尽量避免频繁的 DOM 操作和调整元素样式，以减少不必要的回流和重绘。

六、结束语

路漫漫其修远兮，求道之路源远流长🌊。

相信保持诚心，因为心诚则灵～

到此，我们已经学习了页面加载原理的不传秘密《恋爱对线指南》，理论知识已经异常丰富，还需要实践，才能达到知行结合的境界

所以，在此，本尊愿道友们多加努力，早日得道成仙，喜结良缘哈哈😄~

---

参考资料