<think>我们正在回答用户关于“从
浏览器输入URL到页面渲染的完整流程”的问题。用户提供了5个引用，我们需要参考这些引用，并结合我们的知识，给出完整的流程。根据引用[4]中提到的骨架，我们可以将整个流程分为以下几个主要步骤：1.
浏览器接收
URL并开启新进程2.解析
URL3.DNS解析4.建立TCP连接（三次握手）5.发送HTTP请求6.
服务器处理请求并返回
响应7.
浏览器接收
响应并解析8.构建DOM树和CSSOM树，合并成渲染树，布局和绘制9.断开TCP连接（四次挥手）同时，引用[1][2]提到了JavaScript的加载、解析和执行会阻塞DOM的构建，引用[5]对加载、解析和渲染做了定义。因此，我们可以按照以下步骤详细描述：步骤1：
浏览器进程处理-用户
输入URL后，
浏览器进程会进行处理。如果是
URL，则准备发起网络请求。步骤2：解析
URL-
浏览器解析
URL，提取协议、域名、端口、路径等信息。步骤3：DNS查询-
浏览器将域名发送给DNS
服务器，DNS
服务器返回对应的IP地址（可能经过本地缓存、本地DNS
服务器、根域名
服务器等多层查询）。步骤4：建立TCP连接-
浏览器根据IP地址和端口（默认为80或443）与
服务器建立TCP连接（三次握手）。步骤5：发送HTTP请求-
浏览器构建HTTP请求报文（包括请求行、请求头和请求体），通过TCP连接发送给
服务器。步骤6：
服务器处理请求并返回
响应-
服务器接收到请求后，根据请求路径和参数处理请求，生成HTTP
响应（包括状态行、
响应头和
响应体），将资源（HTML、CSS、JS等）返回。步骤7：
浏览器接收
响应-
浏览器接收到
响应后，根据状态码（如200）判断请求成功，然后开始解析
响应内容。步骤8：解析HTML构建DOM树-
浏览器解析HTML文件，构建DOM树。这个
过程是逐步进行的，
浏览器从网络接收数据并解析。-在解析
过程中，如果遇到外部资源（如CSS、图片、JS等），会并行下载这些资源（注意：JS可能会阻塞DOM解析）。步骤9：解析CSS构建CSSOM树-
浏览器解析CSS文件（包括内联样式、外部样式表），构建CSSOM树。步骤10：合并DOM和CSSOM形成渲染树（RenderTree）-将DOM树和CSSOM树合并，排除不可见元素（如head、display:none的元素），形成渲染树。步骤11：布局（Layout/Reflow）-根据渲染树计算每个节点的几何位置和大小（布局）。步骤12：绘制（Paint）-将布局后的节点绘制到屏幕上（像素填充）。步骤13：合成（Compositing）-
浏览器将各层合成，最终显示页面。步骤14：断开TCP连接（四次挥手）-当页面加载完成后，如果不需要保持连接，则会断开TCP连接（四次挥手）。注意：在解析HTML时，如果遇到JavaScript：-根据引用[1][2]，当HTML解析器遇到JavaScript（无论是内联还是外链）时，会暂停DOM的解析，执行JavaScript代码。-但是，如果JavaScript代码中操作了CSS，而CSSOM尚未构建完成，则JavaScript的执行会被延迟，直到CSSOM构建完成（因为JavaScript可能依赖CSS样式）。-因此，JavaScript的执行会阻塞DOM解析，而CSS的加载和解析也会阻塞JavaScript的执行。另外，现代
浏览器使用预解析（pre-scan）技术，在构建DOM的同时，提前下载外部资源（如CSS、JS、图片等），以优化性能。下面我们按照这个流程详细展开，并注意在关键步骤引用用户提供的引用内容。</think>###
浏览器输入URL到页面渲染完整流程
以下是
浏览器从
输入URL到页面渲染的详细
过程，包含网络请求、解析、渲染和脚本执行等关键环节：
#### 1. **
URL解析与准备阶段**
- **
URL分解**：
浏览器解析协议（HTTP/HTTPS）、域名、端口和路径[^4]
- **进程分配**：
浏览器为新页面分配独立进程（通常每个标签页一个渲染进程）
- **HSTS检查**：检查是否在HSTS列表，强制HTTPS连接（安全策略）
#### 2. **网络请求阶段**
1. **DNS解析**：
- 查询
浏览器缓存 → 操作系统缓存 → 本地DNS
服务器 → 递归查询至根域名
服务器[^4]
- 最终获取域名对应的IP地址（如 `www.example.com` → `192.0.2.1`）
```mermaid
graph LR
A[
浏览器缓存] --> B[系统缓存]
B --> C[路由器缓存]
C --> D[本地DNS]
D --> E[根域名
服务器]
```
2. **TCP连接**：
- 三次握手建立TCP连接（SYN → SYN-ACK → ACK）[^4]
- HTTPS额外进行TLS握手（交换证书、协商密钥）
3. **HTTP请求**：
- 构建请求报文（请求行 + 头部 + 空行 + 可选的body）
- 发送请求到
服务器（如 `GET /index.html HTTP/1.1`）
4. **
服务器响应**：
-
服务器返回状态码（如200 OK）和
响应体（HTML文件）[^3]
- 包含
响应头（Content-Type, Cache-Control等）
#### 3. **解析与构建阶段**
1. **HTML解析与DOM构建**：
- 字节流 → 字符流 → 令牌化 → 构建DOM树
- **关键特性**：增量解析（边下载边解析）
```html
<!-- 示例：解析
过程 -->
<html>
<body>
<div>Hello</div> <!-- 解析到此即创建DOM节点 -->
</body>
</html>
```
2. **CSS解析与CSSOM构建**：
- 解析外部CSS文件/内联样式，构建CSSOM树（样式规则层级）
- **阻塞规则**：CSS不阻塞DOM解析，但阻塞渲染[^5]
3. **JavaScript处理**：
- 遇到 `<script>` 标签时：
- 暂停DOM解析[^1][^2]
- 下载并执行JS（若为外部脚本）
- 执行完毕恢复DOM解析
- **优化机制**：`async/defer` 属性可改变阻塞行为
#### 4. **渲染与绘制阶段**
1. **渲染树合成**：
- 合并DOM树和CSSOM树 → 生成渲染树（Render Tree）
- 排除不可见节点（如`<head>`、`display:none`）
2. **布局（Layout/Reflow）**：
- 计算元素几何信息（位置、尺寸）
- 受CSS盒模型、浮动、定位等影响
3. **绘制（Paint）**：
- 将布局结果转换为像素数据
- 分层绘制（不同层合成最终界面）[^5]
- 触发重绘（颜色变化）或回流（几何变化）
4. **合成（Compositing）**：
- GPU加速合成各图层
- 最终输出到屏幕显示
#### 5. **关键阻塞点与优化**
| 阶段 | 阻塞行为 | 优化方案 |
|---------------|----------------------------------|----------------------------|
| CSS加载 | 阻塞渲染树合成 | 内联关键CSS，媒体查询 |
| JS执行 | 阻塞DOM解析和后续渲染 | `async/defer`，代码分割 |
| 图片加载 | 不阻塞解析但延迟布局完成 | 懒加载，尺寸预定义 |
| 字体加载 | 可能导致FOUT/FOIT | `font-display: swap` |
> **完整流程图**：
> ```
>
URL输入 → DNS解析 → TCP握手 → HTTP请求 → 接收
响应
> → 解析HTML构建DOM → 解析CSS构建CSSOM
> → 执行JavaScript（可能暂停解析）
> → 合并渲染树 → 布局 → 绘制 → 合成显示
> ```
#### 6. **后续行为**
- **异步资源加载**：图片、字体等非阻塞资源继续加载
- **事件触发**：触发 `DOMContentLoaded`（DOM就绪）和 `load`（所有资源加载完成）事件
- **保持连接**：HTTP/1.1默认keep-alive复用连接，HTTP/2支持多路复用
> 此流程解释了为何将CSS放在头部（尽早加载）而JS放底部（减少阻塞）[^1][^2][^5]。
---
### 相关问题
1. **CSS加载为何会阻塞渲染？JavaScript执行如何影响DOM构建？**
[深入解析阻塞机制与优化方案]
2. **现代
浏览器如何通过预加载扫描器优化页面加载性能？**
[探讨资源优先级、预连接、预渲染等机制]
3. **重排（Reflow）和重绘（Repaint）触发场景及优化策略有哪些？**
[分析CSS属性影响、GPU加速、批量更新等技术]
当在浏览器输入URL后，会经历DNS解析、TCP三次握手建立连接、发送HTTP请求、服务器处理请求并返回数据、浏览器解析渲染页面、最后通过TCP四次挥手关闭连接。整个过程涉及DNS缓存、TCP连接的可靠性、HTTP请求与响应以及页面渲染的细节。
最低0.47元/天 解锁文章
扫一扫
1612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
