浏览器中输入url后经历了哪些过程

在浏览器输入URL后回车,经历了哪些过程?
一、DNS的域名解析
二、建立tcp连接
三、发送一个http请求
四、服务器处理相关请求
五、返回响应的结果
六、关闭tcp连接
七、浏览器解析HTML
八、浏览器进行布局渲染
一、DNS域名解析
在浏览器输入网址后就是要向服务器请求我们想要的页面内容,首先我们的先要知道我们所请求的服务器在哪里,而定位服务器靠的就是ip地址,这时候我们就要将网址转换为ip地址,这个转换的过程就由DNS来完成。具体过程为:
客户端在拿到我们输入的域名后,先去本地的hosts文件中查找网址和ip的对应关系,分为以下两种情况:
a、hosts文件中有我们要请求的网址和ip的对应关系,则会拿这个ip直接向服务器发起请求。
b、hosts文件中没有我们要请求的网址和ip的对应关系,分为以下两种情况:
假如我们向DNS服务器发送的DNS查询报文中包含的域名是www.cnblogs.com
<1>、本地DNS服务器的缓存中没有comDNS服务器的地址,这时本地DNS服务器就会把把查询报文转发到根DNS服务器,根DNS服务器检查到报文中的域名后缀是.com,然后把comDNS服务器的IP地址返回给本地DNS服务器。接着本地DNS服务器再次向comDNS服务器发送查询请求,comDNS服务器收到查询请求后,会检查www.cnblogs.com后缀,并将负责该域名的权威DNS服务器的IP地址返回。最后,本地DNS服务器将含有www.cnblogs.com的IP地址的响应报文发送给客户端。
<2>、本地DNS服务器的缓存中已经有comDNS服务器的地址,则本地DNS服务器直接向comDNS服务器发送查询请求,然后返回该域名的权威DNS服务的ip地址给本地DNS服务器,接着本地DNS服务器将含有www.cnblogs.com的IP地址的响应报文发送给客户端。然后就会向我们所有请求的服务器发起请求。
从客户端到本地服务器属于递归查询,而DNS服务器之间的交互属于迭代查询。
可以参见下下面的图:
在这里插入图片描述
在这里插入图片描述
二、建立tcp连接
在这里插入图片描述
三、发送一个http请求
与服务器建立了连接后,就可以向服务器发起请求了。
在这里插入图片描述
参考链接:https://blog.csdn.net/cotexarm7/article/details/80838694
请求报文
在浏览器中查看报文首部(以google浏览器为例):
在这里插入图片描述
请求行包括请求方法、URI、HTTP版本。首部字段传递重要信息,包括请求首部字段、通用首部字段和实体首部字段。我们可以从报文中看到发出的请求的具体信息。

四、服务器处理相关请求
服务器端收到请求后的由web服务器(准确说应该是http服务器)处理请求,诸如Apache、Ngnix、IIS等。web服务器解析用户请求,知道了需要调度哪些资源文件,再通过相应的这些资源文件处理用户请求和参数,并调用数据库信息,最后将结果通过web服务器返回给浏览器客户端。
在这里插入图片描述
五、返回响应的结果
在HTTP里,有请求就会有响应,哪怕是错误信息。以下响应报文的组成结构:
在这里插入图片描述
响应报文
在响应结果中都会有个一个HTTP状态码,比如我们熟知的200、301、404、500等。通过这个状态码我们可以知道服务器端的处理是否正常,并能了解具体的错误。
状态码由3位数字和原因短语组成。根据首位数字,状态码可以分为五类:
在这里插入图片描述
六、关闭tcp连接
在这里插入图片描述
七、浏览器解析HTML
浏览器需要加载解析的不仅仅是HTML,还包括CSS、JS。以及还要加载图片、视频等其他媒体资源。浏览器通过解析HTML,生成DOM树,解析CSS,生成CSS规则树,然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同,渲染树中并没有head、display为none等不必显示的节点。
要注意的是,浏览器的解析过程并非是串连进行的,比如在解析CSS的同时,可以继续加载解析HTML,但在解析执行JS脚本时,会停止解析后续HTML,这就会出现阻塞问题,关于JS阻塞相关问题,这里不过多阐述,后面会单独开篇讲解。

八、浏览器进行布局渲染
根据渲染树布局,计算CSS样式,即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的,CSS和js会打破这种布局,改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念:replaint和reflow。
replaint:屏幕的一部分重画,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。
reflow: 意味着元件的几何尺寸变了,我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow,或是Layout。
所以我们应该尽量减少reflow和replaint,我想这也是为什么现在很少有用table布局的原因之一。
最后浏览器绘制各个节点,将页面展示给用户。
文本章主要是学习记录使用,如有侵权,告知删除即可。

  • 5
    点赞
  • 64
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值