从浏览器地址栏输入url,到看到返回的页面,都发生了什么

一、DNS域名解析

先从本地硬盘的hosts文件中查找该域名对应的ip,如果找不到,浏览器就会向本地DNS服务器发送DNS请求,本地DNS服务器先从缓存中查找,如果还找不到,就会发请求给DNS根服务器,如果找到对应ip,会将该ip先返回给本地DNS服务器,再返回给浏览器。如果在DNS根服务器中还找不到的话,DNS根服务器会告诉本地DNS服务器向DNS域服务器发送请求,依次递归下去,直到找到为止。

注意:浏览器只跟本地DNS服务器打交道,DNS根服务器,DNS域服务器不能直接打交道,它们都是和本地DNS服务器打交道,如下图:

二、建立TCP连接

通过域名解析得到ip地址后,浏览器会向该ip对象的web服务器发送连接请求,经历tcp连接的三次握手,第一次:浏览器向服务器发送SYN请求,第二次:服务器发送确认ACK和请求SYN,第三次:浏览器发送确认ACK。三次握手后,连接成功。

三、浏览器向服务器发送http请求

请求主要包含三部分内容

请求方法(get,post)

请求内容

请求头

如下图:

 四、服务器处理请求

服务器解析浏览器发来的请求,调度相应的资源,返回给浏览器。

五、关闭TCP连接

当不在有请求和响应时,浏览器和服务器都可以提出关闭连接请求,需经过四次握手,可由任意一方发起请求,这里以浏览器先发起为例:第一次:浏览器发送FIN。 第二次:服务器发送ACK。 第三次:服务器发送FIN。 第四次:浏览器发送ACK。

六、浏览器解析资源

浏览器接收HTML,CSS,JS,图片等资源

生成DOM树,结合CSS规则生成render树,render树中不包含display:none等隐藏或不必显示的元素

在解析CSS的同时,可以继续进行DOM树的解析,但在解析js脚本时,不能继续解析DOM树,会出现阻塞问题。

七、浏览器进行布局渲染

浏览器根据render树对网页进行渲染,这里涉及两个概念:回流,重绘

回流(reflow):节点的尺寸,布局发生变化,比如节点的隐藏,会导致网页布局发生变化,此时就需要重新构建render树。

重绘(repaint):节点的尺寸,布局没有变化。比如改变了元素的背景颜色,元素所占的盒子大小尺寸和布局没有变化,就是重绘。

有些情况下,比如修改了元素的样式,浏览器不会立即reflow或者repaint一次,而是将这样的操作积攒到一起,进行一次reflow或repaint,这叫做异步或增量异步reflow,repaint

有些情况下,比如页面默认的字体样式发生了变化,会立即进行一次repaint或reflow。

由此可见,reflow比repaint更为复杂,reflow一定会发生repaint,repaint不一定发生reflow

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值