从输入 URL到用户看到页面都经历了哪些

最新推荐文章于 2022-11-24 11:00:20 发布
最新推荐文章于 2022-11-24 11:00:20 发布
阅读量402 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 浏览器渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/github_36673034/article/details/88974598
本文详细介绍了网页从请求到加载的整个过程，包括地址栏网址缓存、DNS缓存、HTTP请求缓存等多个环节，并解释了浏览器如何处理HTML、CSS构建DOM树、CSS树以及渲染树的过程。

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

一、浏览器请求、加载在这里插入图片描述

  1. 地址栏网址缓存
  2. 检查 HSTS 预加载列表 （307）
  3. DNS 缓存
  4. ARP（地址解析协议）缓存
  5. TCP 发送缓冲区 & 接收缓冲区
  6. HTTP 请求缓存（ CDN 节点缓存、代理服务器缓存、浏览器缓存、后端动态计算结果缓存等 ）

二、浏览器渲染
在这里插入图片描述

  1. 处理HTML并构建dom tree
  2. 处理css并构建 css tree
  3. dom tree 和 css tree 合并成 render tree
  4. render tree 结合layout(层级上下文)生成render layer
  5. reder layer 和 graphics layer 合并成页面

说明：
脚本执行的时机：
1.script 加载到时立即执行
2.script defer 页面解析时异步按序执行DomcontentLoad之前完成
3.script async 脚本加载完成异步无序执行，不一定在DomcontentLoad之前或之后，一定在onload之前完成

