面试官: 输入www.url.com以后的全过程

浅聊一下

之前的文章中有提到,当我们输入 www.4399.com 拿到数据以后,在页面上进行回流和重绘等操作以后,就能将数据渲染到页面上,从输入4399.com到页面渲染之间的回流和重绘(附字节面试题), 那么浏览器是怎么拿到数据的呢?

DNS域名解析

首先我们知道一段url主要由三部分组成: 协议名、ip地址、端口号组成,那么 www.4399.com 为什么没有看见协议名,也没有看见IP地址、也没有看见端口号呢?原来 www.4399.com 是域名,因为ip地址相对较为复杂,所以用一个域名来代替IP地址并且在浏览器输入后会自动补全...

好,那我们现在输入 www.4399.com ...接下来,要让后端把4399的数据返回给我们,而我们只有找到这个域名代替的ip地址才能找到后端...那么这个寻找ip地址的过程就叫做DNS域名解析

  1. 去操作系统的本地缓存中查询ip:

当用户第一次访问某个网站时,操作系统会先在自己的本地 DNS 缓存中查找是否有对应的 IP 地址。如果之前已经访问过4399.com,那么操作系统可能会在本地缓存中找到对应的IP地址。

  1. 去系统配置的DNS服务器(缓存)中查询:

如果本地缓存中没有找到对应的 IP 地址,操作系统会向配置的 DNS 服务器发送查询请求,DNS 服务器会检查它的缓存中是否有4399.com对应的IP地址。如果DNS服务器的缓存中有相关记录,它会直接返回IP地址。

  1. 去根服务器查询:

如果本地缓存和DNS服务器的缓存中都没有找到对应的 IP 地址,那么DNS服务器会从根域名服务器开始查询。根域名服务器知道顶级域名服务器(比如.com、.net、.org等)的地址,因此会返回com顶级域名服务器的IP地址。

  1. 去com顶级域名服务器查询:

DNS服务器得到com顶级域名服务器的IP地址后,会向该服务器发送查询请求,com顶级域名服务器会返回负责管理4399.com域名的权威域名服务器的IP地址。

  1. 去4399.com域名服务器查询:

最后,DNS服务器会向负责管理4399.com域名的权威域名服务器发送查询请求,该服务器会返回4399.com对应的IP地址给DNS服务器,DNS服务器再将IP地址返回给用户的操作系统,完成整个解析过程。

TCP && UDP

好了,现在我们已经拿到4399的IP地址了,接下来就该进行数据传输了...在传输的过程中涉及两个协议之一------TCP协议或UDP协议

TCP

TCP协议是一种传输协议,想象一下,要将粮草运送到四处环河的城池中,就必须建立一道桥梁,在运输完毕以后就得断开桥梁,防止敌军过河...TCP协议的工作就是建立桥梁、断开桥梁

在之前我们已经讲过TCP是如何建立连接和断开连接的,三次握手四次挥手以及跨域问题面试题详解 - 掘金 (juejin.cn)

当我们三次握手建立连接以后,开始通过http传输数据,当数据传输完毕,四次挥手断开连接...

UDP

UDP(User Datagram Protocol,用户数据报协议)是一种无连接的、不可靠的传输层协议。相比于TCP,UDP更加简单,没有建立连接和断开连接的过程,也不保证数据的可靠性和顺序性,主要用于一些对实时性要求较高、可以容忍少量丢失的应用场景。比如视频、游戏、直播等等...

  1. 无连接:UDP在传输数据时不需要像TCP那样先建立连接,而是直接发送数据报文。这使得UDP在传输数据时更加轻便快捷,适合于一些实时性要求高、可以容忍少量丢失的应用场景。

  2. 数据报搬运工:UDP只是简单地搬运数据报文,不会对数据报文进行拆分和拼接,保持了数据的原始格式。

  3. 不可靠性:由于UDP是面向无连接的,不提供数据的可靠性保证,没有重传机制,也没有拥塞控制。这就意味着数据包可能会丢失、重复或乱序到达。

  4. 高效性:UDP的头部较小,没有连接建立和断开的开销,使得数据传输更加高效。这使得UDP适合于一些对实时性要求高、能够快速处理数据的应用场景。

  5. 传输方式:UDP支持多种传输方式,包括一对一、一对多、多对一、多对多等,适用于不同的通信需求。

  6. 使用场景

    • 直播:在直播场景中,UDP的高效性和实时性能很重要,能够快速传输视频、音频等数据,确保直播内容的及时性。
    • 游戏:在线游戏对实时性要求很高,UDP可以快速传输游戏数据,减少延迟,提升游戏体验。
    • 视频通话:视频通话也需要实时传输音视频数据,UDP能够帮助实现即时的数据传输,减少通话延迟。

当我们通过TCP或者UDP进行数据传输以后,再通过回流重绘等等操作就能将数据展示在页面上了...

结尾

当面试官问完你输入url以后的全过程,你就应该明白,他马上要问http了...

相关推荐
子兮曰6 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭6 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路8 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒9 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
Kagol10 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉10 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau10 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生10 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼11 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君8799711 小时前
Flutter 如何给图片添加多行文字水印
前端·flutter