前端学习-浏览器从输入URL到显示全过程（详细版）

最新推荐文章于 2025-05-13 12:48:00 发布
最新推荐文章于 2025-05-13 12:48:00 发布
阅读量1.2k 收藏 10
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端学习 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36070003/article/details/115384172
本文详述了浏览器从输入URL到显示页面的全过程，包括DNS解析、TCP连接（三次握手、HTTP连接差异）、HTTP请求响应、DOM与CSSOM构建、渲染树与绘制、回流与重绘、图片加载时机以及TCP断开连接。同时，讨论了前端优化策略，如合并资源、CSS优先、JS延迟加载等。

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

本文章包括了浏览器从输入URL开始到展现出整个页面的过程的知识点，目的是为了梳理整个知识框架，包括计算机网络、浏览器渲染等知识。梳理完这部分的知识后，你应该能知道要从哪里入手前端优化了吧？

浏览器从输入URL到显示全过程

对网址URL进行DNS解析

浏览器首先向DNS请求地址解析，DNS将URL解析为IP地址后返回给浏览器，于是浏览器可以拿着这个解析后的IP地址。1 来找到服务器，从而发起TCP连接。

TCP连接

浏览器和服务器建立TCP连接。

TCP三次握手建立连接

  • 第一次握手： 浏览器向服务器发送自己的SYN（同步序列编号），请求与服务器连接；
  • 第二次握手： 服务器收到后向浏览器发送自己的SYN+ACK（确认包）表示自己已收到请求并可以建立连接；
  • 第三次握手： 浏览器向服务器发送ACK完成三次握手。

不同HTTP版本下TCP连接的不同

  • HTTP 1.0 不持久连接，一次请求一次连接
  • HTTP 1.1 加入了keep-alive属性，可以建立持久连接，一次连接多次请求响应
  • HTTP 2.0 加入了多路复用，多个请求响应可以交错并行发送

HTTP请求与响应

建立连接后，浏览器向服务器发送HTTP请求，服务器作出响应。

请求和响应报文的格式

请求行：请求方法 URL HTTP版本号

GET www.baidu.com HTTP/1.1

响应行：HTTP版本号 状态码 短语

最低0.47元/天 解锁文章

