起因❓
我们都羡慕😮那些工作爱情双丰收的家伙，岂可修，事业好就算了，还有狗粮满满的爱情，😭让我们这些修狗有何颜面存活下去。
为此，有没有想过，人的精力是有限的，他们又是如何修炼的🤔。
既然如此，那么有没有一种可能，能从工作中领会爱情的真谛？让我们早日，事业蒸蒸日上，并收获完美的爱情🥰
我的回答是有的 ，👉🏻接下来我们尝试以寻缘的角度，分析页面加载的原理~
📊 图解
首先，我们先理解页面加载的整个过程，发现寻缘的真理也不过如此： 
接下来，我们逐个击破，😍早日抱得美人归~
一、🏢 解析地址（描述理想型）
输入URL链接后，浏览器会对其进行解析
你想好，要找什么样的伴侣（理想型），这样找起来也事半功倍
URL一般包括几大部分：
- 协议（Protocol）：指访问资源时使用的协议，常见的协议有 HTTP、HTTPS、FTP 等。
- 主机名（Host）：指服务器的域名或 IP 地址，用于唯一标识一个服务器。
- 端口号（Port）：指服务器上提供服务的端口号，可以省略。例如，默认的 HTTP 端口为 80，HTTPS 端口为 443。
- 路径（Path）：指服务器上资源的路径，表示访问资源时需要进入的目录层级以及资源的名称。
- 查询参数 （Query）：指对资源请求的参数，格式为 key=value，多个参数间使用
&连接。 - 锚点 （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是怎样的一个人，适不适合自己，若是只感受到负面影响，请及时止损，下一个更乖哦（加载下一个文件）
渲染步骤大致可以分为以下几步：
- 解析HTML: 解析
HTML并构建DOM树。 - 解析CSS : 解析
CSS构建CSSOM树（样式树）。 - 合成渲染树 ：将
DOM与CSSOM合并成一个渲染树（Render Tree） 。 - 布局计算 ：根据渲染树的结构，计算
每个节点在屏幕上的大小、位置等属性，生成布局信息（Layout）。这个过程会发生回流和重绘。 - 绘制页面 ：将生成的布局信息交给浏览器的绘图引擎，通过
GPU加速将像素绘制（Paint）到屏幕上。 - 浏览器回流和重绘：如果页面发生改变，浏览器需要重新计算布局和绘制，这可能会导致性能问题。因此我们应尽量避免频繁的 DOM 操作和调整元素样式，以减少不必要的回流和重绘。
六、结束语
路漫漫其修远兮，求道之路源远流长🌊。
相信保持诚心，因为心诚则灵～
到此，我们已经学习了页面加载原理的不传秘密《恋爱对线指南》，理论知识已经异常丰富，还需要实践，才能达到知行结合的境界
所以，在此，本尊愿道友们多加努力，早日得道成仙，喜结良缘哈哈😄~