从输入URL到页面加载的全过程(只包含DNS解析过程、页面渲染过程)

最新推荐文章于 2024-03-28 00:00:00 发布
最新推荐文章于 2024-03-28 00:00:00 发布
阅读量383 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： http 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46926182/article/details/120152208
版权

从输入URL到页面加载的全过程

  • 输入URL，并按下回车
  • 浏览器检查浏览器缓存、系统缓存、路由器缓存，如果缓存中有，则直接显示页面，如果没有进行下一步
  • 根据URL通过DNS进行域名解析，获取IP地址
    • DNS解析过程：是一个迭代查询和递归查询的过程
      • 首先会在浏览器的缓存中查找对应的IP地址，如果查找到直接返回，若找不到继续下一步
      • 将请求发送给本地DNS服务器，在本地域名服务器缓存中查询，如果查找到，就直接将查找结果返回，若找不到继续下一步
      • 本地DNS服务器向根域名服务器发送请求，根域名服务器会返回一个所查询域的顶级域名服务器地址
      • 本地DNS服务器向顶级域名服务器发送请求，接受请求的服务器查询自己的缓存，如果有记录，就返回查询结果，如果没有就返回相关的下一级的权威域名服务器的地址
      • 本地DNS服务器向权威域名服务器发送请求，域名服务器返回对应的结果
      • 本地DNS服务器将返回结果保存在缓存中，便于下次使用
      • 本地DNS服务器将返回结果返回给浏览器
  • 浏览器向服务器发送TCP连接请求，进行三次握手
  • 三次握手成功，浏览器向服务器发送http请求
  • 服务器接收到请求，返回请求数据
  • 浏览器接收数据并进行页面渲染(读取页面内容，浏览器进行渲染)
    • 首先解析 HTML 文档，形成 DOM 树
    • 接着解析 CSS，产生 CSSOM树
    • 在DOM和CSSOM树解析过程中，遇到 JS，会立即阻塞DOM树的构建，JS解析完成，接着解析HTML、CSS
    • 再接着，浏览器通过DOM和CSSOM树构建渲染树 ( Render树 )
      • 这个过程中，DOM中不可见标签元素不会放到渲染树中，就像<head></head> 或 display:none
      • CSSOM树规则会附加给渲染树的每个元素上
    • 渲染树构建完成，浏览器会对这些元素进行定位和布局，这一步也叫 重排/回流 ( Reflow) 或 布局(Layout )
    • 接下来绘制这些元素的样式，颜色，背景，大小及边框等，这一步也叫做 重绘 (Repaint)
    • 再接下来是我们这最后一步合成( composite )，浏览器会将各层信息发送给GPU，GPU将各层合成，显示在屏幕上
  • 断开TCP连接(四次握手)