200万优质内容无限畅学
从输入内容到展示页面全过程详解
BIGDgreen
02-24 853
整体流程 将整个流程分为导航流程和渲染流程两部分。 导航流程 处理用户输入 判断是搜索内容还是url 搜索内容则直接用默认搜索引擎，合成带搜索关键字的URL url，则判断url规则，根据规则，把内容加上协议，合成完整的URL 监听beforeunload事件，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面 用户可以通过 beforeunload 事件来取消导航，让浏览器不再执行任何后续工作 进入页面资源请求过程。浏览器进程会通过进程间通
面试题2：从浏览器输入一个URL，到最终展示前端页面这一过程，会发生什么？
m0_63191002的博客
06-22 498
交换机会把数据分用到数据链路层（更上层的就不用解析了），再重新封装，继续转发。路由器会把数据分用到网络层（更上层的就不用解析了），再重新封装，继续转发，路由器根据数据报中的目的IP在路由表中匹配，找个合适的方向发出去，每次转发，TTL就 - 1。就像 github 的域名是 www.github.com，很好记，但是他的 IP 地址是 20.205.243.166，其实我们在地址栏中输入github的IP地址，也是能够访问到github网站的，但是因为IP地址不好记，所以一般地址栏里输入的都是域名。
浏览器输入url后执行的整个过程（详细解析）
失眠时间的博客
05-12 8140
详细介绍浏览器输入url后执行的整个过程
在浏览器输入URL回车后，都会经历哪些过程？
loverdany的博客
05-13 436
文章摘要：本文概述了浏览器从解析URL到最终渲染页面的完整流程。首先，浏览器解析URL并检查缓存是否命中。若未命中，则通过DNS服务器将域名解析为IP地址。随后，通过三次握手建立TCP连接，并向服务器发送HTTP请求。服务器处理请求后返回HTTP报文，浏览器解析并渲染页面。最后，通过四次挥手断开TCP连接。这一系列步骤确保了网页的顺利加载和显示。
浏览器工作原理：从 URL 输入到页面展现到底发生了什么？
u014096903的博客
09-27 642
转载自简书：https://www.jianshu.com/p/d616d887953a，仅做记录分享，侵删   对浏览器原理有过了解的一定不会陌生这篇神文《How Browsers Work》中文翻译：浏览器原理：新式网络浏览器幕后揭秘。另外还有一篇 《What really happens when you navigate to a URL》。大神写的东西很长很复杂，阅读成本虽然大，但能...
浏览器输入一个URL的详细过程
qq_48168706的博客
12-30 1640
在浏览器输入URL 浏览器要将URL解析为IP地址，解析域名就要用到DNS协议，首先主机会查询DNS的缓存，如果没有就给本地的DNS发送查询请求。DNS查询分为两种方式，一种是递归查询，一种是迭代查询。如果是迭代查询，本地的DNS服务器，向根域名服务器发送查询请求，根域名服务器告知该域名的一级域名服务器，然后本地服务器给该一级域名服务器发送查询请求，然后依次类推直到查询到该域名的IP地址。DNS服务器是基于UDP协议的。 得到IP地址后，浏览器就要与服务器建立一个http连接。因此要用到http协议。htt
浏览器中输入一个URL后，浏览器经历的整个过程
qq_70172010的博客
12-04 1477
这个过程涉及到网络、协议、浏览器内核等多个方面的知识，是Web开发和优化的重要基础。希望这个详细的描述对你有所帮助！
一、浏览器渲染原理（进程、线程）http请求全过程-浏览器输入url整个过程
04-03
1.3 输入url地址到浏览器显示页面发生了什么 从上图可以看到，整个过程需要各个进程之间的配合，我们结合上图我们从进程的角度，描述一下 1、浏览器进程接收到用户输入的URL请求，浏览器进程便将URL转发给网络进程。...
前端开发浏览器工作原理详解：从URL输入到页面渲染的全流程解析及常见面试题汇总浏览器的工作原理
最新发布
06-08
从输入URL到页面呈现的过程涉及DNS解析、TCP连接建立、HTTP请求发送、服务器响应处理、浏览器解析渲染及TCP连接关闭等步骤。CSS不会阻塞DOM解析，但会阻塞DOM渲染。 适合人群：前端开发人员，尤其是准备面试或希望...
前端面试系列-输入url后全过程&&页面渲染机制&&DOM生成过程
LYFlied的博客
03-27 1692
一、当输入url后，全过程 浏览器缓存 (DNS解析)，解析获取相应的IP地址。 cp连接，三次握手。 浏览器向服务器发送http请求，请求数据包。 将数据返回至浏览器 浏览器收到HTTP响应 读取页面内容，浏览器渲染，解析html源码 生成Dom树、解析css样式、js交互 二、页面渲染机制 三、DOM 1.什么是 DOM 2.DOM 树如何生成 HTML 解析器 3.JavaScript 是如何影响 DOM 生成的 内嵌JavaScript 引入 JavaScript 文件 引入css文件
浏览器输入URL到网页完全呈现的过程
qq_43889848的博客
05-25 278
简单总结 1.查看缓存（浏览器缓存，系统缓存，路由器缓存），如果有直接访问 2.如果没有，DNS服务器进行域名解析，解析成ip地址 3.通过ip地址找到服务器，进行TCP链接，完成三次握手 4.浏览器像服务器发送http请求 5.服务器响应，将响应报文通过TCP发送回浏览器 6.对响应进行解码，根据资源类型决定如何处理 7.如果是HTML文档，则构建DOM树，下载CSS，JS资源，构建渲染树，布局，绘制 8.断开连接：TCP四次挥手 详细介绍 DNS解析 什么是URL 在讲解DNS解析前，先简单介绍下URL
说说从输入URL到看到页面发生的全过程，越详细越好
LuckXinXin的博客
05-16 298
首先浏览器主进程接管，开了一个下载线程。 然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。 将下载完的内容转交给Renderer进程管理。 Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，所以一般我会把link标签放在页面顶部。 解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。 css rule tree和dom t.
知识点串联: 输入URL到页面的全过程
高高冷的博客
12-20 422
地址栏输入URL URL，即统一资源定位符。它实际上就是网站的网址。浏览器就是靠URL来查找资源位置。 可以把URL分成几个部分：协议、网络地址、资源路径。 ● 传送协议：URL包含协议部分，是浏览器和www万维网之间的沟通方式，它会保证浏览器正确地在网络上找到资源位置。最常见的网络传输协议是HTTP协议；其他的还有ftp，file，mailto，git等。还有自定义的协议，例如Itencent。不同协议有不同的通讯内容格式。 ● 网络地址：指示该连接网络上的某一台计算机，可以是域名或者IP地址，也可以包括
浏览器输入url后经历的过程（详细）
Jennifer0204的博客
07-08 5123
页面加载流程：DNS查询TCP连接发送HTTP请求服务器处理HTTP请求并返回HTTP报文浏览器解析并render页面HTTP连接断开浏览器查看浏览器缓存-->系统缓存-->查找本地host文件-->本地DNS服务器缓存，如果缓存中有，则直接在屏幕中显示页面内容。若没有，则进行DNS解析，获取相应的IP地址，本地域名服务器会向 根域名服务器发送一个请求。如果根域名服务器也不存在该域名时，本地域名会向顶级域名服务器（TLD）发送一个请求，即根域名服务器-->顶级域名服务器-->权威域名服务器依次类推下去。..
浏览器从输入URL到页面展示过程
03-14 232
浏览器从输入URL到页面展示过程1.用户输入2.URL请求过程3.准备渲染进程4.提交文档5.渲染阶段 1.用户输入 浏览器的地址栏会判断用户输入的关键字是搜索内容还是URL， 如果输入内容符合URL规则，地址栏会根据规则把这段内容加上协议合成完整URL 浏览器加载地址时需要等待提交文档阶段页面内容才会被替换 2.URL请求过程 浏览器进程通过进程间通信把URL请求发送至网络进程，网络进程接收到后发起真正URL请求流程： 首先查找本地缓存是否缓存了该资源。如果有缓存资源则直接返回；如果没有则进行DNS
前端输入url到页面展示
不会唱杰伦
10-26 435
从浏览器输入url到页面显示的步骤 输入url 域名解析 三次握手请求建立tcp连接 浏览器构建http请求报文，请求报文通过tcp协议传送到服务器指定的端口发送http请求（请求行、请求头、请求体） 服务器处理http请求并返回响应报文（状态码、响应头、响应正文） 浏览器解析html文档，构建DOM树，CSSOM树，构架渲染树，定位页面元素，绘制页面 四次挥手断开tcp连接 01、输入url 当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能的 url 了，他会从历史记录，书签等地方
从输入URL到展示出页面
m0_59155415的博客
05-23 407
从输入URL到展示出页面的步骤，总体来说分为以下几个过程: DNS解析:将域名解析成IP地址 TCP连接：TCP三次握手 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 断开连接：TCP四次挥手
通过url地址抓取网页html代码
凯奥的专栏
07-12 1456
import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; public class URLUtil { public static String getHtml(String urlString) {
html怎么获取页面地址,web前端：JS通过url地址栏获取html页面名称
weixin_39716800的博客
06-03 4173
统一资源定位符(UniformResourceLocator，URL)是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。有的时候需要获取页面名称，为此我在这里封装了一个方。一、分别根据传递不同的参数，获取到html页面的名称。1通过传递参数，获取到html页面的名称；参...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值