计算机教程

当前位置:澳门娱乐场网址 > 计算机教程 > 【澳门娱乐场网址】从输入URI到浏览器渲染中间

【澳门娱乐场网址】从输入URI到浏览器渲染中间

来源:http://www.ablakeforum.com 作者:澳门娱乐场网址 时间:2019-05-04 00:29

   这篇文章总共分为两个部分,第一部分我会把从输入url到浏览器渲染的整个流程给大致说一下。第二部分我就会一一介绍各个部分的详细作用。

从输入URI到浏览器渲染中间都经历了什么,uri浏览器渲染经历

   这篇文章总共分为两个部分,第一部分我会把从输入url到浏览器渲染的整个流程给大致说一下。第二部分我就会一一介绍各个部分的详细作用。

  一、从输入url到浏览器渲染的整个流程

   1.DNS域名解析

  2.建立TCP/IP链接

  3.WebServer(nginx,tomcat等)

  4.服务器返回一个HTTP请求

  5.浏览器显示HTML

二、各个模块的具体作用

  一、DNS域名解析

     DNS域名解析查询的方法有两种,一种是递归解析,一种是迭代解析。

    递归解析:局部DNS服务器自己负责向其他的DNS服务器进行查询,先从该域名的根服务器进行查询,如果查询不到就会一级级向下查询,最后查询的结果由DNS服务器返回给客户端。

    迭代解析:当局部服务器不能回答客户机的DNS查询时,就会通过迭代解析来进行查询。局部DNS服务器不是自己向其他DNS服务器进行查询,而是把能解析该域名的其他DNS服务器的IP返回给客户端的DNS程序,客户端DNS程序再继续向这些DNS服务器进行查询,直到得到查询结果为止。

  二、建立TCP/IP链接

    当拿到域名对应的IP时,浏览器就会尝试与服务器建立TCP/IP链接。

    TCP/IP的三次握手:

      第一次握手:客户端A将标志位SYN置为1,随机产生一个值为seq=J(J的取值范围为=1234567)的数据包到服务器,客户端A进入SYN_SENT状态,等待服务端B确认;

         第二次握手:服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接,服务端B将标志位SYN和ACK都置为1,ack=J 1,随机产生一个值seq=K,并将该数据包发送给客户端A以确认连接请求,服务端B进入SYN_RCVD状态。

         第三次握手:客户端A收到确认后,检查ack是否为J 1,ACK是否为1,如果正确则将标志位ACK置为1,ack=K 1,并将该数据包发送给服务端B,服务端B检查ack是否为K 1,ACK是否为1,如果正确则连接建立成功,客户端A和服务端B进入ESTABLISHED状态,完成三次握手,随后客户端A与服务端B之间可以开始传输数据了。

  三、 WebServer(nginx,tomcat等)

    现在很多网站都会用到反向代理,原因就是当用户访问量达到一定程度时一台服务器已经远远不够了,这时候就需要把同一应用部署到多台服务器上,一道道负载均衡的效用。此时客户端不是通过HTTP协议访问具体的服务器,而是先访问到Nginx/tomcat上,再由他们来请求服务器,然后将结果返回。

  四、服务器返回一个HTTP请求

    HTTP响应由3个部分构成,分别是:状态行,响应头(Response Header),响应正文。

    状态行:状态行由协议版本、数字形式的状态代码、及相应的状态描述,各元素之间以空格分隔。

    1xx:信息性状态码,表示服务器已接收了客户端请求,客户端可继续发送请求。

      2xx:成功状态码,表示服务器已成功接收到请求并进行处理。

      3xx:重定向状态码,表示服务器要求客户端重定向。

      4xx:客户端错误状态码,表示客户端的请求有非法内容。

      5xx:服务器错误状态码,表示服务器未能正常处理客户端的请求而出现意外错误。

  五、浏览器显示HTML

     因为不同浏览器解析的过程不太一样,下面我们就以webkit为例。

    解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树。

    浏览器在解析html文件时,会”自上而下“加载,并在加载过程中进行解析渲染。在解析过程中,如果遇到请求外部资源时,如图片、外链的CSS、iconfont等,请求过程是异步的,并不会影响html文档进行加载。

    解析过程中,浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。

    DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为relow;当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repain。

    页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

    当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。因为JS有可能会修改DOM,最为经典的document.write,这意味着,在JS执行完成前,后续所有资源的下载可能是没有必要的,这是js阻塞后续资源下载的根本原因。所以我明平时的代码中,js是放在html文档末尾的。

    JS的解析是由浏览器中的JS解析引擎完成的,比如谷歌的是V8。JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始。但是又存在某些任务比较耗时,如IO读写等,所以需要一种机制可以先执行排在后面的任务,这就是:同步任务(synchronous)和异步任务(asynchronous)。

      

 

 

http://www.bkjia.com/HTML5/1316111.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1316111.htmlTechArticle从输入URI到浏览器渲染中间都经历了什么,uri浏览器渲染经历 这篇文章总共分为两个部分,第一部分我会把从输入url到浏览器渲染的整个流...

  一、从输入url到浏览器渲染的整个流程

   1.DNS域名解析

  2.建立TCP/IP链接

  3.WebServer(nginx,tomcat等)

  4.服务器返回一个HTTP请求

  5.浏览器显示HTML

二、各个模块的具体作用

  一、DNS域名解析

     DNS域名解析查询的方法有两种,一种是递归解析,一种是迭代解析。

    递归解析:局部DNS服务器自己负责向其他的DNS服务器进行查询,先从该域名的根服务器进行查询,如果查询不到就会一级级向下查询,最后查询的结果由DNS服务器返回给客户端。

    迭代解析:当局部服务器不能回答客户机的DNS查询时,就会通过迭代解析来进行查询。局部DNS服务器不是自己向其他DNS服务器进行查询,而是把能解析该域名的其他DNS服务器的IP返回给客户端的DNS程序,客户端DNS程序再继续向这些DNS服务器进行查询,直到得到查询结果为止。

  二、建立TCP/IP链接

澳门娱乐场网址,    当拿到域名对应的IP时,浏览器就会尝试与服务器建立TCP/IP链接。

    TCP/IP的三次握手:

      第一次握手:客户端A将标志位SYN置为1,随机产生一个值为seq=J(J的取值范围为=1234567)的数据包到服务器,客户端A进入SYN_SENT状态,等待服务端B确认;

         第二次握手:服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接,服务端B将标志位SYN和ACK都置为1,ack=J 1,随机产生一个值seq=K,并将该数据包发送给客户端A以确认连接请求,服务端B进入SYN_RCVD状态。

         第三次握手:客户端A收到确认后,检查ack是否为J 1,ACK是否为1,如果正确则将标志位ACK置为1,ack=K 1,并将该数据包发送给服务端B,服务端B检查ack是否为K 1,ACK是否为1,如果正确则连接建立成功,客户端A和服务端B进入ESTABLISHED状态,完成三次握手,随后客户端A与服务端B之间可以开始传输数据了。

  三、 WebServer(nginx,tomcat等)

    现在很多网站都会用到反向代理,原因就是当用户访问量达到一定程度时一台服务器已经远远不够了,这时候就需要把同一应用部署到多台服务器上,一道道负载均衡的效用。此时客户端不是通过HTTP协议访问具体的服务器,而是先访问到Nginx/tomcat上,再由他们来请求服务器,然后将结果返回。

本文由澳门娱乐场网址发布于计算机教程,转载请注明出处:【澳门娱乐场网址】从输入URI到浏览器渲染中间

关键词:

上一篇:使用html css js实现弹球游戏

下一篇:没有了