当前位置: 首页 > Web前端 > CSS

细说浏览器输入URL后发生了什么

时间:2023-03-30 22:39:23 CSS

详细解释浏览器输入URLConnection后会发生什么;7、浏览器解析HTML;8、浏览器布局渲染;总结当我们在浏览器中输入网址并回车后,一切都从这里开始。1、DNS域名解析当我们在浏览器中输入网址的时候,其实是想向服务器请求我们想要的页面内容。所有浏览器首先要确认的是域名对应的服务器在哪里。将域名解析成对应的服务器IP地址的工作是由DNS服务器完成的。客户端收到你输入的域名地址后,首先查找本地的hosts文件,检查文件中是否有对应的域名和IP对应关系。如果存在,它会向其IP地址发送请求。如果没有,那就去找DNS服务器。一般用户很少编辑修改hosts文件。浏览器客户端向本地DNS服务器发送包含域名www.cnblogs.com的DNS查询报文。本地DNS服务器将查询报文转发给根DNS服务器,根DNS服务器注意到com后缀,于是将comDNS服务器的IP地址返回给本地DNS服务器。本地DNS服务器再次向comDNS服务器发送查询请求,comDNS服务器注意到其后缀为www.cnblogs.com,并以负责该域名的权威DNS服务器IP地址作为响应。最后,本地DNS服务器向客户端发送包含www.cnblogs.comIP地址的响应报文。从客户端到本地服务器是递归查询,而DNS服务器之间的交互是迭代查询。一般情况下,comDNS服务器的地址已经存在于本地DNS服务器的缓存中,所以不需要请求根域名服务器的步骤。2.费了九牛二虎之力才建立了TCP连接,终于拿到了服务器IP。接下来自然是连接服务器了。对于客户端和服务器端的TCP连接,不得不说的就是“三次握手”。三向握手客户端向服务器发送一个带有SYN标志的数据包。服务器收到后,返回一个带有SYN/ACK标志的数据包,显示确认信息,最后客户端回送一个带有ACK标志的数据包,表示握手结束,连接成功成功的。上图也可以这样理解:客户:“你好,我不在家,我有你的快递。”服务员:“是的,就送吧。”客户:“好的。”3.发送HTTP请求与服务器建立连接后,就可以向服务器发起请求了。这里我们先看一下请求报文的结构(如下图):在浏览器中查看请求报文的头部(以谷歌浏览器为例):请求行包括请求方法、URI、以及HTTP版本。Header字段传达重要信息,包括请求头字段、通用头字段和实体头字段。我们可以从消息中看到发送请求的具体信息。各个头域的具体作用这里就不细说了。第四,服务器处理请求。服务器收到请求后,web服务器(准确的说应该是http服务器)处理请求,如Apache、Ngnix、IIS等。web服务器分析用户请求,知道需要哪些资源文件调度,然后通过相应的资源文件处理用户请求和参数,调用数据库信息,最后通过web服务器将结果返回给浏览器客户端。服务器处理请求5.返回响应结果在HTTP中,有请求就会有响应,即使是错误信息。这里我们还要看一下响应报文的结构:响应报文在响应结果中都会有一个HTTP状态码,比如大家熟知的200、301、404、500等,通过这个状态码,我们可以知道服务端处理是否正常,能理解具体错误。状态代码由3位数字和后跟原因短语组成。根据第一个数字,状态码可以分为五类:状态码类别6.关闭TCP连接为了避免服务器和客户端的资源占用和丢失,当两者之间没有请求或响应传递时parties,任何一方都可以发起关闭请求。与创建TCP连接的3次握手类似,关闭TCP连接需要4次握手。上面4次握手的图片可以这样理解:Client:“兄弟,我这里没有数据要传了,我们关闭连接吧。”服务器:“知道了,我看看我这边有没有数据。”服务器:“大哥,我没有数据要发给你,我们可以关闭连接了。”客户:“好的。”7、浏览器解析HTML准确的说,浏览器需要加载和解析的不仅仅是HTML,还包括CSS、JS。并加载图片、视频等媒体资源。浏览器通过解析HTML生成DOM树,解析CSS,生成CSS规则树,再通过DOM树和CSS规则树生成渲染树。渲染树不同于DOM树。渲染树中没有不需要显示的节点,比如head和none的显示。需要注意的是,浏览器的解析过程并不是串行进行的。比如在解析CSS的时候,可以继续加载解析HTML,但是在解析执行JS脚本的时候,会停止解析后续的HTML,这样就会造成阻塞问题,关于JS阻塞相关的问题,这里就不细说了,后面会单独说明。8、浏览器布局渲染根据渲染树布局,计算出CSS样式,即页面中各个节点的大小、位置等几何信息。HTML默认是流体布局,CSS和js会打破这种布局,改变DOM的外观样式、大小和位置。这时候要提到两个重要的概念:reply和reflow。Replain:在不影响整体布局的情况下重绘屏幕的一部分。例如,某个CSS的背景颜色发生变化,但元素的几何尺寸和位置保持不变。reflow:表示组件的几何尺寸发生了变化,我们需要重新验证并计算渲染树。渲染树的一部分或全部已更改。这就是回流,或布局。所以我们应该尽量减少reflow和replain,我想这也是现在很少使用tablelayout的原因之一。最后,浏览器绘制每个节点并将页面显示给用户。总结本文系统地描述了从浏览器输入域名到最终页面显示的整个过程。篇幅有限,本文每一步其实并不全面,所以我将单独开篇介绍域名解析、HTTP请求/响应、浏览器分析、渲染等内容,感兴趣的朋友也可以关注我的个人博客。更多技术分享请关注“程序员专区”参考:http://igoro.com/archive/what...http://taligarsiel.com/Projec...https://www.zhihu.com/问题...Imagemaker:Axure,PS,UleadGIFAnimator,ProcessOn