从输入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:none2. 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连接,并且双方都知道对方的初始序列号和确认号,可以进行后续的可靠数据传输。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/204275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python可视化plotly 图例(legend)设置大全,值得收藏!

文章目录 一、图例(legend)二、update\_layout(legend{}) 相关参数及示例关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python…

多向通信----多人聊天

package 多人聊天; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStream; import java.io.PrintStream; import java.net.ServerSocket; import java.net.Socket; import java.util.ArrayList; publ…

K8s中安装calico一直无法启动成功

问题描述 #k8s版本为v1.20.9查看对应日志 #calico-node-xxx 对应pod名称 kubectl logs calico-node-xxxx -n kube-system #没有错误但是一直启动不起来应该是版本不匹配问题解决方案 删除 calico重新安装对应版本删除podskubectl delete -f calico.yaml删除文件 rm -f calico.…

四步实现企业微信群的裂变增长

在这个流量红利逐渐消失的时代&#xff0c;获取客户变得越来越困难且成本高昂。因此&#xff0c;许多企业和商家开始转向私域流量的开发&#xff0c;以实现客户的持续增长和转化。企业微信作为一种有效的客户管理工具&#xff0c;被广泛用于私域流量的构建和管理。在私域流量的…

传统软件正在颠覆SaaS

曾经&#xff0c;SaaS的口号&#xff1a;“颠覆传统软件”喊得无比响亮。 但传统软件存在了这么多年&#xff0c;必然有其存在的合理性。 而自诩为“互联网公司”的SaaS公司&#xff0c;为了证明自己比传统软件“更先进”&#xff0c;反而犯过不少低级错误。 比如&#xff0…

electron-builder 的基本使用

electron打包说明 打包步骤 step1: 将 index.html 放到 h5 目录中 step2&#xff1a;在h5目录中 执行打包命令 yarn electron-builder打包结果 会生成一个 字里华夏 的目录, 1、cd 到 字里华夏 目录 其中有一个 字里华夏Setup1.2.0.exe文件&#xff0c; 这个是 桌面应用的…

【NLP】如何管理大型语言模型 (LLM)

什么是LLM编排&#xff1f; LLM 编排是管理和控制大型语言模型 (LLM)的过程&#xff0c;以优化其性能和有效性。这包括以下任务&#xff1a; 提示LLM&#xff1a;生成有效的提示&#xff0c;为LLMs提供适当的背景和信息以产生所需的输出。链接LLM&#xff1a; 结合多个LLM的输…

SpringBoot读取properties文字乱码问题及相关问题

问题&#xff1a;在idea的编辑器中properties文件一般用UTF-8编码&#xff0c;SpringBoot2读取解码方式默认不是UTF-8&#xff0c;当值出现中文时SpringBoot读取时出现了乱码。 解决方式1&#xff1a;在SpringBoot框架层面解决&#xff0c;在配置类注解上添加encoding属性值为…

5G - NR物理层解决方案支持6G非地面网络中的高移动性

文章目录 非地面网络场景链路仿真参数实验仿真结果 非地面网络场景 链路仿真参数 实验仿真结果 Figure 5 && Figure 6&#xff1a;不同信噪比下的BER和吞吐量 变量 SISO 2x2MIMO 2x4MIMO 2x8MIMOReyleigh衰落、Rician衰落、多径TDL-A(NLOS) 、TDL-E(LOS)(a)QPSK (b)16…

抽象类(HNU-面向对象程序设计)

抽象类 一种不能被实例化的类&#xff0c;目的是为了让其他类继承它&#xff0c;并在子类中完善它的抽象方法。我们使用 abstract 关键字来定义抽象类&#xff0c;同时它可以包含抽象方法和普通方法。 例子&#xff1a; abstract class Shape {// 抽象方法&#xff0c;没有实…

[足式机器人]Part4 南科大高等机器人控制课 Ch02 Rigid Body Configuration and Velocity

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;CLEAR_LAB 笔者带更新-运动学 课程主讲教师&#xff1a; Prof. Wei Zhang 南科大高等机器人控制课 Ch02 Rigid Body Configuration and Velocity 1. Rigid Body Configuration1.1 Special Orthogonal Group1.2 Use of Ro…

Centos7安装宝塔面板8.0.3并实现公网远程登录宝塔面板【内网穿透】

文章目录 一、使用官网一键安装命令安装宝塔二、简单配置宝塔&#xff0c;内网穿透三、使用固定公网地址访问宝塔 宝塔面板作为建站运维工具&#xff0c;适合新手&#xff0c;简单好用。当我们在家里/公司搭建了宝塔&#xff0c;没有公网IP&#xff0c;但是想要在外也可以访问内…

组合总和II(回溯、去重)

40. 组合总和 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a…

相交链表(LeetCode 160)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路方法一&#xff1a;暴力法方法二&#xff1a;哈希表方法三&#xff1a;双栈方法四&#xff1a;双指针&#xff1a;记录链表长度方法五&#xff1a;双指针&#xff1a;互换遍历 5.实现示例参考文献 1.问题描述 给两个单链表的…

Java第二十一章网络通信

一、网络程序设计基础 1、局域网与互联网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机&#xff0c;如下图所示。 2、网络协议 1.IP协议 IP指网际互连协议&#xff0c;Internet Protocol的缩写&#xff0c;是TCP/IP体系中的网络层协议。设计IP的目的…

C++几种cast该如何使用

在C中&#xff0c;有四种主要的类型转换&#xff08;cast&#xff09;方法&#xff1a; 1. Static Cast&#xff08;静态转换&#xff09;&#xff1a; 用法&#xff1a;static_cast<new_type>(expression)情况&#xff1a;用于基本数据类型之间的转换&#xff0c;例如…

深入理解数据在内存中是如何存储的,位移操作符如何使用(能看懂文字就能明白系列)文章超长,慢慢品尝

系列文章目录 C语言笔记专栏 能看懂文字就能明白系列 &#x1f31f; 个人主页&#xff1a;古德猫宁- &#x1f308; 信念如阳光&#xff0c;照亮前行的每一步 文章目录 系列文章目录&#x1f308; *信念如阳光&#xff0c;照亮前行的每一步* 前言引子一、2进制和进制转化为什么…

Elasticsearch mapping 之 性能相关配置

ES 常见类型 通用类型: 二进制: binary 布尔型: boolean 字符串: keyword, constant_keyword, wildcard, text 别名: alias 对象: object, flattened, nested, join 结构化数据类型: Range, ip, version, murmur3 空间数据类型: geo_point, geo_shape, point, shape 性…

Verilog开源项目——百兆以太网交换机(四)令牌桶管理单元设计

Verilog开源项目——百兆以太网交换机&#xff08;四&#xff09;令牌桶管理单元设计 &#x1f508;声明&#xff1a;未经作者允许&#xff0c;禁止转载 &#x1f603;博主主页&#xff1a;王_嘻嘻的CSDN主页 &#x1f511;全新原创以太网交换机项目&#xff0c;Blog内容将聚焦…

说说你熟悉哪些maven命令?

Maven是一个流行的Java项目管理和构建工具&#xff0c;它提供了许多命令行工具来帮助开发者管理和构建项目。以下是一些常见的Maven命令&#xff1a; mvn clean&#xff1a;清理项目构建产生的临时文件。mvn compile&#xff1a;编译Java源代码到字节码文件。mvn test&#xf…