用户从输入url到显示页面的过程

最新推荐文章于 2024-05-16 18:33:16 发布

原创最新推荐文章于 2024-05-16 18:33:16 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了网页从DNS解析到最终展示的全过程，包括DNS解析、TCP连接建立、发送HTTP请求、接收响应并解析HTML、渲染页面直至TCP连接关闭的每个步骤。

一、DNS解析

就是将域名解析成IP地址（优先走缓存）

浏览器缓存
本机缓存
路由器缓存
运营商缓存（移动联通电信等）
递归查询（世界上仅有的13台根DNS服务器）

二、TCP（协议）连接的三次握手

浏览器发送给服务器
服务器收到数据，确认可以收到，并发送数据
浏览器收到服务器返回信息，并发送数据

相当于打电话

浏览器：喂，能听到吗
服务器：能听到，什么事
浏览器：接着说事情

三、发送请求（请求报文）

四、得到响应（响应报文）

五、浏览器解析html，开始渲染页面

预解析，发送请求，加载所有的外部资源
解析html，生成dom树
解析css，生成css树
合并成一个render树
js是否操作了dom或者css样式
展示页面

六、断开TCP连接，四次挥手

确保数据的完整性

第一次挥手：浏览器发给服务器，我接收完了，可以断开了
第二次挥手：服务器发给浏览器，我还没接收完，等一下 / 接收完了，验证数据完整性
第三次挥手：服务器发给浏览器，我接收完了，你断开吧
第四次挥手：浏览器发给服务器，断开连接

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

庆怀王

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

从输入url到浏览器展示页面的过程(经典前端面试题)

qingsemengshou的博客

08-05

248

输入url，首先会进行 dns查询解析域名获取ip地址优化策略:使用dnf-prefech属性，进行dns预查询 tcp连接浏览器发送tcp连接的申请的报文，会携带SYN标志位，seq序号，SYN标志位设为1就说明这是一个申请连接的报文，之后服务器回复ACK标志位，ack序号=seq+1，这样浏览器就可以通过检验ack序号的值判断连接是否成功，ACK标志位为1说明这就是一个确认报文，之后服务器发送申请连接的报文，按理说应该是浏览器向服务器端申请连接，服务器回复确认，然后服务器向浏览器申请连接

从输入URL到网页呈现的过程

分享包括但不限于计算机基础知识、数据结构与算法、Golang技术栈。年与时驰，意与日去，遂成枯落，多不接世，悲守穷庐，将复何及！

01-31

2550

博客主页：🏆看看是李XX还是李歘歘🏆 🌺每天分享一些包括但不限于计算机基础、算法等相关的知识点🌺 💗点关注不迷路，总有一些📖知识点📖是你想要的💗 ⛽️今天的内容是从输入URL到网页呈现的过程，包括DNS解析、三次握手、四次挥手等，⛽️💻💻💻 从输入URL到网页呈现的过程大致如下： DNS解析建立tcp连接客户端发送HTPP请求服务器处理请求服务器响应请求浏览器展示HTML 浏览器发送请求获取其他在HTML中的资源。用户单击鼠标后所发生的事件按...

参与评论您还未登录，请先登录后发表或查看评论

面试题：从输入URL到页面加载这个过程发生的事

qq_42324085的博客

03-11

283

申明：本博客仅作为博主的学习笔记，图文均转载自： https://segmentfault.com/a/1190000006879700https://segmentfault.com/a/1190000006879700答案：总体分为如下过程：白话解答：浏览器查找域名的IP地址浏览器向web服务器发送一个HTTP请求服务器处理请求服务器返回一个HTML响应浏览器开始显示HTML 专业解答： DNS解析 TCP连接发送HTTP请求服务器处理请求...

浅谈DNS域名解析

Burder的博客

08-10

833

DNS解析 DNS解析的过程就是寻找哪台机器上有你需要资源的过程，寻找的过程遵循就近原则。输入一个网址并按回车的时候浏览器会根据输入的URL去查找对应的IP，具体过程如下：（1）首先是查找浏览器缓存，浏览器会保存一段时间内访问过的一些网址的DNS信息，不同浏览器保存的时常不等。（2）如果没有找到对应的记录，这个时候浏览器会尝试调用操作系统缓存来继续查找这个网址的对应DNS信息。（3）如果还...

用户从输入url到显示页面这个过程发生了什么

weixin_46100406的博客

03-04

446

DNS解析 TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束

浏览器输入域名访问全流程解析

热门推荐

root

08-12

1万+

