面试官:聊聊从输入URL到页面渲染前的过程?

如果你也对春招感兴趣,欢迎加我的个人微信:sAnL1ng,我们有一个春招面试交流群,可以进群讨论大家面试过程中遇到的问题,我们一起解决。

前言

目前大三,最近这一段时间在投一些高质量的中厂,其中面试官最喜欢问的问题之一就是从输入URL到页面渲染这个过程里发生了什么 ?如果一言蔽之:Client向Server发请求拿数据,Server响应数据回给Client进行页面渲染,但是我们深入了解才发现里面其实还发生了很多数不胜数的精彩故事。页面渲染我们今天就不赘述,今天让我们从DNS解析再到TCP/UDP传输数据,深入探寻如何让天各一方的客户端和服务端建立起紧密的连接!

DNS 解析

是什么?

DNS(Domain Name System,域名系统)解析。我们可以把DNS解析被看作是互联网的"地址簿",它将人类可读的域名转换为计算机可理解的IP地址,使得数据能够在网络中正确地路由和传输。

例如SU7官网的URL是 www.xiaomiev.com/su7 , 其中www.xiaomiev.com这一部分就是域名,但是他原本的模样并不是这样,而是类似于192.168.0.1这种,如果让我们去记一串这种数字是否太反人类了呢~于是当我们去URL栏输入www.appple.com时,DNS会负责解析这个域名,将域名对应的IP地址找到来,于是我们还得聊一下DNS的查找过程了。

过程

聊到DNS解析域名的过程,借助下面这张图就很清晰明了了。

1. 查询本地缓存

当用户在浏览器中输入一个域名时,首先会去操作系统中本地缓存中查找。如果之前已经访问过相同的域名,计算机会缓存对应的IP地址,从而加快解析速度。

2. 查询本地DNS服务器

如果本地缓存中不存在相应的记录,计算机会向配置的本地DNS服务器发送解析请求。本地DNS服务器通常由用户的互联网服务提供商(ISP)或者公司内部提供。

3. 向根服务器查询

如果本地DNS服务器也没有相应的记录,它将向互联网中的根域名服务器发送解析请求。根域名服务器是互联网DNS体系结构的顶层,负责管理顶级域名服务器的地址。

4. 向顶级域名服务器查询

根域名服务器返回本地DNS服务器所配置的顶级域名服务器的地址(比如".com"顶级域名服务器)。本地DNS服务器随后向顶级域名服务器发送解析请求。

5. 向相应的二级域名服务器查询

顶级域名服务器返回对应域名的二级域名服务器的地址,本地DNS服务器最终向该服务器发送解析请求。二级域名服务器会返回所请求域名对应的IP地址,本地DNS服务器将这个IP地址返回给用户的计算机,完成DNS解析过程。

UDP(User Datagram Protocol,用户数据报协议)

是什么?

UDP(User Datagram Protocol,用户数据报协议)。简单来讲,UDP是一种轻量快速的网络传输协议,适用于对数据传输速度要求较高、但对数据可靠性要求较低的场景。与TCP相比,UDP更高效但却不安全,常用于实时通讯(如音视频)

传输特点

1. 无连接

想象一下你给朋友发短信,你不需要先打个电话告诉他:"我要发短信给你了",直接发就可以了。UDP就是这样的,不需要像TCP那样先建立连接,直接发数据就行。

UDP是一种无连接的协议,这意味着在发送数据之前不需要建立连接。相比之下,TCP需要在数据传输之前进行三次握手建立连接,这增加了一定的开销和延迟。

2 不可靠性

如果你发的短信丢了一条,那就丢了,没有重发的机制。UDP也一样,如果数据在传输过程中丢了,UDP不会管它,直接忽略。因为UDP更注重速度,而不是数据的完整性。

UDP传输不保证数据的可靠性,它不提供数据的重传和错误校验功能。如果数据在传输过程中丢失或损坏,UDP不会进行任何补救措施,而是简单地丢弃该数据包。

3. 高效性

正因为UDP不做太多额外的事情,所以速度比较快。就像你直接发短信比先打电话再发要快一样。

由于UDP不需要建立连接、不进行数据重传和错误校验,因此它的传输效率更高。这使得UDP适用于对数据传输速度要求较高、但对数据可靠性要求较低的场景。

应用场景

1. 实时通信

由于UDP传输具有低延迟和高效率的特点,因此它常被用于实时通信应用,如语音通话、视频会议和在线游戏。在这些场景下,实时性比数据的完整性更为重要,因此UDP的速度优势能够发挥到极致。

想想你打电话或者视频通话时,不能有太大的延迟,否则就会卡顿,影响沟通。UDP常用于这些实时通信场景,因为它速度快,延迟低。

2. 多播和广播

UDP支持一对多和多对多的数据传输方式,因此它常被用于多播(Multicast)和广播(Broadcast)场景。在多播中,一台主机可以同时向多个接收者发送相同的数据;而在广播中,一台主机可以向局域网中的所有设备发送数据。

