从输入URL到浏览器显示页面发生了什么?

最新推荐文章于 2024-08-08 17:15:21 发布
原创 最新推荐文章于 2024-08-08 17:15:21 发布 · 147 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细阐述了从输入URL开始，经过DNS解析、HTTP请求、TCP三次握手、服务器响应直至浏览器渲染HTML及嵌套资源的全过程，深入解析网络通信与浏览器渲染机制。

从输入URL到浏览器显示页面发生了什么?
1.输入地址
2.dns解析域名找到对应的ip地址
3.客户端发送http请求
4.通过tcp协议传输报文 三次握手
5.通过ip协议传输给服务器
6.服务器接受数据并处理请求
7.返回相应的html文件
8.渲染到浏览器
9.渲染过程中遇到嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等），需要再次发送http请求

从浏览器输入网址(URL)，到最终展示页面，都发生了什么？
CYK_byte的博客
11-01 4092
从（如下图）到你按下回车，再到最后出现这个网页界面（如下图）中间到底发生了什么？接下来就带你一步步进行解析~
浏览器从URL输入到页面展现到底发生了什么？
Darlingmi的博客
11-09 3461
文章目录一、DNS域名解析过程二、Tcp三次握手建立连接目的过程三、浏览器向服务器发送http请求请求行请求头请求数据四、服务器处理请求并返回http报文状态行响应头响应数据五、浏览器解析渲染页面步骤回流和重绘回流重绘六、 tcp四次挥手断开连接 为什么输入url就可以展现对应的页面呢？背后经历了什么？ 总体为以下几个过程： DNS解析，将域名解析成Ip地址 Tcp/Ip三次握手建立连接 浏览器向服务器发送http请求 服务器处理请求并返回http报文 浏览器解析渲染页面 tcp四次挥手断开连接 一、D
从输入URL到浏览器显示页面发生了什么？
蔣金澤
04-09 133
大致流程 [网络通信 / 数据渲染] 1. DNS解析，将域名解析为IP地址 2. 浏览器与服务器建立TCP连接（三次握手） 3. 浏览器向服务器发起HTTP请求 4. 服务器接收请求并响应，返回相应的HTML文件 5. 关闭TCP连接，四次挥手 6. 浏览器接收从服务器端返回的数据，并进行页面渲染(解析资源)。 解析url DNS的查找过程分析? DNS的查找过程解析： 浏览器会先检查是否存在缓存，因为如果访问过一次该域名的话，会把结果缓存在浏览器中。 操作
在浏览器输入地址发生了什么？
weixin_34232617的博客
03-12 570
本文主要探究 在浏览器地址栏输入地址到页面渲染完成发生了什么 这个问题。通过对这个问题的探究，详细的梳理http、https、tcp及前端性能优化相关的问题。本文涉及到前端、后台、运维相关的工作，也会涉及到很多专有名词及其衍生知识 当我们在浏览器网址中输入一个地址，点击回车后发生了以下事情。分为两种情况，http事务和https事务。先讲http事务： 1、浏览器（客户端）进行地址解析。 2、将解...
浏览器输入网址 发生了什么
爱代码也爱生活
07-05 8615
敲域名回车 查询本地dns缓存，看是否有域名对应的ip地址，如没有查询 向远程ip地址服务器发送http请求 服务器返回响应请求，向用户发送数据 浏览器对返回的数据进行渲染 （全球DNS根服务器只有13台，我们输入的网址(域名)是IP地址的一个别名， 在一个DNS内，一个域名对应一个IP地址。域名系统(DNS) 的工作就是将域名与它的IP地址对应起来。 DNS是分布式的，同时也是
浏览器输入网址会发生什么？
weixin_51704238的博客
03-12 1752
该请求中包含了要访问的资源路径、请求方法（如 GET、POST 等）、以及其他必要的信息，如请求头等。浏览器请求解析后的资源，浏览器根据收到的 HTML、CSS、JavaScript 等资源，开始渲染页面。然后服务器根据请求的处理结果，将相应的数据封装成 HTTP 响应，再通过之前建立的 TCP 连接返回给浏览器。浏览器接收到服务器的响应后，会根据响应的内容解析 HTML、CSS、JavaScript 等资源。服务器收到浏览器发来的请求后，会根据请求的内容和服务器上的资源进行相应的处理。
浏览器地址栏输入地址之后发生了什么
weixin_42028153的博客
08-08 1042
随着 Web 技术的发展，一些优化措施如 HTTP/2 的多路复用、预加载、缓存机制等也会在这个过程中发挥作用，以提高页面的加载速度和性能。除了 DNS 查询，还有哪些方法可以解析域名？建立 TCP 连接的三次握手过程是怎样的？DNS 查询的过程是怎样的？
从输入URL到浏览器显示页面发生了什么.md
10-18
从输入URL到浏览器显示页面发生了什么
精选资源
在浏览器输入URL回车之后发生了什么？（超详细版）
01-07
这篇笔记是我这两天看了数十篇文章总结出来的，所以相对全面一点，但由于我是做前端的，所以会比较重点分析浏览器渲染页面那一部分，至于其他部分我会罗列出关键词，感兴趣的可以自行查阅， 注意：本文的步骤是建立...
在浏览器里面输入 url，到浏览器显示页面中间发生了什么？
AI小美好
05-31 560
在浏览器里面输入 url，到浏览器显示页面中间发生了什么？这个过程涵盖了从用户输入URL到浏览器显示页面的整个过程。在实际应用中，还可能涉及到其他因素，如缓存、重定向、安全性（如HTTPS）等。
在浏览器地址栏中输入地址后浏览器发生了什么？
pingguo函数的博客
04-30 3898
当我们向浏览器的地址栏中输入一个网址并按下enter键之后，便可以跳转到网址对应的页面，那么浏览器内部是如何实现该功能的呢？从浏览器获取url到成功加载出页面主要经历了以下几个过程:
在浏览器中输入URL之后，到底会发生什么？
qq_52463861的博客
11-21 685
在浏览器中输入URL
浏览器输入url地址后发生了什么
飞鱼日记的博客
08-17 439
1.浏览器中输入网址 2.域名解析（DNS），找到IP服务器 3.发起TCP连接，HTTP三次握手,发送请求（Request） 4.服务器响应HTTP(Response) 5.浏览器下载资源 html css js images等 6.浏览器解析代码（如果服务器有gzip压缩，浏览器先解压） 7.浏览器渲染呈现给用户 ...
浏览器输入网址后具体发生了什么
m0_46621311的博客
04-06 737
当在浏览器中输入一个网址后，按下回车时，会触发一系列的过程。
【前端高频面试题】 浏览器地址栏输入网页地址后发生了什么？
weixin_44045702的博客
05-18 4740
帮你快速深入了解浏览器打开页面时发生了什么..
在浏览器中输入地址之后发生了什么过程？
qq_45153972的博客
03-26 2890
在浏览器中输入地址之后发生了什么过程
在浏览器中输⼊⽹址后发⽣了什么？
redfishzhang64的博客
08-15 1203
总结起来，当你在浏览器中输入网址并回车后，在背后发生了一系列步骤，这些步骤使得你能够在浏览器上访问并浏览网页。
在浏览器中输入一个地址，回车后发生了什么？
Test_kaifeng的博客
11-15 721
浏览器获取了这个url，当然就去解析了，它先去缓存当中看看有没有，从 浏览器缓存-系统缓存-路由器缓存 当中查看，如果有从缓存当中显示页面，然后没有那就进行步骤三；在域名解析之后，浏览器向服务器发起了http请求，三次握手，浏览器与服务器建立TCP连接。这个执行请求，指的是进行一些逻辑操作，查询操作，持久层操作等的。缓存就是把你之前访问的web资源，比如一些js，css，图片什么的保存在你本机的内存或者磁盘当中。2，服务端ack 这个断开请求，确保自己的数据传输完毕，再发送断开连接的请求。
从浏览器输入网址到显示网站页面之间到底发生了什么？系列（最后一篇）
MClink的博客
04-14 1436
 通过之前文章的铺垫，网络包穿过了防火墙后，就能到达服务器了，那么这篇文章就讲请求到达web服务器，响应返回浏览器的过程。多，是最后一部分了。首先我们先从服务器的大致结构讲起：一、服务器1.什么是服务器呢？  服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。大多数人对服务器的认识在于它是一个你请求资源，它就响应资...