当你在浏览器中输入了一个网址URL，按下回车到页面展示内容的这个过程，发生了什么？可以从浏览器、服务器、计算机网络相关尝试分析。输入 URL 之后，浏览器做的第一件事情就是 DNS 域名解析。一、DNS 域名解析我们分析五层网络模型时就知道了数据链路层传输的帧，并不是通过字符串寻找到目标主机，而是通过 MAC 地址找到目标主机的硬件地址，要通过 ARP 协议解析获取 MAC 地址，我们需要目标主机的 IP 地址，所以问题是如何通过域名获取对应 IP 地址。所以第一个步骤，我们需要获取域名.

从输入url到页面展现的全过程

weixin_39357177的博客

11-24

1502

假定出现一种异常情况，即A发出的第一个连接请求报文段并没有丢失，而是在某些网络节点长时间滞留了，以致延误到连接释放以后的某个时间才到B。本来这是一个已失效的报文段。但是B收到此失效的连接请求报文段后，就误认为是A有发出一次新的连接请求。于是就向A发出确认报文段，同意建立连接。假定不采用三次握手，那么只要B发出确认，新的连接就建立了。由于现在A并没有发出建立连接的请求，因此不会理睬B的确认，也不会向B发送数据。但B却以为新的运输连接已经建立了，并一直等待A发来数据。B的许多资源就这样拜拜浪费了。

经典笔试题：一个页面从输入URL到页面加载显示完成，这个过程都发生什么？

weixin_45295262的博客

11-08

1902

笔记是我自己总结的，不对的地方多多指出~ 整体过程： 1.首先，在浏览器地址栏输入url,回车 2.根据Url,浏览器先查看浏览器缓存-系统缓存-路由缓存…，如果缓存中有，会从缓存中读取并显示，若没有，则跳到第三步 3.在发送http请求前，先进行DNS域名解析，获取访问的IP地址 4.浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。 5.握手成功后，浏览器和服务器已经建立了通信，浏览器向服务器发送http请求，请求数据包。 6.服务器接收到请求，处理请求并返回url指定数据给浏览器。 7.浏览器

浏览器渲染机制-从输入url到渲染出页面的整个过程

博哥的二进制世界

05-16

1093

浏览器是我们日常开发的重要的工具，那么你了解浏览器吗？即使在前端面试中，我们也经常会遇到：在浏览器地址中从输入url地址到出现页面，这个过程发生了什么？介绍一下重绘和回流？这一类关于浏览器的问题。我们可能会知道大概的轮廓但对于具体的细节却是不那么清楚，那么今天我们就从浏览器组成开始来了解一下浏览器的渲染机制。

概述一个页面从输入URL到页面加载完的过程

08-31

【页面加载过程】是从用户在浏览器中输入URL到最终页面完全加载完毕的一系列复杂网络活动。这个过程可以分为几个关键步骤： 1. **域名解析**：首先，浏览器需要将输入的URL转换为服务器的IP地址。这涉及到DNS...

从输入一个网址到浏览器显示页面经历的全过程

weixin_45300669的博客

07-20

5648

作为网络专栏的开篇导文，本文概况介绍下经典案例从输入一个网址到浏览器显示页面的全过程。

输入域名到页面显示的一个过程

mingtian_mt的博客

08-22

1278

1、输入网址（域名） 2、DNS解析 3、建立tcp连接 4、客户端发送HTTP请求 5、服务器处理请求 6、服务器相应请求 7、浏览器展示HTML 8、浏览器发送请求获取其他在HTML中的资源 1、输入地址当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。对于google的chrome 的浏览器，他甚至会直接从缓存中把网页展...

从输入url到页面展示到底发生了什么

七弦桐

05-01

1605

输入地址浏览器查找域名的 IP 地址　　浏览器向 web 服务器发送一个 HTTP 请求服务器的永久重定向响应浏览器跟踪重定向地址服务器处理请求服务器返回一个 HTTP 响应　览器显示 HTML 浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）总的过程大概如下:1、输入地址当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 ur

面试题:从用户在浏览器输入域名,到浏览器显示出页面,这中间发生了什么(工作过程)?

前端小99的博客

09-23

1177

一种解释方式： 1.在浏览器中输入地址,如:www.baidu.com 2.向DNS服务器查询网站IP地址 3.DNS服务器返回网站IP地址(如:119.75.217.56) 4.浏览器得到IP地址后.浏览器会把用户输入的域名转化为HTTP服务请求 5.服务器接收到请求后,返回网页信息 6.客户端浏览器将这些信息组织成用户可以查看的网页形式另一种：浏览器从URL中解析出服务器的主机名；浏览器把服务器主机名转换为服务器的IP地址；浏览器从URL中解析出与服务器端通讯的端口号（如果存在）.