晚风予星_Kylin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈一个网页打开的全过程（涉及DNS、CDN、Nginx负载均衡等）
weixin_30270561的博客
05-30 2968
1、概要 　　从用户在浏览器输入域名开始，到web页面加载完毕，这是一个说复杂不复杂，说简单不简单的过程，下文暂且把这个过程称作网页加载过程。下面我将依靠自己的经验，总结一下整个过程。如有错漏，欢迎指正。 　　阅读本文需要读者已有一定的计算机知识，了解TCP、DNS等。 2、分析 　　众所周知，打开一个网页的过程中，浏览器会因页面上的css/js/image等静态资源会多次发起连接请求，所...
输入url到页面加载全过程
onebeautifulman的博客
05-07 1042
输入url到页面加载全过程，以及TCP三次握手和四次挥手
详解：页面从URL请求到加载完成的整个过程
最新发布
大剑师兰特的GIS世界
03-28 1067
请求网页的整个渲染过程可以分为多个阶段，从用户在浏览器中输入网址到页面最终呈现在屏幕上，大致流程如下
浏览器 - 从输入URL到页面加载的过程
qq_42063793的博客
03-14 414
当验证通过后，才会进入实际的后台代码，此时是程序接收到请求，然后执行（如查询数据库，大量计算等）；http1.1起，默认使用长连接，使用长连接会有这一行Connection: keep-alive，在长连接的情况下，当一个网页打开完成后，客户端和服务端之间用于传输http的tcp连接不会关闭，如果客户端再次访问这个服务器的页面，会继续使用这一条已经建立的连接；http2.0中，一个tcp/ip请求可以请求多个资源，也就是说，只要一次tcp/ip请求，就可以请求若干个资源，分割成更小的帧请求，速度明显提升;
从输入URL到页面加载的全过程
zhaojjjjjj163的博客
02-20 748
这个响应包括响应行（如HTTP/1.1 200 OK）、响应头（如Content-Type、Content-Length等）和响应体（即实际返回给浏览器的数据，通常是HTML文档）。这个请求通常包括请求行（如GET或POST）、请求头（如User-Agent、Accept-Language等）和请求体（对于POST请求，包含提交的数据）。当所有资源（如HTML、CSS、JavaScript、图片等）都加载完成，并且DOM、CSSOM、渲染树都已经构建和渲染完毕，页面加载过程就基本完成了。
从输入网址（URL）到页面加载的全过程
weixin_42367460的博客
03-21 2460
1. 当浏览器输入一个url后，首先要在客户端上进行url解析， 2. 缓存检查 3. 在DNS服务器上进行DNS解析， 4. 建立tcp连接通道后浏览器向服务器发送http请求， 5. 服务器把结果返回给浏览器，返回要关闭tcp连接通道， 6. 然后在浏览器上把获取的结果进行渲染。 7. 浏览器内核拿到相应内容后，渲染开始， 8. 解析html,css分别建立DOM Tree和CSSOM Tree， 9. 随后这两个合并成Render Tree。 10. 然后布局Render Tree
开源bbs源码java-http-protocol:输入URL到页面加载的过程
06-06
从输入URL到页面加载的过程 由一道题完善自己的前端知识体系 目录 从浏览器接收url到开启网络请求线程(浏览器的机制以及进程与线程之间的关系) 开启网络线程到发出一个完整的http请求(dns查询,tcp/ip请求,五层因特网...
DNS原理总结及其解析过程详解
01-27
域名系统DNS(DomainNameSystem)是因特网使用的命名系统，用来把便于人们使用的机器名字转换成为IP地址。域名系统其实就是名字系统。为什么不叫“名字”而叫“域名”呢？这是因为在这种因特网的命名系统中使用了许多...
DNS安装配置全过程
09-16
本文将详细介绍DNS安装配置全过程，包括下载和安装BIND软件、编译和配置named.conf文件、创建zone文件和反向解析文件等。 一、下载和安装BIND软件 BIND（Berkeley Internet Name Domain）是现今最流行的DNS服务器...
DNS原理及其解析过程剖析(图文)
09-30
我们无法记住10个以上IP地址的网站，所以我们访问网站时，更多的是在浏览器地址栏中输入域名，就能看到所需要的页面，这是因为有一个叫DNS服务器的计算机自动把我们的域名翻译成了相应的IP地址，然后调出IP地址所...
在浏览器从输入URL到页面加载完成都经历了什么/一个完整的URL解析过程详细介绍
snowball的博客
05-12 2356
如果本地没有缓存该域名的IP地址，就需要通过递归或迭代的方式向根域名服务器、顶级域名服务器、权威域名服务器发起查询请求，直至返回一个IP地址给浏览器。IP地址就像是一个街道，让你直到具体在哪个街道（哪个主机），端口号就像是门牌号，告诉你是哪家（哪个进程）如果浏览器没有缓存，电脑会查看本地操作系统的缓存，如果有记录，直接返回结果（host文件）浏览器会首先查看自身的缓存，如果浏览器缓存中有对应的解析记录，直接返回结果。协议是从该计算机获取资源的方式，常见的是HTTP，HTTPS，FTP等。
大厂常问：输入URL到显示页面的全过程（敲详细）
Lemontree_fu的博客
07-11 4444
从浏览器地址栏输入 url 到显示页面的步骤 基础版本： 1 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求； 2 服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）； 3 浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建立相应的内部数据结构 （如 HTML 的 DOM）； 4 载⼊解析到的资源⽂件，渲染页面，完成。 详细版： 1、在浏览器地址栏输⼊URL 2、浏览器查看缓存，如果请求资.
从输入url到页面展示到底发生了什么
weixin_33827731的博客
01-31 4507
阅读目录 1、输入地址 2、浏览器查找域名的 IP 地址　　 3、浏览器向 web 服务器发送一个 HTTP 请求 4、服务器的永久重定向响应 5、浏览器跟踪重定向地址 6、服务器处理请求 7、服务器返回一个 HTTP 响应　 8、浏览器显示 HTML 9、浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等） 刚开始写这篇文章还是挺纠结的...
浏览器渲染页面的过程——一次完整的HTTP服务：TCP连接建立、发起HTTP请求、keep-alive、重绘，重排
Javavison的博客
05-12 1024
结合具体问题：在浏览器输入一个网址并访问，具体发生了什么？ 1. 对这个网址进行DNS域名解析，得到对应的IP地址 DNS怎么找到域名的？ DNS域名解析采用的是递归查询的方式，过程是，先去找DNS缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级，这样递归查找后，找到了，返回给我们的浏览器 2. 根据这个IP，找到对应的服务器，发起TCP的三次握手 TCP连接的建立（三次握手）？ 1、客户端采用TCP协议将带有SYN标志的数据包发送给服务器，等待服务器的确认。（客户端：一个SYN）
从输入URL到页面加载完成的过程（全程梳理）
热门推荐
qq_20901397的博客
10-29 1万+
看了别人的文章，更改删除了部分内容，以适应自己的学习需要，非常感谢撒网要见鱼的分享。 ---------------------------------------------------------------------------------------------------------------------------- 2018.8.2 第二次看，把自己以前看过的博客都整理进来，...
【前端面试】- 输入URL到页面加载的全过程（一）
胖蔡叨叨叨
09-05 435
整个过程大致如上图，客户机会通过访问本地的dns服务器然后逐级向上查询找到目标机器并返回给客户机，本地dns也会堆积进行记录。
HTTP请求过程-域名解析和TCP三次握手建立链接
weixin_38170255的博客
10-20 399
　　我们在浏览器输入http://www.baidu.com想要进入百度首页，但是这是个域名，没法准确定位到服务器的位置，所以需要通过域名解析，把域名解析成对应的ip地址，然后通过ip地址查找目的主机。整个访问过程可以概括为： 域名解析 发起TCP三次握手建立连接 建立连接后发起http请求 服务器响应请求，浏览器获取html源码 浏览器解析html代码，并请求相关css,...
浏览器从输入URL地址到渲染页面都发生了什么？
Colin
12-25 511
1、 用户通过web浏览器输入URL信息 2、 浏览器根据输入的URL信息向DNS服务器查询改域名对应的IP地址 3、 浏览器获得IP地址之后，链接该地址的web服务器，通过HTTP通信 4、 web服务器通过HTTP协议得到信息，执行对应的Web程序并获得执行的内容 5、 web服务器将执行web应用程序得到的HTML、CSS、JS、图像的内容返回给浏览器 6、 web浏览器根据web服务器返回...
浏览器从输入url到页面加载的全过程
04-06
1. DNS解析：浏览器会首先查询DNS服务器，将网址转换为IP地址。 ... 3. 发送HTTP请求：浏览器...在此过程中，还有一些其他的优化技术，如缓存机制、预加载、DNS预解析、HTTP请求合并等，可以提高页面加载速度和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值