（一）一个页面从输入 URL 到加载完成，这个过程发生了什么？

十一ge哆啦A梦

已于 2024-04-15 15:23:51 修改

阅读量153

点赞数 3

分类专栏：面试题文章标签：前端

于 2024-03-06 17:11:04 首次发布

本文链接：https://blog.csdn.net/qq_43498878/article/details/136509039

版权

面试题专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、URL解析

地址解析：
在这里插入图片描述

补充：http和https协议的区别？

连接方式不同：
http是简单的无状态连接，https支持身份验证和加密通信。
端口号不同：
http默认端口号80；https默认端口号443
安全性不同：
http：是超文本传输协议，明文传输信息，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以读懂传输的信息。
https更安全，在http协议的基础上增加了SSL（安全套接字层）或TLS（传输层安全）协议，实现了数据的加密传输，防止数据在传输过程中被窃取或者篡改，提高了安全性，因此在处理敏感信息（如信用卡信息、个人数据等）时被广泛应用。

网络七层OSI网络模型：

OSI（Open System Interconnection
model）模型，由国际标准化组织提出的概念模型，提供一个使各种不同的计算机和网络在世界范围内实现互联的标准框架。
OSI模型将计算机网络结构分为七层，每层都可以提供抽象良好的接口。
OSI 模型各层间关系和通讯时的数据流向如图所示：

各层功能解释：
应用层：与最终用户的接口。协议：HTTP、TFTP、FTP、NFS、WAIS、SMTP、Telnet、Rlogin、DNS
表示层：处理用户信息的表示问题，如编码、数据格式转换和加密解密等。协议：SSL、JPEG
会话层：建立、管理、终止会话与数据传输同步，组织和协调两个会话进程之间的通信，并对数据交换进行管理。协议：NetBIOS（Network Basic Input/Output System）
传输层：定义传输数据的协议端口号，以及流控和差错校验。传输层的作用是向高层屏蔽下层数据通信的细节，即向用户透明地传送报文。传输数据的协议（TCP、UDP）
网络层：分组传送、路由选择、流量控制；逻辑地址寻址（IP），不同网络之间路径选择。该层控制数据链路层与传输层之间的信息转发，建立、维持和终止网络的连接。协议：IP，ICMP，ARP，RARP，AKP，UUCP
数据链路层：建立逻辑连接、进行硬件寻址、差错校验。协议：FDDI，Ethernet，Arpanet，PDN，SLIP，PPP
物理层：利用传输介质为数据链路层提供物理连接，实现比特流的透明传输。建立、维护、断开物理连接。

网络的封包与拆包：
在这里插入图片描述

二、缓存检查

缓存位置：
Mermory Cache:内存缓存
Disk Cache:磁盘缓存
（1）打开网页，检查disk cache是否有匹配，如果有则使用，没有则会发送网络请求。
（2）普通刷新（F5）:因为tab页签没关闭，因此 mermory cache是可用的，会被优先使用，其次才是disk-cache。
（3）强制刷新（Ctrl+F5）：浏览器不适用缓存，因此发送的请求头部均带有Cache-control：no-cache，服务器直接返回200和最新内容。

拓展——强缓存和协商缓存：

强缓存：（http1.0 Expires http1.1 Cache-Control）
html页面一般不做强缓存，每一次html请求都是正常的http请求
问题：如果服务器文件更新了，本地还是有缓存。
解决办法：
a.服务器更新资源之后，让资源名称和之前的不一样，这样页面和之前不一样（webpack打包回设置hashname）
b.当文件更新后，我们会在html导入的时候，设置一个后缀（时间戳），只要文件更新时间戳就会改变。
c.使用协商缓存代替强缓存。
协商缓存：（http1.0 Last-Modified http1.1 Etag）
协商缓存就是强制缓存失效后，浏览器携带缓存表示向服务器发起请求，由服务器根据缓存标识巨鼎是否使用缓存的过程。

三、DNS域名解析（DNS解析也有缓存）

DNS(Domain Name System)是互联网中用于将域名（例如 www.example.com）转换为IP地址的系统。它充当了互联网的地址簿，允许人们使用功能容易记住的域名而不是记住复杂的IP地址来访问地址，发送邮件等。
（1）递归查询（本地）
（2）迭代查询（本地 -> 服务器）如果没有，每一次DNS解析预计在20~120毫秒
所以性能优化有一条，DNS优化
（1）减少DNS请求次数
（2）DNS预获取（DNS Prefetch）

四、TCP三次握手（建立连接通道）

在这里插入图片描述
简述三次握手的过程：
（1）第一次握手：建立连接时，客户端向服务器端发送一个SYN（同步序列标识）包（syn=1，数据seq=x），此时进入SYN_SEND状态，等待服务器确认。
（2）第二次握手：服务器端收到syn，并确认客户端的SYN生成一个新的数据放到ACK(x+1)，并发送一个自己的SYN(syn=1,seq=y)，即SYN+ACK包，此时服务器进入SYN_RECV状态
（3）第三次握手：客户端接收到服务器端的ACK+SYN包，向服务器发送一个确认包
（ACK=y+1）,此时客户端和服务器端进入ESTABLISHED状态，完成三次握手。
其中：SYN标志位数置1，表示建立TCP连接；ACK标志表示验证字段。
参考：https://blog.csdn.net/cyxinda/article/details/104300003
https://blog.csdn.net/m0_38106923/article/details/108292454

五、数据传输

六、TCP四次挥手

在这里插入图片描述
四次挥手过程：
（1）第一次挥手：客户端发送一个FIN，数据seq=u，用来关闭客户端到服务器端的数据传送，客户端进入FIN_WAINT_1状态。
（2）第二次挥手：服务器收到客户端的FIN，发送一个ACK（接收的FIN数据=1即 u+1），服务器进入CLOSE_WAIT状态。
（3）第三次挥手：服务器段发送一个FIN（FIN+ACK，ACK不变），用来关闭服务器端到客户端的数据传送**，服务器端进入CLOSE_ACK状态。**
（4）第四次挥手：客户端收到FIN后**，客户端进入TIME_WAIT（时间等待）状态**（注意此时TCP连接还没有释放，必须经过2∗∗MSL（最长报文段寿命）的时间后，当客户端撤销相应的TCB后，才进入CLOSED状态。），接着发送一个ACK(第三次挥手拿到的FIN值+1即w+1)，服务器端收到了客户端发送的确认，立即进入CLOSE状态。同样，撤销TCB后，就结束了这次的TCP连接。可以看到**，服务器结束TCP连接的时间要比客户端早一些。**