从输入URL到页面展示的详细过程（从输入url到页面展示到底发生了什么）

dayangjie的博客

11-21

2230

从输入URL到页面展示的这个过程中牵扯到太多知识点，这里做一个大概的整理。文章主要内容摘自以下参考文献，流程有调整，为个人整理。参考文章主要有： https://www.cnblogs.com/xiaohuochai/p/9193083.html https://...

从浏览器输入URL到页面显示的过程

weixin_44374938的博客

04-27

1115

从浏览器地址栏输入url到显示页面的步骤：目录 1.概述浏览器根据请求的URL交给DNS域名解析器，找到真实IP，向服务器发起请求；三次握手建立连接，服务器交给后台处理完成后返回数据，浏览器接收文件（HTML，JS，CSS,图像等），数据传入完成后四次挥手断开连接。浏览器对加载到的资源（HTML,JS，CSS等）进行语法解析，建立相应的内部数据结构。载入解析到的资源文件，渲染页面，完成。 2.DNS域名解析 DNS域名解析过程又分为七步： 1.浏览器缓存 2.系统缓存 3,路由缓存 4.ISP.

从用户浏览器输入url到用户看到页面结果的过程，发生了什么事情？

zhengwish的专栏

05-25

4324

题外话：最近经历面试，被问到至少三次这个问题，想起来总结一下。其实这个问题可以换个问法：请描述一下一次完整的http请求过程。 1、域名解析域名解析的过程： 1）.查询浏览器自身DNS缓存 2）.若上面没有查找到，则搜索操作系统自身的dns缓存 3）.若上面没有找到，则尝试读取hosts文件 4）.若上面没有找到，向本地配

浏览器输入URL后到显示页面的全过程

最新发布

04-25

