首页 > 其他分享 >浏览器地址栏从输入地址到页面展示都发生了什么

浏览器地址栏从输入地址到页面展示都发生了什么

时间:2022-08-15 21:11:10浏览次数:83  
标签:缓存 浏览器 Tree 发送 域名 页面 地址栏 客户端

1 URL输入

2 DNS解析

浏览器会首先从缓存中找是否存在域名,如果存在就直接取出对应的ip地址,

其中会请求

第一步,浏览器缓存 当用户在浏览器输入 www.baidu.com时 , 浏览器会先检查自己的缓存,如果有这个域名,就与其映射的IP地址建立链接,解析完成!

第二步,本地系统缓存 如果浏览器缓存没找到,就检查本地操作系统的缓存,如果有这个域名,就与其映射的IP地址建立链接,解析完成!

第三步,本地域名服务器 如果操作系统缓存中没有找到,则检查本地域名服务器的缓存,如果有这个域名,就与其映射的IP建立链接,解析完成!

如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问根域名解析器,将对应的ip发给客户端;然后访问顶级域名服务器,将对应的ip发给客户端;最后访问本地域名服务器,得到最终的ip地址。

3 建立TCP连接(三次握手)

由客户端 先向 服务端 发送 SYN 报文 并 发送 client 初始化序号 服务端接收后,由服务端 再向客户端发送 SYN+ACK 应答报文 并 发送 确认应答号 为 client+1 与 server 初始化序号

客户端接受后,最后向服务器 发送 ACK 应答报文 并 发送 应答序列号 server+1

至此 就能保证双方的发送 和 接收 能力 正常 且双方的初始化序列号能被可靠的同步。

4 发送HTTP/HTTPS请求

浏览器向服务器发送一条 HTTP 请求报文

请求行 : 请求方法 URL 版本

请求头:头部字段名+值

请求体:内容

5 服务器响应请求

服务器返回给浏览器一条 HTTP 响应报文

响应行: 版本 状态码 字段

6 浏览器解析渲染页面

(1)解析html资源,构建DOM Tree

(2)解析css资源,构建CSS Rule Tree

(3)JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree

(4)解析完成后综合DOM Tree和CSS Tree会生成Render Tree,计算每个元素的位置,这个过程就是回流(layout or reflow)

(5)调用操作系统Native GUI的绘制

(6)页面绘制完成

7 HTTP请求结束 断开TCP连接

关闭 TCP 连接(四次挥手)

客户端向 服务端 发送 FIN

服务端 向 客户端 发送 ACK

数据传输 完毕 后 再发送 FIN

客户端 接收数据后 发送 ACK

服务端 进入CLOSE状态 关闭

客户端在2MSL(报文最大生存时间) 后 自动进入CLOSE 状态 关闭

标签:缓存,浏览器,Tree,发送,域名,页面,地址栏,客户端
From: https://www.cnblogs.com/lzbbbb/p/16589635.html

相关文章