1. URL
URL:统一的资源定位符,俗称网页地址简称网址
URL主要由以下几个部分组成:
2. DNS解析
DNS解析(域名解析),DNS就是一个域名和IP映射关系库。
IP地址很难记住,于是我们域名就出现了,让域名和IP一一形成映射关系,他们之前的转换由专门的域名解析服务器来完成,整个过程是自动进行的
DNS的作用就是解析域名,通过映射关系拿到IP
步骤:
- 查询浏览器缓存:浏览器会缓存之前拿到的DNS 2-30分钟时间,如果没有找到则进行2
- 检查系统缓存:检查hosts文件,这个文件就是保存之前访问过的一些域名IP对应的关系,如果没有则进行3
- 检查路由器缓存:路由器有自己的DNS缓存,如果没有继续4
- 查询IPS DNS缓存:IPS服务商DNS缓存(本地服务器缓存),如果依旧进行5
- 递归查询:从根域名服务器到顶级域名服务器在到极限域名服务器一次搜索对应目标域名的IP
3. 浏览器与网站建立TCP连接(三次握手)
第一次握手:客户端向服务器发送请求(SYN = 1)等待服务器确认
第二次握手:服务器收到请求并确认,回复指令(SYN = 1, ACK = 1)
第三次握手:客户端收到服务器回复的指令并返回确认(ACK = 1)
通过三次握手,信息往返进行确认双方身份达到最终的正确连接
4.请求和传输数据
连接建立以后,服务器根据请求的类型,入参,请求头等信息,返回对应的页面文件,在浏览器端进行渲染(这里我们不做请求的具体的细节解析)
5. 浏览器渲染页面
客户端浏览器拿到服务器传输过来的文件,找到HTML和MIME文件,通过MIME文件,浏览器知道要用页面渲染引擎来处理HTML文件
5.1 浏览器会解析html源码,然后创建一个DOM树。
在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。DOM树就像是一个解析后的信息文件,后续渲染需要根据DOM的信息进行
5.2 浏览器解析CSS代码,计算出最终的样式数据,形成对象模型CSSOM
首先忽略非法的css代码,之后按照浏览器设置-用户设置-外链样式(外部引入)-内链样式(style标签)-内联样式(dom上的style属性)顺序进行构建,形成CSSOM。CSSOM和DOM同理,他们只是后续渲染的一种信息模型。
补充:
- css加载不会阻塞DOM树的解析
- css加载会阻塞DOM树(也就是5.3中的渲染过程)的渲染
- css加载会阻塞后面js语句的执行
由上图也可以看出,DOM和CSSDOM必须在渲染树之前完成,因此HTML和CSS在加载完成之前都会对渲染造成阻塞
5.3 利用上诉DOM和CSSOM构建一个渲染树(rendering tree)
渲染树和DOM树类似,但是仅仅是类似,二者是有区别的
DOM树和HTMl标签对应,但是渲染树会忽略掉不需要渲染的元素,比如head、display:none
而且一大段文本中的每一行在渲染树上都是一个独立的节点
渲染树中的每一个节点都是存储有对应的css属性。
总结就是渲染树,包含了已经匹配好的DOM树和CSSOM,并且剔除了不需要渲染的元素
5.4 浏览器就根据渲染树直接把页面绘制到屏幕上
6. 关闭 TCP连接(四次挥手)
第一次挥手:客户端发送关闭连接的指令FIN和随机数seq
第二次挥手:服务器返回一个确认指令,确认收到
第三次挥手:服务端也发送一个关闭连接的指令FIN
第四次挥手:客户端确认收到服务端消息,断开连接
四次挥手需要双方各自确定可以断开连接并发送断开连接指令,这就是第1、3次挥手的目的,为了保证双方都处于可以关闭的状态。2、4次挥手时确认对方消息告诉对方,我收到了你的信息。所有信息确认完成就直接断开连接