多播就像你在微信群里发送消息,一次写好发送给很多人;广播就像你在广播电视里发出信号,所有收音机都可以收到。UDP支持这种一对多的数据传输方式。

3. 快速数据传输

对于一些对数据传输速度要求较高、但数据完整性要求较低的场景,如音乐流媒体、实时股票行情等,UDP可以提供更快的数据传输速度,同时避免了TCP连接建立和数据重传等额外开销。

玩游戏时,每一步操作都要快速传输到游戏服务器,然后服务器再把其他玩家的操作传回来,这需要速度快、及时性强的传输方式。UDP正好能满足这个需求。

TCP(Transmission Control Protocol)

是什么

TCP(Transmission Control Protocol)。简单来讲,TCP是一种安全可靠面向连接的网络传输协议,通过建立连接数据传输连接释放等步骤,确保数据在传输过程中不丢失、不损坏、按序到达,常广泛应用于安全完整的数据传输。

传输特点

1. 建立连接

TCP在进行数据传输之前,需要进行三次握手建立连接的过程。 这个过程包括客户端向服务端发送连接请求,服务端应答连接请求并确认,最终客户端再次确认连接。这个过程保证了双方都能够彼此确认对方的可达性,从而建立起可靠的通信通道。

就好像你和朋友见面,需要打个招呼确认对方在场一样。发送方先问一声"你在吗?",接收方收到后说"我在",然后发送方再确认一遍,这样就建立了通信渠道。

2. 可靠性

TCP通过序列号、确认应答、超时重传等机制保证数据的可靠传输。每个数据包都有序列号,接收方接收到数据后会发送确认应答,发送方在一定时间内未收到确认应答则会重传数据包(超时重传机制),以确保数据的完整性和可靠性。

TCP会给每个数据包标上号码,接收方收到后会回复一个"收到了"的信号,如果发送方一段时间内没收到回复,就会重新发一遍。这样就确保了数据能够安全、完整地送达目的地。

3. 拥塞控制

TCP通过拥塞窗口、慢启动、拥塞避免等算法来进行拥塞控制,避免网络拥塞导致的丢包和传输延迟。TCP会根据网络的情况动态调整数据发送的速率,以保证网络的稳定性和高效性。

TCP会像我们开车一样,观察路况调整速度,避免拥堵。它会根据网络情况调整发送数据的速度,以免网络拥堵导致数据丢失或传输延迟。

4. 流量控制

TCP通过滑动窗口机制进行流量控制,控制发送方发送数据的速率,以避免接收方处理不及时而导致的数据丢失或溢出。发送方根据接收方的处理能力和网络情况动态调整发送窗口的大小,以实现发送和接收的平衡。

就好像你给朋友发信息,看到对方回复了再继续发一样。TCP会根据接收方的处理能力和网络情况调整发送数据的速度,以确保发送和接收的平衡,不会导致信息处理不过来。

工作过程

1. 三次握手建立连接

  1. 客户端向服务端发送建立连接请求,客户端进入SYN-SEND状态。
  2. 服务端接收到建立连接请求后,向客户端发送一个应答,服务端进入SYN-RECEIVED状态。
  3. 客户端接收到应答后,再次发送确认接收到应答,客户端进入ESTABLISHED状态。

2. 数据传输

建立连接后,双方开始进行数据传输。发送方将数据分割成合适大小的数据包,并加上序列号进行传输;接收方接收到数据后发送确认应答,并按序将数据交付给应用层。【这里涉及到了HTTP通信,我会在下一篇文章详细讲解。

3. 四次挥手连接释放

  1. 客户端A向服务端B发送断开请求连接。
  2. B接收到断开连接请求后,告诉应用层释放TCP连接,此时B仍然可以给A发送数据包。
  3. B向A发送最后一个数据包后,进入LAST-ACK状态。
  4. A接收到B的释放连接后,向B确认应答。

总结

今天我们聊了从用户输入URL到页面渲染前发生的内容,首先DNS解析域名以及不断向外查找IP的一个过程,然后根据传输内容的不同来决定采取TCP/UDP协议进行客户端和服务器端的连接,在三次握手和四次挥手之间还有一个HTTP通信今天没细聊,因为我决定将其与HTTP的发展史一块放到下一篇文章细说,下一篇文章我会为大家介绍HTTP从0.9版本过渡到HTTP3.0版本中其在特定时期做了哪些针对性改变以及细节内容。

相关推荐
hackeroink1 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
LCG元2 小时前
【面试问题】JIT 是什么?和 JVM 什么关系?
面试·职场和发展
迷雾漫步者2 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-3 小时前
验证码机制
前端·后端
燃先生._.4 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖5 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235245 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240256 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar6 小时前
纯前端实现更新检测
开发语言·前端·javascript