从输入 URL 到页面展示，背后发生了什么？

当你在浏览器中输入一个 URL（如 https://www.example.com）并按下回车后，背后会经历一系列复杂的过程。这个过程通常可以分为以下几个主要步骤：DNS解析 → 建立TCP连接 → 发送HTTP请求 → 服务器处理请求 → 返回HTTP响应 → 浏览器渲染页面。

下面，我们详细分解每一个步骤！ 👇

目的： 将人类易读的域名（如 www.example.com）转换成服务器的IP地址（如 93.184.216.34）。

详细过程：

浏览器缓存检查： 浏览器会先检查自己的DNS缓存中是否有这个域名的解析记录。
操作系统缓存检查： 如果浏览器缓存没有，继续检查操作系统的DNS缓存（如 hosts 文件）。
本地DNS服务器检查： 如果本地没有缓存，会向本地DNS服务器（通常是ISP提供的）发起请求。
递归查询： 本地DNS服务器如果找不到，会进行递归查询，逐级询问顶级域名服务器（Root DNS）、顶级域名服务器（如 .com 顶级域名服务器）、权威DNS服务器，直到获取到目标IP地址。
缓存结果： 本地DNS服务器会缓存查询结果，并返回给客户端。

结果： 获取到目标服务器的IP地址。

目的： 建立可靠的传输通道，保证数据传输的准确性和完整性。

三次握手过程：

特点：

目的： 向服务器请求资源（如 HTML、CSS、JS、图片等）。

请求过程：

构建HTTP请求报文：
- 请求行： 包含请求方法（GET、POST 等）、URL 和 HTTP 版本。
- 请求头： 包括 User-Agent（浏览器信息）、Accept（可接受的内容类型）、Cookie（用户信息）等。
- 请求体： 仅在 POST 等方法时包含，如表单数据。
发送请求报文： 通过已建立的 TCP 连接发送给服务器。

示例请求报文：

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

目的： 服务器根据请求内容返回相应的资源或执行动态逻辑。

处理过程：

服务器接收请求： 通过 Web 服务器（如 Nginx、Apache 或 IIS）解析 HTTP 请求。
静态资源处理： 直接读取服务器文件系统上的资源（如 HTML、CSS、JS）。
动态资源处理： 交给后端程序（如 Java、Python、PHP、Node.js 等）执行业务逻辑，通常伴随数据库查询。
生成HTTP响应报文： 包括状态行（如 200 OK 或 404 Not Found）、响应头（如 Content-Type）和响应体（如 HTML 文档）。

示例响应报文：

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<html>...</html>

目的： 将服务器返回的数据传输给客户端。

详细过程：

目的： 将获取的HTML和资源渲染成用户可见的网页。

渲染过程：

解析HTML，构建 DOM 树： 自上而下解析 HTML，生成 DOM（Document Object Model）。
解析CSS，构建 CSSOM 树： 解析 CSS 文件及 <style> 中的样式，生成 CSSOM（CSS Object Model）。
生成渲染树（Render Tree）： 将 DOM 和 CSSOM 结合，生成只包含可见元素的渲染树。
布局（Layout）： 计算每个元素的大小和位置（回流，Reflow）。
绘制（Painting）： 按照渲染树的内容和顺序，逐层绘制到屏幕上。
JS执行与DOM更新：
- 解析与执行 JS： 可能会阻塞 DOM 构建（同步脚本）。
- DOM API 操作： 可修改 DOM 和样式，触发重绘或回流。

输入 URL ➡️ DNS解析 ➡️ 建立TCP连接 ➡️ 发送HTTP请求 ➡️ 服务器处理请求
       ⬇️                           ⬆️
  浏览器渲染页面 ⬅️ 返回HTTP响应

整个过程涉及网络协议、传输控制、安全加密、浏览器渲染等多个方面。如果你想了解某一步更深入的细节，随时问我！ 😎