浏览器从输入 URL 到页面渲染完成的流程是什么？
最新发布
08-28
浏览器从输入 URL 到页面渲染完成的过程是一个复杂且多阶段的流程，涉及多个系统组件的协作。以下是详细的过程解析： ### 网络请求阶段 当用户在浏览器中输入 URL 后，浏览器会向 DNS 服务器发起请求，以解析 URL 中的域名，获取对应的 IP 地址。这一过程通常称为 DNS 解析。解析完成后，浏览器会根据获取的 IP 地址与服务器建立 TCP 连接。TCP 连接建立后，浏览器通过 HTTP 或 HTTPS 协议向服务器发送请求，以获取网页的内容。服务器接收到请求后，会返回相应的 HTML 文件以及可能附带的其他资源，如 CSS、JavaScript 文件和图片等。在这一阶段，TCP 连接可能会在请求完成后被关闭或保持打开状态以供后续请求使用[^2]。 ### 解析与渲染阶段 一旦浏览器接收到服务器返回的 HTML 内容，它会开始解析 HTML 文件并构建 DOM 树。DOM 树是 HTML 文档的内存表示形式，它将文档中的每个元素转换为一个节点，以便浏览器可以理解和操作这些节点。与此同时，浏览器还会解析 CSS 样式表，将其转换为浏览器可以理解的 `styleSheets`，并计算生成 CSSOM（CSS Object Model）树。CSSOM 树描述了文档中每个元素的样式信息[^1]。 ### 布局与绘制阶段 DOM 树和 CSSOM 树结合后，浏览器会创建布局树（也称为渲染树），用于确定每个节点在屏幕上的位置和大小。布局树的创建过程中，浏览器会计算每个节点的布局信息，例如宽度、高度和位置。接下来，浏览器会对布局树进行分层，并生成图层树。图层树的生成是为了优化渲染性能，尤其是在处理复杂动画或滚动效果时。每个图层会被进一步处理，生成绘制列表，这些列表描述了图层上需要绘制的内容。绘制列表随后被提交到合成线程，合成线程负责将图层分割为图块，并在光栅化线程池中将图块转换为位图。最后，合成线程发送制图块命令 `DrawQuad` 给浏览器进程，浏览器进程根据 `DrawQuad` 消息生成页面，并显示到显示器上[^1]。 ### 脚本与资源加载的影响 在解析 HTML 的过程中，如果遇到外部资源（如 JavaScript 或 CSS 文件），浏览器会暂停 HTML 的解析，直到这些资源被加载和执行完毕。这是因为 JavaScript 可能会修改 DOM 结构，而 CSS 则会影响页面的渲染样式。因此，浏览器会先加载并执行 JavaScript 脚本，然后再继续解析 HTML 和构建 DOM 树。同样，CSS 资源的加载也会阻塞页面的渲染，直到样式信息计算完成[^3]。 ### 示例代码 以下是一个简单的 HTML 页面示例，展示了如何引入外部 CSS 和 JavaScript 文件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page Title</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello, World!</h1> <script src="script.js"></script> </body> </html> ``` 在这个例子中，浏览器会先加载 `styles.css` 文件，然后解析 HTML 内容，构建 DOM 树，接着加载并执行 `script.js` 文件中的 JavaScript 代码，最后渲染页面。 ###
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值