浏览器从输入url请求到渲染页面发生了什么

153 阅读5分钟

juejin.cn/post/689684…

转载自 blog.csdn.net/qq_43886365…

用户输入阶段:

合成 URL:浏览器会判断用户输入是合法 URL,比如用户输入的是搜索的关键词,默认的搜索引擎会合成新的,如果符合url规则会根据url协议,在这段内容加上协议合成合法的url

查找缓存:

网络进程获取到URL,先去本地缓存中查找是否有缓存资源,如果有则拦截请求,直接将缓存资源返回给浏览器进程;否则,进入网络请请求阶段;

DNS 解析:

DNS 查找数据缓存服务中是否缓存过当前域名信息,有则直接返回;否则,会进行 DNS 解析返回域名对应的 IP 和端口号,如果没有指定端口号,http 默认 80 端口,https 默认 443。如果是 https 请求,还需要建立 TLS 连接;

建立 TCP 连接:

TCP 三次握手与服务器建立连接,然后进行数据的传输;(三次握手)

发送 HTTP 请求:

浏览器首先会向服务器发送请求行,它包含了请求方法、请求 URI 和 HTTP 协议的版本;另外还会发送请求头,告诉服务器一些浏览器的相关信息,比如浏览器内核,请求域名;

服务器处理请求:

服务器首先返回响应行,包括协议版本和状态码,比如状态码 200 表示继续处理该请求;如果是 301,则表示重定向,服务器也会向浏览器发送响应头,包含了一些信息;

页面渲染:

1,浏览器将获取的HTML文档解析成DOM树。 2,处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。 3,将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。 4,渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。 5,将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。

最后断开 TCP 连接:

数据传输完成,正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive,TCP 就会一直保持连接。

什么是三次握手和四次挥手?

为了准确无误地把数据送达目标处,TCP协议采用了三次握手策略。用TCP协议把数据包送出去后,TCP不会对传送 后的情况置之不理,它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志:SYN和ACK。

三次握手:

  • 第一次:建立连接时,客户端发送syn包到服务器,等待服务端确认
  • 第二次:服务器收到syn包,必须确认客户的syn,同时也发送一个syn包,即syn+ACK包
  • 第三次:客户端收到服务器的syn和ack包,向服务器发送确认包ack,发送完毕,客户端和服务端连接成功,完成三次握手

若在握手过程中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包。

四次挥手:

  • 1) 第一次挥手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可 以接受数据。
  • 2)第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。
  • 3) 第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。
  • 4)第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。

image.png

Http和Https的区别

1.HTTP 的URL 以http:// 开头,而HTTPS 的URL 以https:// 开头

2.HTTP 是不安全的,而 HTTPS 是安全的

3.HTTP 标准端口是80 ,而 HTTPS 的标准端口是443

4.在OSI 网络模型中,HTTP工作于应用层,而HTTPS 的安全传输机制工作在传输层

5.HTTP 无法加密,而HTTPS 对传输的数据进行加密,证的网络协议,安全性高于HTTP协议。

6.HTTP无需证书,而HTTPS 需要CA机构wosign的颁发的SSL证书,一般免费证书少,因而需要一定费用。

GET和POST的区别

1.GET在浏览器回退不会再次请求,POST会再次提交请求

2.GET请求会被浏览器主动缓存,POST不会,要手动设置

3.GET请求参数会被完整保留在浏览器历史记录里,POST中的参数不会

4.GET请求在URL中传送的参数是有长度限制的,而POST没有限制

5.GET参数通过URL传递,POST放在Request body中

6.GET参数暴露在地址栏不安全,POST放在报文内部更安全

7.GET一般用于查询信息,POST一般用于提交某种信息进行某些修改操作

8.GET产生一个TCP数据包;POST产生两个TCP数据包

Get和post的选择:

1.私密性的信息请求使用post(如注册、登陆)。

2.查询信息使用get