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

最新推荐文章于 2024-03-28 00:00:00 发布

湖边看客

最新推荐文章于 2024-03-28 00:00:00 发布

阅读量429

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/VVVVV16/article/details/134824754

版权

从输入URL到页面加载的全过程
输入URL，并按下回车
浏览器检查浏览器缓存、系统缓存、路由器缓存，如果缓存中有，则直接显示页面，如果没有进行下一步
根据URL通过DNS进行域名解析，获取IP地址
DNS解析过程：是一个迭代查询和递归查询的过程

1. 首先会在浏览器的缓存中查找对应的IP地址，如果查找到直接返回，若找不到继续下一步
2. 将请求发送给本地DNS服务器，在本地域名服务器缓存中查询，如果查找到，就直接将查找结果返回，若找不到继续下一步
3. 本地DNS服务器向根域名服务器发送请求，根域名服务器会返回一个所查询域的顶级域名服务器地址
4. 本地DNS服务器向顶级域名服务器发送请求，接受请求的服务器查询自己的缓存，如果有记录，就返回查询结果，如果没有就返回相关的下一级的权威域名服务器的地址
5. 本地DNS服务器向权威域名服务器发送请求，域名服务器返回对应的结果
6. 本地DNS服务器将返回结果保存在缓存中，便于下次使用
7. 本地DNS服务器将返回结果返回给浏览器

浏览器向服务器发送TCP连接请求，进行三次握手
三次握手成功，浏览器向服务器发送http请求
服务器接收到请求，返回请求数据
浏览器接收数据并进行页面渲染(读取页面内容，浏览器进行渲染)

1. 首先解析 HTML 文档，形成 DOM 树
2. 接着解析 CSS，产生 CSSOM树
3. 在DOM和CSSOM树解析过程中，遇到 JS，会立即阻塞DOM树的构建，JS解析完成，接着解析HTML、CSS
4. 再接着，浏览器通过DOM和CSSOM树构建渲染树 ( Render树 )
    1. 这个过程中，DOM中不可见标签元素不会放到渲染树中，就像<head></head> 或 display:none
    2. CSSOM树规则会附加给渲染树的每个元素上
5. 渲染树构建完成，浏览器会对这些元素进行定位和布局，这一步也叫 重排/回流 ( Reflow) 或 布局(Layout )
6. 接下来绘制这些元素的样式，颜色，背景，大小及边框等，这一步也叫做 重绘 (Repaint)
7. 再接下来是我们这最后一步合成( composite )，浏览器会将各层信息发送给GPU，GPU将各层合成，显示在屏幕上

断开TCP连接(四次握手)

注：

SYN（同步）：SYN是指同步序列编号（Synchronize Sequence Numbers）。在建立TCP连接时，客户端向服务器发送一个SYN标志的数据包，表示客户端希望建立连接。这个SYN包中会包含一个初始的序列号。
SEQ（序列号）：SEQ是指序列编号（Sequence Number）。在TCP连接中，每个数据包都有一个序列号，用于对数据包进行排序和重组。在三次握手过程中，客户端和服务器会交换各自的初始序列号，以便在后续的数据传输中进行正确的排序和确认。

下面是三次握手的步骤：

客户端向服务器发送一个带有SYN标志的数据包，该数据包中包含一个初始的序列号（SYN=1，SEQ=x）。
服务器接收到客户端的SYN数据包后，会回复一个带有SYN/ACK标志的数据包作为响应。这个响应数据包中会包含服务器的初始序列号和确认号（SYN=1，ACK=1，SEQ=y，ACK=x+1）。
客户端收到服务器的SYN/ACK数据包后，会发送一个带有ACK标志的数据包作为确认，表示客户端已经接收到服务器的响应（SYN=0，ACK=1，SEQ=x+1，ACK=y+1）。

通过这样的三次握手过程，客户端和服务器成功建立了TCP连接，并且双方都知道对方的初始序列号和确认号，可以进行后续的可靠数据传输。

湖边看客

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
从输入URL到页面加载的全过程

在三次握手过程中，客户端和服务器会交换各自的初始序列号，以便在后续的数据传输中进行正确的排序和确认。这个响应数据包中会包含服务器的初始序列号和确认号（SYN=1，ACK=1，SEQ=y，ACK=x+1）。客户端收到服务器的SYN/ACK数据包后，会发送一个带有ACK标志的数据包作为确认，表示客户端已经接收到服务器的响应（SYN=0，ACK=1，SEQ=x+1，ACK=y+1）。客户端向服务器发送一个带有SYN标志的数据包，该数据包中包含一个初始的序列号（SYN=1，SEQ=x）。输入URL，并按下回车。
复制链接

扫一扫