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

最新推荐文章于 2024-10-20 21:12:09 发布
最新推荐文章于 2024-10-20 21:12:09 发布
阅读量382 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CodeTwilight/article/details/125793549
本文详细阐述了用户如何通过浏览器访问网站，从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）页面绘制完成
 

CodeTwilight
关注
浏览器输入一个http协议的url，如何定位服务资源？
F什么琛的博客
03-28 470
一、认识url 由上图可以很清楚的看出url的构成，首先可以看出是那种协议（HTTP或者HTTPS等），接着会进行登录信息的判断，这里根据使用的GET或POST方法，来决定是否在URL上显示用户相关信息，（GET方法在URL中显示用户的相关信息，POST方法反之）。接着是服务器地址加端口号，服务器地址必须得是正确的，端口号可以不写，如果不写代表着使用默认的端口号，接着加载指定路径下的文件（html、.css、.js…），最后是查询字符串和片段标识符。 二、请求过程 1.域名解析 首先浏览器搜索自己的DNS
从浏览器输入地址到页面渲染都经历了哪些过程
qq_53499304的博客
04-24 5256
学习笔记记录
网页从输入网址到渲染完成经历了哪些过程？
jsjbdndn的博客
11-09 735
网页从输入网址到渲染完成经历了哪些过程？
『HTTP知识点』从地址栏输入url地址到页面最终渲染完成，经历了什么？
拎着壳儿跑的蜗牛
12-04 7275
引言 简单的说可以分为六步：1.DNS查询 / 解析、2.TCP连接： TCP三次握手、3.发送请求、4.返回响应、5.渲染页面、6.断开连接：TCP四次挥手 从第一步到第六步，每一个知识点都可以详细的阐述其中的原理，下面是从简洁的过程总结到逐一知识点分析 开始吧我们的旅程吧 页面最终渲染完成经历了以下过程☞ 在浏览器中输入url 用户输入url，比如http://www.google....
从输入 URL 到页面加载完成中间都经历了什么
luoluoxx0115的博客
11-23 7608
目录概述1、URL解析2、DNS解析3、TCP连接4、HTTP请求5、HTTP响应6、页面渲染 概述 1、URL解析：地址栏输入地址，浏览器对输入内容进行解析，判断URL的合法性，和是否有可用缓存 2、DNS解析：域名解析系统（DNS）查找对应的IP地址 3、TCP连接：浏览器向服务器发起TCP连接，与浏览器建立TCP三次握手 4、HTTP请求：浏览器将http请求数据发给服务器（客户端–>服务器） 5、HTTP响应：服务器处理收到的请求，返回响应结果至浏览器（服务器–>客户端） 6、页面
前端面试系列-输入url后全过程&&页面渲染机制&&DOM生成过程
LYFlied的博客
03-27 1688
一、当输入url后，全过程 浏览器缓存 (DNS解析)，解析获取相应的IP地址。 cp连接，三次握手。 浏览器向服务器发送http请求，请求数据包。 将数据返回至浏览器 浏览器收到HTTP响应 读取页面内容，浏览器渲染，解析html源码 生成Dom树、解析css样式、js交互 二、页面渲染机制 三、DOM 1.什么是 DOM 2.DOM 树如何生成 HTML 解析器 3.JavaScript 是如何影响 DOM 生成的 内嵌JavaScript 引入 JavaScript 文件 引入css文件
经典面试题：输入网址后会发生什么？
doreen211的博客
10-30 696
从输入网址到看到网页中间经历了什么？“是一个常见面试题，这个问题贯穿了整个网络系统，对回答者的网络综合素质要求较高。本文中对此问题的大致流程进行较细致的阐述，但篇幅有限，其中仍有一些细节性的知识需要读者自行查阅。
一个页面从输入URL到页面加载显示完成 浏览器渲染过程 三次握手四次挥手
丰的博客
04-22 1338
一个页面从输入URL到页面加载显示完成 浏览器渲染过程 三次握手四次挥手 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ 总体来说分为以下几个过程:1. DNS解析 2. TCP连接 3. 发送HTTP请求 4. 服务器处理请求并返回HTTP报文 5. 浏览器解析渲染页面 6. 连接结束 详解：1. DNS（Domain Name System，域名...
完整渲染过程——从URL到页面
cicistream
10-06 4907
当用户输入一串URL（统一资源定位符）到完整的页面渲染出来，到底经历了什么呢~下面我来描述一下整个过程。 先列出他的大致流程： 浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求； 服务器交给后台处理完后返回数据，浏览器接受文件（HTML/CSS/JS/图像等）； 浏览器对加载到的数据进行解析，建立起相应的内部结构； 载入解析到的资源文件，渲染页面，完成。我们主要分为两部分...
浏览器从输入URL到页面渲染加载的过程（浏览器知识体系整理）
铁锤妹妹的博客
05-10 7725
记得最开始学前端知识时，是一点一点的积累，一个知识点一个知识点的攻克。 就这样，虽然在很长一段时间内积累了不少的知识，但是，总是无法将它串联到一起。每次梳理时都是很分散的，无法保持思路连贯性。
网页从输入网址到渲染完成经历了哪些过程
weixin_30685029的博客
08-19 515
大致可以分为如下7步： 输入网址； 发送到DNS服务器（解析），并获取域名对应的web服务器对应的ip地址； 与web服务器建立TCP连接（低级协议，高级协议基础）； 浏览器向web服务器发送http请求（高级协议）； web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）； 浏览器下载web服务器返回的数据及解析html源文件； 生成DO...
网页从输入网址到渲染完成经历了哪些过程？（面试会问）
qq_43217258的博客
07-20 1401
网页从输入网址到渲染完成经历了哪些过程？ 大致可以分为如下7步： 输入网址； 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址； 与web服务器建立TCP连接； 浏览器向web服务器发送http请求； web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）； 浏览器下载web服务器返回的数据及解析html源文件； 生成DOM树，解析css和js，渲染页面，直至显示完成； 答案： 1输入网址 2 发送到DNS服务器 获取IP地址 3 与服务器建立连接 4 浏览器向服
网页从输入网址到页面渲染完成都经历了哪些过程？
weixin_71370424的博客
10-20 376
浏览器使用HTTP或HTTPS协议与服务器建立TCP连接。这个过程涉及到三次握手，即客户端向服务器发送一个连接请求，服务器回复确认，最后客户端再次回复确认。输入网址，浏览器对地址进行解析，获得协议，主机，端口，路径等信息（获得服务器域名），将获取的服务器域名进行DNS解析（获得IP）。通过IP寻址和arp，找到目标服务器地址（获得MAC地址）
6、网页从输入网址到渲染完成经历了哪些过程
qq_36742720的博客
07-19 1510
大致可分为七步： 1、输入网址 2、发送到DNS服务器，并获取域名对应的web服务器对应的ip地址 3、与web服务器建立tcp连接 4、浏览器向web服务器发送http请求 5、web服务器响应请求，并返回指定url的数据 6、浏览器下载web服务器返回的数据并解析html源文件 7、生成Dom树，解析js和css，渲染页面 ...
web 从输入url到渲染到页面上都经历了哪些过程？
生命不息，挖坑不止
06-28 551
浏览器与服务器简历TCO连接，进行三次握手。（DNS解析完成之后，TCP连接服务器就绪，页面绘制完成后，TCP连接断开）服务器处理浏览器的请求，并返回请求数据，其中包括HTML文档。浏览器将各个节点的涂层合并成一个完整的页面，然后展示到屏幕上。浏览器会进行DNS解析，将域名转换成服务器的IP地址。浏览器向服务器发送HTTP请求，请求页面资源。浏览器进行布局，计算出每个节点在页面上的位置。浏览器解析CSS样式，构建CSSOM树。浏览器进行绘制，将每个节点绘制到屏幕上。浏览器解析HTML文档，构建DOM树。
浏览器从输入URL到渲染完页面的整个过程
猫老板的豆
06-01 3431
一、获取IP地址 IP地址对应一台真实的物理机器，而且IP地址就像人的身份证是唯一的，用户请求服务器，只需要输入为该服务器分配的唯一的IP地址即可。但由于IP地址不便于记忆，因而使用较为语义化的域名来替代IP地址，而且一个域名可能对应了对个IP地址，比如用户输入www.baidu.com,该域名下对应了多个IP，域名解析服务器会根据一定的规则分配给用户其中一个IP地址。 首先会在浏览器的缓存中查找，是否缓存了URL，如果有，就直接向该URL对应的服务器发送请求；如果没有则进行下一步; 在本地的hosts文
网页从输入网址到渲染完成经历了哪些过程及相关协议
dyy_csdn的博客
07-08 680
网页从输入网址到渲染完成经历了哪些过程 输入网址 域名解析（发送到DNS服务器，并进行查找获取域名对应的web服务器对应的ip地址【包含浏览器缓存，路由器缓存，DNS缓存查找】） 建立连接 （与web服务器建立TCP连接） 发送请求（浏览器向web服务器发送http请求） 响应请求，返回数据（web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）） 下载数据（浏览器下载web服务器返回的数据及解析html源文件；） 解析渲染（生成DOM树，解析css和js，渲染页面，直至显示
浏览器地址栏输入一个url到页面加载，都经历了那些
最新发布
03-11
<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、付费专栏及课程。

余额充值