从浏览器输入网址(URL)，到最终展示页面，都发生了什么？
CYK_byte的博客
11-01 4016
从（如下图）到你按下回车，再到最后出现这个网页界面（如下图）中间到底发生了什么？接下来就带你一步步进行解析~
从输入URL到页面展示的过程详解
蔡姐的博客
12-26 2887
作为一个前端人员，面试时经常会被问及这个问题：“在浏览器从输入URL到页面展示中经历了什么过程”？这个问题我之前也是一知半解，随着对内容了解的越多，发现这个问题涵盖的面越广，涉及的知识也很多，所以今天将它整理一下，方便自己和其他小伙伴一起学习。 由于这个问题涉及知识很多，而且我也想把这些知识都一起整理一下，所以本文采用总-分-总的的行文思路，具体内容如下： 首先介绍整体流程所需要涉及的几个方面 其次分别介绍每个方面所涉及的知识 最后一节再详细的说明整体流程 要是有小伙伴觉得之前的内容很无聊，或者我说的不
从输入URL地址到看到页面，中间都经历了哪些？
weixin_40925295的博客
11-06 625
目录URL解析地址解析域名解析编码解析缓存检查强缓存协商缓存数据缓存DNS解析TCP三次握手数据传输TCP四次握手页面渲染 URL解析 地址解析 域名解析 http://user:pass@www.baidu.com:443/index.html?user-a&psw=sd#video http：协议 user:pass ：登录信息（认证） www：服务器名 baidu.com：域名 443：端口号（https默认端口号） index.html：请求资源文件路径 user-a&psw=s
用户从输入URL到看到网页发生了什么？
weixin_33862188的博客
12-24 147
一、在浏览器地址栏输入URL 二、浏览器查看缓存1、如果资源未缓存，发起新请求如果已缓存，检验是否处于有效期，资源处于有效期内直接提供给客户端，否则与服务器进行验证。2、检验有效期通常有两个HTTP头进行控制Expires和Cache-Control：（1）HTTP1.0提供Expires，值为一个绝对时间表示缓存有效期日期（2）HTTP1.1增加了Cache-Control: max-age=...
当用户输入一个url地址后，到看到页面的过程，期间发生了什么？
sunshine215的博客
01-07 1833
1）如果地址是一个IP地址，会直接找该IP对应的网络计算机。如果不是IP地址，则通过DNS（域名系统）将该地址解析成IP地址，再去网络上找对应的计算机。DNS服务器本身也IP，你的网络设置包含DNS服务器的IP。 注：DNS解析完成，查找对应的网络计算机时，可能电脑直接询问的DNS服务器可能没有对应的IP，那当前DNS服务器就会向它的上级服务器询问，上级服务器也可能没有，就依次一层层向上找，最高查
面试题:从用户在浏览器输入域名,到浏览器显示出页面,这中间发生了什么(工作过程)?
yeliner的博客
06-07 8811
这是一道很基础的题,但是也容易被忽视.主要是要进行域名解析. 1.在浏览器中输入地址,如:www.baidu.com 2.向DNS服务器查询网站IP地址 3.DNS服务器返回网站IP地址(如:119.75.217.56) 4.浏览器得到IP地址后.浏览器会把用户输入的域名转化为HTTP服务请求 5.服务器接收到请求后,返回网页信息 6.客户端浏览器将这些信息组织成用户可以查看的网页形式...
从输入URL到网页加载成功，经历了什么
u010127161的博客
05-10 2430
不出意外的话，现如今大多数人的工作都离不开电脑，所以我们每天必做的就是打开浏览器，输入URL，然后等待网页加载处理，再继续接下来的工作。但是，在我们输入URL到网页加载出来，中间到底发生了什么呢？一般是经历下面一些过程:1.在浏览器里输入网址2.通过访问的域名找出IP地址，DNS查找过程如下：(1)浏览器缓存---浏览器会缓存DNS记录一段时间，不同浏览器保存的时间不同。(2)系统缓存---如果在...
从输入 URL 到页面加载完成中间都经历了什么
luoluoxx0115的博客
11-23 7640
目录概述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到页面展现的全过程
weixin_39357177的博客
11-24 1438
假定出现一种异常情况，即A发出的第一个连接请求报文段并没有丢失，而是在某些网络节点长时间滞留了，以致延误到连接释放以后的某个时间才到B。本来这是一个已失效的报文段。但是B收到此失效的连接请求报文段后，就误认为是A有发出一次新的连接请求。于是就向A发出确认报文段，同意建立连接。假定不采用三次握手，那么只要B发出确认，新的连接就建立了。由于现在A并没有发出建立连接的请求，因此不会理睬B的确认，也不会向B发送数据。但B却以为新的运输连接已经建立了，并一直等待A发来数据。B的许多资源就这样拜拜浪费了。
从输入URL到浏览器显示页面到底经历了什么？
一点一滴滴
09-19 738
很多公司面试都喜欢问这个问题：从输入URL到看见页面发生了什么？今天就来做个总结。 简单来说，共有以下几个过程： DNS解析 建立TCP连接，进行三次握手 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析并渲染页面 释放TCP连接，进行四次挥手 DNS解析 建立TCP连接 什么是TCP TCP是一种面向连接的协议，并提供一种可靠的传输。TCP连接有三个阶段，即：连接建立、数据传输...
从用户输入URL开始会经历哪些缓存
weixin_34248118的博客
05-31 213
根据用户发起一个HTTP请求开始，会经历那些缓存。 用户层 DNS DNS系统本地缓存(客户端操作系统DNS缓存) LocalDNS缓存(本地DNS提供商的缓存) DNS缓存服务器(专用的DNS缓存服务器) 浏览器DNS缓存(Firefox默认60秒,HTML5的新特性：DNS Prefetching) 应用程序DNS缓存(Ja...
浏览器输入一个url 中间经历的过程
晓康的博客
08-01 1024
一个常见的考题，要回答全面不容易，可以从以下角度回答问题 中间涉及到了哪些过程 每个过程包含哪些网络协议 每个协议都干了什么？ 以上就是回答这个问题的思路。 （提醒：知道什么说什么，不要把自己带坑里，熟悉到哪一层协议就说到哪一层） 网络是分层的常见的五层模型：物理层、链路层、网络层、传输层、应用层。 OSI七层协议：物理层、数据链路层、网络层、运输层、会话层、表示层、应用层。 ...
从输入url到看到页面经历了些什么（一）
weixin_43207208的博客
04-17 329
从输入url到看到页面经历了些什么（一） 这篇文章描述的是从输入url到数据回传到浏览器过程中主要发生了什么，当中穿插了一些与之相关的知识点
【前端词典】从输入 URL 到展现涉及哪些缓存环节(非常详细)
weixin_33728708的博客
04-01 213
前言 缓存是一项用来提高网站性能不可或缺的技术，利用这项技术可以很好地提高 web 的性能。 缓存可以很有效地降低网络的时延，同时也会减少大量请求对于服务器的压力。 大家在继续看下去之前可以先思考一下 “从输入 URL 到页面加载完成的过程中都发生了什么事情”。你现在所看到的其实就是这个热点问题的一个变种问题。 不过这个问题对缓存会有一个更详尽的解释。我相信你看完这篇文章后对缓存会有一个全新的...
详解用户从输入url到显示页面的整个过程
ryyzxf的博客
10-23 345
详解用户从输入url到显示页面的整个过程 1.客户端在地址栏输入请求网页地址，即就是输入统一资源定位符（Uniform Source Locator），简称 URL。位于四层模型顶层应用层的DNS协议，会通过对域名的解析查找到所要请求的服务器的IP地址。 DNS协议的功能：通过域名查找IP地址，或逆向从IP地址查找域名。 2.DNS协议查找到IP地址后返回给客户端，应用层中的HTTP协议将本次请求生成针对目标Web服务器的HTTP请求报文，并将该请求向下一层，即传输层传递。 3.传输层接收到应用层传来的HT
从用户输入URL到看到页面发生了什么？
最可爱的草莓酱兔兔
05-28 459
【公开的内心独白】 接触前端还没多久的时候参加了一次面试，被问到这个问题，由于基础薄弱，那时的我居然认为——这也能算作一个问题？不就输入网址弹出页面……完了么（我太天真了手动捂脸.jpg） 后来我发现，这题就像无底洞露出的小小洞口。进去之后发现一篇新天地，而且是越探索越发觉广阔的那种。 现在也没有算是理解太透彻，姑且将习得的内容整理下来，后面慢慢补充细节吧。 总体而言分为以下几个步骤DNS解析什么是URLDNS解析TCP三次握手——建立连接发送HTTP请求服务器处理请求并返回响应结果TCP四次挥手——关闭
用户从输入url到显示页面这个过程发生了什么
weixin_46100406的博客
03-04 437
DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束
从输入 URL 到浏览器接收的过程中发生了什么事情？
congweijing的博客
09-11 686
参考：http://www.cnblogs.com/kongxy/p/4615226.html 一、最最重要：计算机与网络设备之间通信的协议总称为TCP/IP.该协议最重要的一点就是分层。 二、 从输入 URL 到浏览器接收的过程中发生了什么事情？ 1. 在浏览器中输入url     用户输入url，例如http://www.baidu.com。其中http为协议，www.ba
浏览器里，从用户输入url到用户看到页面结果的过程，发生了什么？
abcd2144163的博客
10-18 351
1、域名解析 域名解析的过程： 　　（1）查询浏览器自身DNS缓存 　　（2）若上面没有找到，则搜索操作系统自身的DNS缓存 　　（3）若上面没有找到，则尝试读取hosts文件 　　（4）若上面没有找到，向本地配置的首选DNS服务器发送请求 　　（5）win系统若上面没有找到，操作系统查找NetBIOS name cache 　　（6）win系统若上面没有找到，查询...
从浏览器输入地址到页面渲染完成，都经历了哪些事情
最新发布
04-02
<think>嗯，用户想了解从浏览器输入地址到页面渲染完成的过程。这个问题看起来挺基础的，但涉及的知识点其实很多，需要一步步分解。首先，我得回忆整个流程，确保每个步骤都准确，同时用简单易懂的中文解释清楚。 首先，用户输入URL后，浏览器应该会先处理这个输入。可能包括检查是否有缓存，或者直接开始解析URL。这里可能需要提到URL的结构，比如协议、域名、路径等。然后，DNS解析是关键步骤，把域名转换成IP地址。这里要解释DNS查询的过程，比如浏览器缓存、系统缓存、路由器、ISP的DNS服务器，以及递归查询和权威DNS服务器。 接下来是建立TCP连接，三次握手的过程需要简明扼要地说明，为什么需要三次握手，确保可靠连接。然后是HTTPS的话，可能还要提到TLS握手，这部分可能稍微复杂，但用户可能想知道安全连接的建立过程。 发送HTTP请求的部分，要区分请求方法，比如GET、POST，以及请求头的内容。服务器处理请求时，可能需要提到后端处理，比如Web服务器、应用服务器、数据库交互，然后生成响应。响应状态码如200、404等也是需要提及的。 接收响应后，浏览器如何处理HTML，开始解析和渲染。这部分比较详细，比如构建DOM树、CSSOM树，合并成渲染树，布局计算，绘制页面。还要提到JavaScript的执行可能会阻塞解析，以及优化措施如async和defer属性。 最后，页面渲染完成后的持续过程，比如加载其他资源，事件循环，动态内容更新等。这部分可以让用户了解页面并不是一次性加载完毕，而是有后续处理。 需要注意用户的层级，可能不是技术人员，所以要用比喻或者简单例子，比如把DNS解析比作电话簿查找，三次握手比作打招呼确认双方都能通信。同时，按照系统级指令，数学公式和代码要用正确的LaTeX格式，但这个问题可能涉及较少公式，更多的是步骤描述。 另外，检查是否有遗漏的步骤，比如重定向、缓存验证（304状态码），或者CDN的作用。是否需要提到HTTP/2或HTTP/3的影响，比如多路复用，减少延迟。不过可能属于进阶内容，用户可能只需要基础流程。 最后确保结构清晰，分步骤说明，每个步骤的小标题明确，用列表或分段让读者容易跟随。同时检查技术术语是否准确，比如渲染树的构建，重排和重绘的区别，但可能不需要深入，保持概述级别。</think>从浏览器输入地址到页面渲染完成的全流程可拆解为以下步骤（以访问 `https://example.com` 为例）： #### 一、URL解析与预处理 1. **协议补充**：若用户输入不完整（如 `example.com`），浏览器自动补全协议（`https://`） 2. **编码转换**：非ASCII字符转换为`%`开头的UTF-8编码，如`空格→%20` 3. **安全检查**：检查非法字符，阻止可能的XSS攻击 #### 二、DNS解析（域名→IP地址） 1. **查询顺序**： - 浏览器缓存 → 操作系统缓存 → 路由器缓存 → ISP的DNS服务器 - 若未命中，进行**递归查询**： $$根DNS→.com权威DNS→example.com权威DNS$$ 2. **结果缓存**：TTL决定缓存有效期（通常几分钟到几天） #### 三、建立TCP连接 1. **三次握手**： - 客户端发送`SYN=1, seq=x` - 服务端响应`SYN=1, ACK=1, seq=y, ack=x+1` - 客户端确认`ACK=1, seq=x+1, ack=y+1` 2. **HTTPS特殊处理**：额外进行TLS握手（约2-RTT） #### 四、发送HTTP请求 ```http GET / HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 Accept: text/html ``` - 现代浏览器默认使用HTTP/2协议（二进制分帧、头部压缩） #### 五、服务器处理 1. **负载均衡**：可能经过CDN节点或反向代理（如Nginx） 2. **动态生成**：PHP/Node.js等后端语言生成HTML 3. **响应返回**： ```http HTTP/1.1 200 OK Content-Type: text/html Cache-Control: max-age=3600 ``` #### 六、浏览器解析与渲染 1. **构建DOM树**： - 边下载HTML边解析 - 遇到`<script>`会阻塞解析（除非标记`async/defer`） 2. **构建CSSOM**： - 解析所有CSS文件（包括`@import`） - 遵循级联规则计算样式 3. **生成渲染树**： - 合并DOM和CSSOM，过滤不可见元素 - 计算布局（重排）：$$width = content + padding + border$$ 4. **绘制与合成**： - 分层绘制 → 光栅化 → 合成图层 - 优化策略：仅更新脏矩形区域 #### 七、加载后续资源 1. **并行下载**：通常保持6-8个TCP连接 2. **优先级控制**： - CSS/字体 > 图片 > async脚本 - 使用`preload`预加载关键资源 #### 八、页面可交互 1. **事件绑定**：DOMContentLoaded事件触发 2. **持续优化**： - 空闲时预取后续页面资源 - 实施虚拟滚动等优化策略 #### 关键技术指标 - **FP**（First Paint）：首次渲染时间（约1s内优秀） - **TTI**（Time to Interactive）：可交互时间（约3s达标） - **LCP**（Largest Contentful Paint）：最大内容渲染（2.5s内优秀） 整个过程涉及网络协议栈、渲染引擎、JavaScript引擎（如V8）等多个子系统的协作，现代浏览器通过多进程架构（每个标签页独立进程）保障安全性与稳定性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值