面试官: 输入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了...

相关推荐
Dragon Wu11 分钟前
Taro React小程序开发框架 总结
前端·react.js·前端框架·taro
nbsaas-boot37 分钟前
消息队列场景下的前端设计:如何优化用户体验
前端·ux
sususugaa40 分钟前
前端框架Vue3——响应式数据,v-on,v-show和v-if,v-for,v-bind
开发语言·前端·vue.js·前端框架
珹洺2 小时前
从 HTML 到 CSS:开启网页样式之旅(三)—— CSS 三大特性与 CSS 常用属性
前端·javascript·css·网络·html·tensorflow·html5
T^T尚6 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志7 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3927 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
山猪打不过家猪7 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山7 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生7 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive