当你在浏览器地址栏输入一个类似 http://example.com/product/electric/phone 的网址，并按下回车键时，一个精密而复杂的流程便悄然启动了。这个看似简单的动作背后，究竟隐藏了哪些复杂的技术流程呢？我们将从URL本身开始，逐步拆解每一个环节。
URL 的结构
首先，我们需要理解你输入的是什么。一个标准的URL通常包含以下几个核心部分：
- Scheme（协议）：
http://。它告诉浏览器应该使用哪种协议与服务器通信。常见的还有 https://、ftp:// 等。
- Domain（域名）：
example.com。这是网站的“名字”，计算机需要通过它来找到对应的服务器地址。
- Path（路径）：
/product/electric。它指明了资源在服务器上的具体位置，类似于文件系统中的目录结构。
- Resource（资源）：
phone。这是我们最终想要获取的特定文件或数据。
第一步：DNS 查询
浏览器拿到了域名 example.com，但网络通信最终需要的是IP地址。于是，浏览器需要发起一次域名解析。
查询顺序遵循一个高效的缓存层级：
- 浏览器缓存：浏览器会首先检查自身是否缓存了该域名的IP。
- 操作系统缓存：如果浏览器没有记录，则会查询操作系统的hosts文件和DNS缓存。
- 路由器缓存：请求会继续传递到你的本地网络路由器。
- ISP DNS 缓存：网络服务提供商（ISP）的DNS服务器也会有缓存。
- 递归 DNS 查询：如果以上所有缓存都未命中，ISP的DNS服务器将开始从根域名服务器到顶级域名服务器（.com）再到权威域名服务器的递归查询，直到最终获得IP地址。
为了提高效率，每一次成功的DNS查询结果都会被缓存起来，下次访问相同域名时就能快速命中。
第二步：建立 TCP 连接
获取到服务器的IP地址后，浏览器需要与它建立一条可靠的连接，这是通过TCP协议完成的，过程就是我们常说的“三次握手”：
- 客户端向服务器发送一个SYN（同步）包。
- 服务器收到后，回复一个SYN-ACK（同步-确认）包。
- 客户端再发送一个ACK（确认）包。至此，连接建立。
如果是HTTPS呢？ 在TCP连接建立之后，还需要进行TLS握手。这个过程会协商加密算法、交换密钥，最终建立起一个安全的加密通道，之后所有的HTTP请求和响应都会在这个加密通道中传输。
第三步：发送 HTTP 请求
连接就绪，浏览器开始构造一个标准的HTTP请求报文，并通过TCP连接发送给服务器。一个简单的GET请求可能如下所示：
GET /phone HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html
第四步：服务器处理请求
服务器（例如运行Apache或Nginx的Web服务器）收到请求后，会进行一系列处理：
- 解析请求：解析HTTP报文头，理解客户端想要什么（
GET /phone）。
- 路由：根据路径将请求分发给对应的后端处理程序（可能是PHP、Python、Java等应用）。
- 业务处理：处理程序可能查询数据库或缓存来获取数据。
- 生成响应：将数据填充到HTML模板中，生成最终的HTML文档。
第五步：返回 HTTP 响应
服务器处理完毕，会构造一个HTTP响应报文，并通过同一条TCP连接发回给浏览器。一个成功的响应如下：
HTTP/1.1 200 OK
Date: Sun, 30 Jan 2022 00:01:01 GMT
Server: Apache
Content-Type: text/html; charset=utf-8
Content-Length: 1234
<!DOCTYPE html>
<html lang="en">
Hello world
</html>
第六步：浏览器渲染页面
这是将代码变为可视化页面的关键一步。浏览器引擎（如Blink, WebKit）拿到HTML后，会启动一个复杂的渲染流水线：
- 构建DOM树：解析HTML标签，构建文档对象模型（DOM）树。
- 构建CSSOM：解析CSS（包括外部样式表、内联样式），构建CSS对象模型（CSSOM）树。
- 执行JavaScript：遇到
<script> 标签时，会暂停HTML解析，下载并执行JS代码。JS可能会修改DOM或CSSOM。
- 构建渲染树：将DOM树和CSSOM树合并，生成一棵只包含可见元素的渲染树（Render Tree）。
- 布局（Layout/Reflow）：计算渲染树中每个元素在视口内的确切位置和大小。
- 绘制（Paint）：将布局后的元素转换成屏幕上的实际像素。
关于外部资源：
- CSS文件：会并行下载，但其解析会阻塞渲染树的构建（即阻塞渲染）。
- JS文件：默认会阻塞HTML解析。可以使用
async 或 defer 属性改变其加载行为。
- 图片：异步下载，不会阻塞页面初始渲染，下载完成后会触发重绘。
常见的优化手段
了解流程后，我们可以针对每个环节进行优化，以提升页面加载速度。
浏览器/前端优化：
- DNS预解析：在HTML头部使用
<link rel="dns-prefetch" href="//cdn.example.com"> 提前解析后续可能用到的域名。
- TCP预连接：使用
<link rel="preconnect"> 提前建立与重要第三方域名的TCP连接（包含TLS握手）。
- 启用HTTP/2：利用其多路复用特性，在一个连接上并行交错地传输多个请求/响应。
服务器/后端优化：
- 使用CDN：将静态资源分发到全球的边缘节点，使用户就近获取。
- 启用压缩：对文本资源（HTML、CSS、JS）使用Gzip或Brotli压缩，大幅减小传输体积。
- 合理设置缓存：通过
Cache-Control、ETag 等HTTP头，指示浏览器缓存静态资源。
总结
从你敲下回车到页面完整展现，主要经历了六个核心步骤：
- DNS解析：将人类可读的域名转换为机器可读的IP地址。
- TCP/TLS握手：建立可靠（及安全）的数据传输通道。
- 发送HTTP请求：浏览器向服务器发出资源请求。
- 服务器处理：服务器执行逻辑并准备数据。
- 接收HTTP响应：服务器将处理结果（如HTML）返回给浏览器。
- 浏览器渲染：解析、布局、绘制，最终呈现出可视化页面。
整个过程横跨了网络协议栈和应用层逻辑，每一个环节都蕴含着优化点。希望这篇梳理能帮助你更清晰地理解Web应用的基础运行机制。如果你对网络协议或前端技术有更深入的兴趣，欢迎在云栈社区相关板块与大家交流探讨。 | 
发表于 昨天 07:10
|
查看: 5|
回复: 0
