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

从输入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连接(四次握手)

注:

  1. SYN(同步):SYN是指同步序列编号(Synchronize Sequence Numbers)。在建立TCP连接时,客户端向服务器发送一个SYN标志的数据包,表示客户端希望建立连接。这个SYN包中会包含一个初始的序列号。

  2. SEQ(序列号):SEQ是指序列编号(Sequence Number)。在TCP连接中,每个数据包都有一个序列号,用于对数据包进行排序和重组。在三次握手过程中,客户端和服务器会交换各自的初始序列号,以便在后续的数据传输中进行正确的排序和确认。

下面是三次握手的步骤:

  1. 客户端向服务器发送一个带有SYN标志的数据包,该数据包中包含一个初始的序列号(SYN=1,SEQ=x)。

  2. 服务器接收到客户端的SYN数据包后,会回复一个带有SYN/ACK标志的数据包作为响应。这个响应数据包中会包含服务器的初始序列号和确认号(SYN=1,ACK=1,SEQ=y,ACK=x+1)。

  3. 客户端收到服务器的SYN/ACK数据包后,会发送一个带有ACK标志的数据包作为确认,表示客户端已经接收到服务器的响应(SYN=0,ACK=1,SEQ=x+1,ACK=y+1)。

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

 

相关推荐

  1. 输入URL页面过程

    2023-12-07 14:48:06       46 阅读
  2. 输入url页面过程

    2023-12-07 14:48:06       16 阅读
  3. 输入URL页面渲染过程详解

    2023-12-07 14:48:06       15 阅读
  4. 输入URL页面完中间发生了什么?

    2023-12-07 14:48:06       8 阅读
  5. 浏览器输入url渲染过程

    2023-12-07 14:48:06       17 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-07 14:48:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-07 14:48:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-07 14:48:06       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-07 14:48:06       20 阅读

热门阅读

  1. 新知识-Tuple元组的使用

    2023-12-07 14:48:06       38 阅读
  2. day4 节点两两交换

    2023-12-07 14:48:06       31 阅读
  3. Jtti:降低香港服务器被攻击的几种策略方法

    2023-12-07 14:48:06       39 阅读
  4. Rust:入门指南与编程的奇妙冒险

    2023-12-07 14:48:06       44 阅读
  5. C语言语义缺陷(一)

    2023-12-07 14:48:06       37 阅读
  6. python 实现 excle读取时间序列数据并画图显示

    2023-12-07 14:48:06       49 阅读
  7. WordPress定时发布文章失败的原因及解决办法

    2023-12-07 14:48:06       37 阅读
  8. 程序员养生指南-八段锦

    2023-12-07 14:48:06       36 阅读
  9. 【recrutment / Hiring / Job / Application】

    2023-12-07 14:48:06       26 阅读
  10. 项目中使用AI功能

    2023-12-07 14:48:06       42 阅读