在浏览器地址栏输入一个网址并按下回车后，背后发生了一系列复杂的步骤，这个过程是Web技术的核心。了解它有助于你定位性能瓶颈、理解安全策略和构建更高效的应用。
![图片[1]-从输入URL到页面显示发生了什么？-速码派](http://www.sumapai.com/wp-content/uploads/2026/01/c40ffcb0d8e543b494cf97c423676dd2_tplv-tb4s082cfz-aigc_resize_1080_1080-1024x683.webp)
DNS解析与建立TCP连接
浏览器首先需要将你输入的域名（例如www.example.com）转换为服务器的真实IP地址。这个过程叫做DNS解析。浏览器会依次检查本地缓存、系统缓存、路由器缓存，如果都没有，则会向配置的DNS服务器发起请求，最终获得目标IP。
// 这背后是系统网络栈的工作，并非直接由JavaScript控制拿到IP地址后，浏览器通过TCP三次握手与服务器建立可靠的网络连接。如果是HTTPS请求，还会额外进行TLS握手，以建立安全的加密通道。
发起HTTP请求与服务器响应
连接建立后，浏览器会构建一个HTTP请求报文，包含请求方法（如GET）、路径、协议版本、请求头（如Cookie、User-Agent）等信息，并将其发送给服务器。
GET /index.html HTTP/1.1
Host: www.example.com服务器收到请求后进行处理（可能涉及查询数据库、运行后端逻辑），并返回一个HTTP响应报文，包括状态码（如200 OK）、响应头（如Content-Type、Set-Cookie）和响应体（即HTML文档）。
浏览器解析与构建渲染树
浏览器拿到HTML文档后，会启动解析器。这个过程是渐进式的，边下载边解析。解析HTML时，会构建DOM树；遇到CSS链接（<link>标签）或样式时，会并行下载并解析CSS，构建CSSOM树。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- CSS解析与CSSOM构建 -->
</head>
<body>
<p>Hello World</p> <!-- DOM节点构建 -->
<script src="app.js"></script> <!-- 可能阻塞解析 -->
</body>
</html>DOM树和CSSOM树合并后，形成渲染树（Render Tree），它只包含需要在屏幕上显示的节点及其样式。
布局、绘制与合成
渲染树构建完毕后，浏览器进入布局（Layout，也称Reflow）阶段，计算每个节点在屏幕上的确切位置和大小。然后是绘制（Painting）阶段，将每个节点转换成屏幕上的实际像素，包括填充颜色、绘制边框等。
现代浏览器为了提升性能，会将页面分成多个图层，并利用GPU加速。在合成（Composition）阶段，浏览器将这些图层合并到一起，最终显示在屏幕上。
JavaScript的执行与阻塞
当HTML解析器遇到<script>标签时，默认会暂停HTML解析，下载并执行JavaScript代码。这是因为JavaScript可能会通过document.write或操作DOM来改变文档结构。
<script src="main.js"></script>
<!-- 在 main.js 下载并执行完成前，后续的HTML解析会暂停 -->使用async或defer属性可以改变脚本的加载和执行行为，避免阻塞。CSS的加载和解析虽然不会阻塞DOM构建，但会阻塞渲染，因为浏览器需要完整的CSSOM来构建渲染树。
整个流程是高度优化和流水线化的。理解这个过程，你就明白了为什么要把CSS放在头部、把非关键JavaScript放在底部、以及如何使用async/defer来优化性能。这不仅是面试题，更是性能优化的核心地图。
暂无评论内容