从输入URL到页面显示：这中间到底发生了什么？一场“互联网快递”的奇幻漂流
你在地址栏敲下“www.baidu.com”，回车，页面就出来了。看似一秒的事，背后却有一群“快递员”、“搬运工”、“装修队”忙得脚不沾地。今天我们就来跟踪一个请求的完整旅程，看看浏览器是怎么把一行字变成五彩斑斓的页面的。
前言
想象一下，你在网上下单了一个“网页快递”。你填好地址（URL），点击“下单”（回车）。然后，这个订单就开始了它的奇幻漂流：先去DNS“查号台”问路，再去服务器“仓库”取货，中间可能还要过“安检”（防火墙），最后回到浏览器“组装车间”，被拆包、分类、渲染成你看到的页面。
这整个过程，快的时候几十毫秒，慢的时候让你想砸电脑。今天我们就来当一回“跟单员”，一步步追踪这个快递的旅程。
一、URL解析：你写的“地址”得拆开看
你输入https://www.baidu.com:443/search?q=前端，浏览器会把它拆成几部分：
- 协议：
https（告诉快递要用“加密专线”） - 域名：
www.baidu.com（收件人名字） - 端口：
443（收件人的房门号，https默认443，http默认80） - 路径：
/search（要拿哪个货架上的东西） - 查询参数：
q=前端（具体要什么尺寸）
拆完才知道要去哪、拿什么。
二、DNS解析：域名转IP，就像“查号台”
浏览器不知道www.baidu.com是啥，它只认识IP地址（比如110.242.68.66）。所以得去**DNS（域名系统）**查：这个域名对应哪个IP？
查的过程像打连环电话：
- 先问浏览器缓存（你有没有记过这个号码？）
- 再问操作系统hosts文件（电脑的小本本）
- 然后问本地DNS服务器（运营商给的“片区查号台”）
- 最后问根域名服务器、顶级域名服务器……直到查到
找到IP后，浏览器会把它缓存下来，下次就不用再查了。
三、TCP连接：三次握手，确认“线路通畅”
拿到IP后，浏览器要和服务器建立连接。用的是TCP协议，先来个“三次握手”：
- 客户端：“服务器，在吗？”（SYN）
- 服务器：“在的，你呢？”（SYN-ACK）
- 客户端：“我也在，咱们开始传数据吧。”（ACK）
这就像打电话前先问“喂？能听到吗？”“能听到，你呢？”“我也能听到，说正事吧。”
为什么不是两次握手？为了防止已失效的连接请求突然又传到服务器，导致服务器白白等待。
四、发起HTTP请求：下订单，我要这些数据
连接建立后，浏览器开始发送HTTP请求，告诉服务器要什么资源。请求包含：
- 请求行：
GET /search?q=前端 HTTP/1.1 - 请求头：
Host: www.baidu.com、User-Agent: Chrome/xxx、Cookie: ...等 - 请求体（GET没有，POST可能有表单数据）
服务器收到后，根据路径和参数，返回响应，通常是HTML、CSS、JS、图片等。
五、服务器处理与响应：仓库拣货，打包发货
服务器（比如Nginx、Apache）接到订单，根据路径去找对应的文件或执行后端代码（如PHP、Node），生成HTML内容，然后打包成HTTP响应发回。
响应包括：
- 状态行：
200 OK（一切正常）、404 Not Found（找不到）、500（服务器炸了） - 响应头：
Content-Type: text/html、Cache-Control、Set-Cookie等 - 响应体：HTML代码
六、浏览器解析与渲染：把代码变成漂亮页面
这是最复杂的一步，浏览器要把拿到的HTML、CSS、JS变成你看到的五彩界面。
1. 解析HTML，构建DOM树
浏览器从上到下解析HTML，遇到<div>、<p>等标签，就创建DOM节点，构建一颗DOM树。
如果遇到<script src="...">，会暂停解析，去下载并执行JS（除非加了async或defer）。所以JS脚本放在页面底部或使用defer，避免阻塞页面渲染。
2. 解析CSS，构建CSSOM树
同时，浏览器解析CSS（包括外部样式表、内联样式、浏览器默认样式），构建CSSOM树。CSSOM和DOM结构类似，但包含每个节点的样式信息。
3. 合并成渲染树（Render Tree）
DOM树 + CSSOM树 = 渲染树。渲染树只包含可见节点（display: none的节点不会进渲染树，但visibility: hidden会，因为它占空间）。每个渲染节点包含它的样式信息。
4. 布局（Layout）：计算每个元素的位置和大小
浏览器根据渲染树，计算每个节点在屏幕上的确切坐标和尺寸。这个过程也叫重排。比如一个width: 50%的元素，浏览器得知道父容器多宽，才能算出实际宽度。
5. 绘制（Paint）：填充像素
有了位置和大小，浏览器开始“画”：绘制背景、边框、文字、阴影等。这一步叫重绘。每个元素可能被分成多个绘制层（比如用了transform的动画会单独一层）。
6. 合成（Composite）：把图层合成最终画面
浏览器把多个绘制层按顺序合成到一起，然后用GPU显示到屏幕上。合成是性能最高的步骤，因为不需要重新计算布局和绘制。
七、关键优化点：让页面更快
- 减少HTTP请求：合并文件、使用雪碧图、小图转base64。
- 使用CDN：让用户从最近的服务器获取资源。
- 开启Gzip压缩：传输更小。
- CSS放头部，JS放底部：避免阻塞渲染。
- 懒加载图片：只加载可视区域内的图片。
- 使用
async或defer加载JS：不阻塞HTML解析。 - 减少重排：避免逐个修改样式，用
class批量改；动画用transform（走合成层）。
八、总结：一趟精彩的“快递之旅”
- URL输入 → DNS查IP → TCP三次握手 → 发HTTP请求 → 服务器响应 → 浏览器解析HTML/CSS → 构建DOM/CSSOM → 渲染树 → 布局 → 绘制 → 合成。
- 每个环节都可能成为瓶颈，优化就是减少每个步骤的耗时。
下次你在浏览器里按下回车，可以想象背后那群“快递小哥”、“装修队”正忙得热火朝天。而你的代码写得越优，他们就越轻松，页面就越快。
如果你觉得今天的“快递之旅”够过瘾，点个赞让更多人看到。明天我们将深入渲染流水线，专门聊聊重排、重绘、合成的区别，以及怎么用它们来优化性能。我们明天见！