为什么输入 URL 后会显示页面？HTTP 协议的 “幕后操作”

🚀 浏览器输入URL后，到底发生了什么？前端面试HTTP协议深度解析

今天咱们不聊八卦，来点硬核的——前端面试中绕不开的HTTP协议。是不是一提到“浏览器输入URL后发生了什么”，你就开始头大？别担心，今天我将用最通俗易懂、最风趣幽默的方式，带你揭开这层神秘的面纱，保证让你听完茅塞顿开，面试官都得给你点赞！

想象一下，你每天都在浏览器里敲下各种网址，比如www.juejin.cn，然后按下回车，神奇的事情就发生了：页面瞬间呈现在你眼前。这背后，可不是简单的“biu”一下就完事儿了，它涉及到一系列复杂而又精妙的流程。今天，我们就来当一回“福尔摩斯”，一步步揭秘这个过程！

在这里插入图片描述

✨ 浏览器与服务器的“爱恨情仇”：从URL到页面渲染

整个过程可以概括为：浏览器向服务器发出请求，服务器处理请求并返回数据，浏览器接收数据并渲染页面。听起来很简单？别急，细节决定成败！
在这里插入图片描述

🔍 第一幕：URL的“身份验证”

当你输入URL并按下回车的那一刻，浏览器可不是个“傻白甜”，它会先对你输入的URL进行一番“身份验证”：

URL合法性检查：浏览器会先检查你输入的URL是否符合规范，比如是不是http://或https://开头，域名格式对不对等等。就像你去银行办业务，得先看看你是不是带了身份证，格式对不对。
缓存检查：如果这个URL你之前访问过，浏览器会先看看本地有没有缓存。如果有，那恭喜你，直接从缓存里拿出来显示，速度那叫一个快！就像你点外卖，如果上次点的还有剩，直接热一下就能吃，省去了等待配送的时间。如果没有，那就得老老实实走接下来的流程了。

📞 第二幕：DNS解析——“寻址”之旅

如果缓存里没有，或者URL是第一次访问，浏览器就需要知道服务器的“家庭住址”——IP地址。这就需要进行DNS（Domain Name System）解析了。DNS就像一个巨大的电话本，你告诉它域名（比如www.juejin.cn），它就能告诉你对应的IP地址（比如104.21.48.175）。
在这里插入图片描述

这个过程通常是这样的：

浏览器缓存：浏览器会先检查自己的DNS缓存，看看有没有这个域名的IP地址。
操作系统缓存：如果没有，就去操作系统的DNS缓存里找。
路由器缓存：再没有，就去路由器的DNS缓存里找。
ISP DNS服务器：如果以上都没有，就会向你的互联网服务提供商（ISP）的DNS服务器发起请求。
根域名服务器、顶级域名服务器、权威域名服务器：ISP的DNS服务器会一层层地向上查询，直到找到对应的IP地址。这个过程就像你找一个陌生人的电话，先问朋友，朋友不知道就问朋友的朋友，直到找到认识他的人。

🤝 第三幕：TCP三次握手——“建立连接”的仪式

拿到IP地址后，浏览器就可以和服务器建立连接了。这里就要用到TCP（Transmission Control Protocol）协议，它就像是网络世界的“红娘”，负责在浏览器和服务器之间建立可靠的连接。这个建立连接的过程，就是著名的“TCP三次握手”。

第一次握手（SYN）：浏览器（客户端）向服务器发送一个SYN（同步序列号）报文，表示“我想和你建立连接，你准备好了吗？”
第二次握手（SYN+ACK）：服务器收到SYN报文后，如果同意建立连接，就会回复一个SYN+ACK（同步确认）报文，表示“我准备好了，你也准备好了吗？”
第三次握手（ACK）：浏览器收到SYN+ACK报文后，再回复一个ACK（确认）报文，表示“我准备好了，咱们开始通信吧！”

至此，浏览器和服务器之间的“秘密通道”就建立起来了，可以开始愉快地传输数据了！

📩 第四幕：HTTP请求与响应——“你来我往”的对话

连接建立后，浏览器就可以向服务器发送HTTP请求了。HTTP（Hypertext Transfer Protocol）协议就像是浏览器和服务器之间交流的“语言”。

在这里插入图片描述

HTTP请求：浏览器会发送一个HTTP请求报文，里面包含了它想要获取的资源（比如网页、图片、CSS文件等）、请求方法（GET、POST等）、请求头（User-Agent、Cookie等）以及请求体（POST请求时携带的数据）。

HTTP响应：服务器收到请求后，会根据请求内容进行处理，然后返回一个HTTP响应报文。响应报文里包含了状态码（200 OK、404 Not Found等）、响应头（Content-Type、Cache-Control等）以及响应体（实际的网页内容、图片数据等）。

👋 第五幕：TCP四次挥手——“断开连接”的告别

当数据传输完毕，或者一方不再需要通信时，就需要断开连接了。这个过程就是“TCP四次挥手”，它比三次握手要复杂一些，因为双方都需要确认对方已经没有数据要发送了。
在这里插入图片描述

第一次挥手（FIN）：浏览器（客户端）发送一个FIN（结束）报文，表示“我没有数据要发给你了。”
第二次挥手（ACK）：服务器收到FIN报文后，回复一个ACK报文，表示“我收到了你的结束请求。”此时，服务器可能还有数据要发送给客户端。
第三次挥手（FIN）：服务器发送完所有数据后，也会发送一个FIN报文，表示“我也没有数据要发给你了。”
第四次挥手（ACK）：浏览器收到服务器的FIN报文后，回复一个ACK报文，表示“我收到了你的结束请求。”

至此，浏览器和服务器之间的连接就彻底断开了。

🔄 第六幕：缓存处理与页面渲染——“画龙点睛”的艺术

当浏览器收到HTTP响应后，它会先检查响应头，看看是否可以缓存。如果可以，就会把资源存入缓存，方便下次直接使用。然后，就进入了激动人心的页面渲染阶段！
在这里插入图片描述

浏览器页面渲染：这是一个复杂而又精妙的过程，它将服务器返回的HTML、CSS、JavaScript等文件，最终呈现在你的屏幕上。

获取HTML文件并解析，形成DOM Tree：浏览器会从上到下解析HTML文件，将HTML标签解析成一个个节点，最终形成一个树状结构，这就是DOM（Document Object Model）Tree。它就像是页面的“骨架”。
同时进行CSS解析，生成CSS Tree：浏览器在解析HTML的同时，也会解析CSS文件，将CSS样式解析成CSS规则，形成CSSOM（CSS Object Model）Tree。它就像是页面的“皮肤”。
将DOM Tree与CSS Tree合成Render Tree：DOM Tree和CSS Tree结合起来，就形成了Render Tree（渲染树）。Render Tree只包含需要显示在页面上的节点和它们的计算样式，那些不需要显示的节点（比如display: none的元素）是不会出现在Render Tree中的。它就像是页面的“带妆照”，只包含最终要展示出来的部分。
进入布局（Layout）阶段：布局阶段也叫回流（Reflow），它会根据Render Tree计算每个节点在屏幕上的精确位置和大小。就像是给“带妆照”上的每个元素都标上坐标，确定它们在哪里，占多大地方。
调用GPU进行绘制（Paint）：绘制阶段也叫重绘（Repaint），它会遍历Render Tree的节点，并调用GPU将元素呈现出来。就像是根据布局阶段计算好的坐标，用画笔把页面上的所有元素画出来，最终呈现在你的屏幕上。