<think>好的，我现在需要详细回答用户关于浏览器输入URL到页面加载完成的全过程的问题。首先，我得回顾一下用户提供的引用资料，确保答案准确并涵盖所有关键步骤。用户提到了四个引用，分别涉及网络协议栈、浏览器架构、服务器处理、HTTP请求示例、URL结构、资源加载阻塞行为等。首先，用户的需求是了解从输入URL到页面显示的全过程，所以需要分步骤详细说明。根据引用内容，这个过程大致可以分为以下几个阶段：DNS解析、建立TCP连接（三次握手）、发送HTTP请求、服务器处理请求并返回响应、浏览器解析和渲染页面、资源加载与阻塞处理等。接下来，我需要确保每个步骤都正确引用相关资料。例如，引用[1]提到覆盖网络协议栈、浏览器架构等，可以用于整体流程的结构。引用[2]给出了HTTP请求的示例，可以用在发送请求的部分。引用[3]解释了URL的结构和协议，适用于初始步骤的解析。引用[4]涉及资源加载和阻塞，特别是CSS和JS的影响，这部分需要详细说明渲染阶段的阻塞行为。需要注意的是，用户可能对某些技术细节感兴趣，比如三次握手的具体过程，或者CSS/JS如何影响渲染，这些都需要结合引用内容展开。同时，用户之前的问题是关于SYN+ACK在TCP握手的作用，所以在建立TCP连接的部分可能需要更详细的技术说明，但当前问题更关注整体流程，所以应适当简化，但保持准确性。另外，用户要求回答结构清晰，分步骤解决问题，所以需要将流程分解成明确的步骤，每个步骤下可能有子步骤或关键点。例如，DNS解析可以包括查找缓存、递归查询等；渲染部分包括DOM树、CSSOM、布局、绘制等。还要检查是否有遗漏的步骤，比如可能存在的重定向、缓存检查（如HTTP缓存）、SSL/TLS握手（如果是HTTPS）、资源加载并行性、回流与重绘等。引用[4]提到CSS不会阻塞DOM解析但阻塞渲染，JS会阻塞HTML解析，这些需要明确说明。最后，生成相关问题时要基于用户可能感兴趣的扩展点，比如性能优化、安全考虑、具体技术细节（如HTTP/2的影响），或者调试方法（如使用开发者工具分析加载过程）。现在需要组织这些信息，确保每个步骤逻辑连贯，引用正确，并且语言符合中文表达，使用行内公式和独立公式的格式正确。同时，按照用户之前的示例，使用标题、子标题、代码块（如果有的话）、列表和表格来增强可读性。</think>### **浏览器输入URL到页面加载完成的详细技术流程** --- #### **一、URL解析与请求初始化** 1. **协议与端口识别** - 解析URL结构：`协议://域名:端口/路径?查询参数#片段` - 默认端口映射：HTTP（80）、HTTPS（443），若未指定则自动填充[^3] - 示例：`http://www.baidu.com` → 协议为HTTP，端口80 2. **输入内容处理** - 若输入非URL格式（如搜索关键词），浏览器调用默认搜索引擎跳转[^1] --- #### **二、DNS域名解析** 1. **解析优先级** - **浏览器缓存** → **系统缓存** → **路由器缓存** → **本地DNS服务器递归查询**[^1] - 若域名已解析，直接获取IP地址；否则进入递归查询流程 2. **DNS查询过程** ```plaintext 客户端 → 本地DNS → 根DNS → 顶级域DNS → 权威DNS → 返回IP ``` - 最终获得目标服务器的IP地址（如`14.215.177.38`）[^3] --- #### **三、建立TCP连接（三次握手）** 1. **SYN同步请求** - 客户端发送`SYN=1, seq=x`报文，进入`SYN_SENT`状态[^1] 2. **SYN+ACK确认响应** - 服务端回复`SYN=1, ACK=1, seq=y, ack=x+1`，进入`SYN_RCVD`状态[^1] 3. **最终ACK确认** - 客户端发送`ACK=1, seq=x+1, ack=y+1`，双方进入`ESTABLISHED`状态[^1] $$ \text{总耗时} = RTT_1 (\text{SYN}) + RTT_2 (\text{SYN+ACK}) + RTT_3 (\text{ACK}) $$ > **注**：HTTPS需额外进行TLS握手（约增加2 RTT）[^3] --- #### **四、发送HTTP请求与服务器响应** 1. **请求报文构造** - 包含请求行、请求头、空行、请求体（若为POST）[^2] ```http GET /index.html HTTP/1.1 Host: www.baidu.com User-Agent: Mozilla/5.0 Accept: text/html Connection: keep-alive ``` 2. **服务器处理流程** - Web服务器（如Nginx）接收请求 → 路由匹配 → 后端处理（如PHP/Python） → 生成HTML响应 3. **响应报文返回** ```http HTTP/1.1 200 OK Content-Type: text/html Content-Length: 1024 <!DOCTYPE html> <html>...</html> ``` --- #### **五、浏览器解析与渲染** 1. **构建DOM树** - **HTML解析器**逐行解析字节流，生成DOM节点，构建DOM树 - **预加载扫描器**提前发现外部资源（CSS/JS/图片）并触发下载[^4] 2. **构建CSSOM树** - 解析CSS文件，生成CSS规则树 - **关键点**：CSS解析不阻塞DOM构建，但会阻塞渲染（Render Tree生成）[^4] 3. **合并Render树** - 将DOM树与CSSOM树合并，计算节点样式与布局 4. **布局（Layout）与绘制（Paint）** - **布局**：计算每个节点的几何位置（如宽高、坐标） - **绘制**：将布局结果转换为屏幕像素（栅格化） --- #### **六、资源加载与阻塞行为** | **资源类型** | **阻塞行为** | **优化策略** | |--------------|----------------------------------------|---------------------------------------| | **CSS** | 阻塞渲染，不阻塞DOM解析 | 内联关键CSS，异步加载非关键CSS[^4] | | **JavaScript** | 阻塞DOM解析（除非标记`async/defer`） | 使用`defer`或异步加载脚本[^4] | | **图片** | 不阻塞解析，延迟渲染 | 懒加载、预加载 | --- #### **七、关键性能优化点** 1. **减少DNS查询**：使用DNS预解析`<link rel="dns-prefetch">` 2. **TCP复用**：启用HTTP Keep-Alive减少握手次数[^2] 3. **资源压缩**：Gzip压缩、图片WebP格式 4. **并行加载**：HTTP/2多路复用替代队头阻塞[^1] --- ### **相关问题扩展** 1. **为什么CSSOM必须完全生成后才能构建Render树？** 2. **如何通过Chrome DevTools的Performance面板分析页面加载瓶颈？** 3. **HTTP/2的服务器推送（Server Push）如何加速资源加载？** 4. **Service Worker如何实现离线缓存与网络请求拦截？** --- **总结**：从URL输入到页面渲染是一个分层协作的过程，涉及**网络协议栈**、**浏览器引擎**和**渲染管线**的高效配合。理解各阶段阻塞机制与优化策略，是提升Web性能的关键[^4]。