网页输入网址到渲染完成经历了哪些阶段

本文详细阐述了用户如何通过浏览器访问网站,从DNS解析到HTTP请求,再到DOM构建、CSS渲染和JavaScript操作,最后呈现完整页面的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、用户在浏览器中输入url地址

2、浏览器解析域名得到服务器ip地址

3、TCP三次握手建立客户端和服务器的连接

4、客户端发送HTTP请求获取服务器端的静态资源

5、服务器发送HTTP响应报文给客户端,客户端获取到页面静态资源

6、TCP四次挥手关闭客户端和服务器的连接

7、浏览器解析文档资源并渲染页面

浏览器解析文档资源并渲染页面流程:

(1)解析html资源,构建DOM Tree

(2)解析css资源,构建CSS Rule Tree

(3)JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree

(4)解析完成后综合DOM Tree和CSS Tree会生成Render Tree,计算每个元素的位置,这个过程就是回流(layout or reflow)

(5)调用操作系统Native GUI的绘制

(6)页面绘制完成
 

<think>好的,我现在要回答用户关于从浏览器输入URL到页面加载经历的步骤的问题。首先,我需要回忆之前的学习内容,确保自己对这个过程有正确的理解。用户之前已经问过页面渲染完成后提示用户的阶段,现在想了解整个加载流程,所以我需要详细但清晰地分步骤解释。 首先,用户输入URL后,浏览器可能会检查是否有缓存,比如之前访问过的页面资源,如果有的话可能直接加载,节省时间。但如果没有缓存或者缓存过期,就需要进行DNS解析,把域名转换成IP地址。这里可能需要解释DNS查询的过程,包括递归查询和缓存的作用。 接下来是建立TCP连接,三次握手的过程。这部分需要简明扼要地描述,因为用户可能不是技术人员,但需要准确。然后是SSL/TLS握手,如果网站使用HTTPS的话,这一步是必要的,确保安全连接。 然后,浏览器发送HTTP请求,服务器处理请求并返回响应。这里可能需要区分不同的HTTP方法,比如GET请求获取资源,POST提交数据。服务器处理可能涉及后端逻辑,数据库查询等。 之后,浏览器接收到响应后开始解析HTML,构建DOM树,同时遇到CSS和JS文件时会进行加载和执行。这里需要注意渲染阻塞的问题,比如JS的执行可能会影响DOM构建,所以现代浏览器的预解析扫描可能是个优化点。 构建CSSOM和渲染树,布局和绘制页面,最后合成图层显示出来。这个过程可能涉及重排和重绘,但用户的问题可能不需要深入到那个程度,所以保持概括。 此外,还需要考虑可能的重定向步骤,比如服务器返回301或302状态码时的处理。另外,在整个过程中,缓存的机制可能多次出现,比如DNS缓存、资源缓存等,需要提到但不过于深入。 用户可能还想知道各个阶段的时间线,或者如何优化页面加载速度,但当前问题主要是步骤,所以可能需要保持步骤的清晰,分阶段列出,并用例子或比喻帮助理解。 需要检查是否有遗漏的步骤,比如预加载、预渲染等,但这些可能属于更高级的优化,基础流程中可能不需要提及。保持回答结构清晰,分点说明,每个步骤简明扼要,避免技术术语过多,但也要准确。 最后,总结整个流程,帮助用户形成完整的认识。可能还需要对比之前的回答,确保没有重复,但提供新的信息。例如,之前讲的是渲染后的提示阶段,现在则是整个从输入渲染的流程。 需要确保使用中文,语法正确,行内公式用$...$,独立公式用$$...$$,但在这个问题中可能较少涉及数学公式,但如果有技术术语可能需要正确格式。例如,HTTP状态码可能需要用代码块或引号标注。 总之,回答需要涵盖:URL解析、DNS查询、TCP连接、TLS握手、HTTP请求、服务器处理、响应接收、解析渲染等步骤,每个步骤简要说明,结构清晰,帮助用户逐步理解整个过程。</think>### 从浏览器输入 URL 到页面加载的完整流程 --- #### 1. **URL 解析与缓存检查** - **用户输入处理** 浏览器自动补全协议(如 `http://` 或 `https://`)并规范化 URL 格式。 **示例**:输入 `example.com` → 自动转换为 `https://example.com`。 - **缓存检查** 浏览器优先检查以下缓存(按优先级排序): - **Service Worker 缓存**(若注册了 Service Worker) - **内存缓存**(高频访问资源) - **磁盘缓存**(HTTP Cache,通过 `Cache-Control` 控制) --- #### 2. **DNS 域名解析** - **查询顺序** 1. 浏览器缓存 → 2. 操作系统缓存 → 3. 路由器缓存 → 4. ISP DNS 服务器 → 5. 递归查询根域名服务器 **关键记录**:最终获取目标服务器的 IP 地址(如 `93.184.216.34`)。 - **优化技术** - **DNS 预解析**:通过 `<link rel="dns-prefetch" href="//example.com">` 提前解析。 --- #### 3. **建立 TCP 连接(三次握手)** ```plaintext 1. 客户端 → 服务器:SYN(同步请求,Seq=x) 2. 服务器 → 客户端:SYN-ACK(确认响应,Seq=y, Ack=x+1) 3. 客户端 → 服务器:ACK(最终确认,Ack=y+1) ``` **耗时分析**:通常 1~3 个 RTT(Round-Trip Time)。 --- #### 4. **TLS 安全握手(仅 HTTPS)** - **协商加密套件**:选择 TLS 版本、对称加密算法(如 AES)、密钥交换方式(如 ECDHE)。 - **证书验证**:检查服务器证书链有效性(如 CA 机构签名)。 - **密钥交换**:通过非对称加密协商会话密钥。 **完整流程**: ```plaintext 1. ClientHello → 2. ServerHello + 证书 → 3. 密钥交换 → 4. 完成握手 ``` --- #### 5. **发送 HTTP 请求** - **请求结构** ```http GET /index.html HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 Accept: text/html ``` - **关键方法**:`GET`(获取资源)、`POST`(提交数据)。 - **头部控制**:`Cookie`、`Cache-Control`、`Accept-Encoding` 等。 --- #### 6. **服务器处理请求** - **后端逻辑**:Web 服务器(如 Nginx)转发请求到应用服务器(如 Node.js、Java)。 - **动态生成**:执行数据库查询、API 调用等操作,生成 HTML 响应。 - **响应返回**:包含状态码(如 `200 OK`)、响应头、响应体。 --- #### 7. **浏览器解析与渲染** - **构建 DOM 树** 解析 HTML → 生成 DOM 节点树(遇到 `<script>` 会暂停解析,除非标记 `async/defer`)。 - **构建 CSSOM** 解析 CSS 规则 → 生成 CSS 对象模型树。 - **合并渲染树(Render Tree)** 组合 DOM 和 CSSOM,排除不可见元素(如 `<head>`、`display: none`)。 - **布局(Layout/Reflow)** 计算元素几何位置(如宽度、边距),生成“盒模型”。 - **绘制(Paint)与合成(Composite)** 分层绘制 → 合成线程处理 GPU 加速(如 CSS `transform`)。 --- #### 8. **加载动态资源** - **异步内容处理**: ```javascript // AJAX 数据加载示例 fetch('/api/data') .then(response => response.json()) .then(data => updateDOM(data)); ``` - **延迟加载(Lazy Load)**:对图片/视频使用 `loading="lazy"`。 --- #### 9. **触发关键事件** | 事件 | 触发条件 | 典型用途 | |-----------------------|-----------------------------------|----------------------------| | `DOMContentLoaded` | HTML 解析完成(无需等待图片/CSS) | 绑定交互事件 | | `load` | 所有资源加载完毕 | 统计页面完全加载时间 | | `beforeunload` | 页面关闭前 | 提示用户保存未提交数据 | --- ### 流程优化关键点 1. **减少 DNS 查询**:使用 DNS 预解析或 HTTP/2 域名分片。 2. **压缩资源**:Gzip/Brotli 压缩文本资源,WebP 格式图片。 3. **复用连接**:HTTP/2 多路复用替代短连接。 4. **延迟非关键 JS**:通过 `async/defer` 控制脚本加载。 5. **关键渲染路径优化**:内联首屏 CSS,优先加载可见内容。 --- ### 总结流程图 ```plaintext 用户输入 URL → 缓存检查 → DNS 解析 → TCP 握手 → TLS 握手 → HTTP 请求 → 服务器响应 → 解析渲染 → 加载完成 ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值