精华内容
下载资源
问答
  • 从输入URL到浏览器显示页面发生了什么

    万次阅读 多人点赞 2017-08-13 23:51:35
    当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染。 一、网络通信  互联网内各网络设备间的通信都遵循TCP/IP协议,利用...

    当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染。

    一、网络通信

        互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信。分层由高到低分别为:应用层、传输层、网络层、数据链路层。发送端从应用层往下走,接收端从数据链路层网上走。如图所示:

    TCPIP

    1. 在浏览器中输入url

        用户输入url,例如http://www.baidu.com。其中http为协议,www.baidu.com为网络地址,及指出需要的资源在那台计算机上。一般网络地址可以为域名或IP地址,此处为域名。使用域名是为了方便记忆,但是为了让计算机理解这个地址还需要把它解析为IP地址。

    2.应用层DNS解析域名

       客户端先检查本地是否有对应的IP地址,若找到则返回响应的IP地址。若没找到则请求上级DNS服务器,直至找到或到根节点。

    • DNS中递归查询和迭代查询的区别

    1、 递归查询: 一般客户机和服务器之间属递归查询,即当客户机向DNS服务器发出请求后,若DNS服务器本身不能解析,则会向另外的DNS服务器发出查询请求,得到结果后转交客户机。

    2、 迭代查询(反复查询): 一般DNS服务器之间属迭代查询,如:若DNS2不能响应DNS1的请求,则它会将DNS3的IP给DNS2,以便其再向DNS3发出请求。

    以一个DNS请求解析为例:

    1)用户发起域名请求到dnsA,这时dnsA有这个记录,将结果返回给用户,这个过程是递归查询。

    2)用户发起域名请求到dnsA,这时dns没有这个记录,它去向dnsB问有没有这个记录,以此类推,直到把结果返回给用户,这个过程是递归查询。

    3)用户发起域名请求到dnsA,这时dnsA没有这个记录,它告诉用户,我没有这个记录,你去问dnsB吧,这个过程是迭代查询。


    3.应用层客户端发送HTTP请求

    HTTP请求包括请求报头和请求主体两个部分,其中请求报头包含了至关重要的信息,包括请求的方法(GET / POST)、目标url、遵循的协议(http / https / ftp…),返回的信息是否需要缓存,以及客户端是否发送cookie等。

    4.传输层TCP传输报文

       位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输,将大块的数据分割成以报文段为单位的数据包进行管理,并为它们编号,方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠。

      “三次握手”的过程是,发送端先发送一个带有SYN(synchronize)标志的数据包给接收端,在一定的延迟时间内等待接收的回复。接收端收到数据包后,传回一个带有SYN/ACK标志的数据包以示传达确认信息。接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。在这个过程中,如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求,而再次发送,直到收到回复为止。

    TCP 

    5.网络层IP协议查询MAC地址

       IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址,也就是物理地址。IP地址和MAC地址是一一对应的关系,一个网络设备的IP地址可以更换,但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时,需要多次中转才能到达最终的目标,在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

    6.数据到达数据链路层

       在找到对方的MAC地址后,就将数据发送到数据链路层传输。这时,客户端发送请求的阶段结束

    7.服务器接收数据

       接收端的服务器在链路层接收到数据包,再层层向上直到应用层。这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。

    8.服务器响应请求

       服务接收到客户端发送的HTTP请求后,查找客户端请求的资源,并返回响应报文,响应报文中包括一个重要的信息——状态码。状态码由三位数字组成,其中比较常见的是200 OK表示请求成功。301表示永久重定向,即请求的资源已经永久转移到新的位置。在返回301状态码的同时,响应报文也会附带重定向的url,客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

    9. 服务器返回相应文件

       请求成功后,服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了。

    二、页面渲染

       现代浏览器渲染页面的过程是这样的:jiexiHTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

       DOM树是由HTML文件中的标签排列组成,渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素,像<head>元素或display属性值为none的元素都不在渲染树中。

       在浏览器还没接收到完整的HTML文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

    展开全文
  • 从输入URL到页面展示的详细过程

    万次阅读 多人点赞 2018-03-30 14:00:43
    其实从输入URL到页面展示在我们眼前所经历的过程其实还是非常复杂的,牵扯的知识点也是非常的庞杂。其中很多知识都会有专门的学科去研究,所以这里只是简单地概括一下大致流程:1、输入网址2、DNS解析3、建立tcp...

    其实从输入URL到页面展示在我们眼前所经历的过程其实还是非常复杂的,牵扯到的知识点也是非常的庞杂。其中很多知识都会有专门的学科去研究,所以这里只是简单地概括一下大致流程:

    • 1、输入网址
    • 2、DNS解析
    • 3、建立tcp连接
    • 4、客户端发送HTPP请求
    • 5、服务器处理请求 
    • 6、服务器响应请求
    • 7、浏览器展示HTML
    • 8、浏览器发送请求获取其他在HTML中的资源。

    下面是转载自https://www.cnblogs.com/xianyulaodi/p/6547807.html的一篇博文,讲解的感觉还不错。


    1、输入地址

        当我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示,让你可以补全url地址。对于 google的chrome 的浏览器,他甚至会直接从缓存中把网页展示出来,就是说,你还没有按下 enter,页面就出来了。

    2、浏览器查找域名的 IP 地址  

      1、请求一旦发起,浏览器首先要做的事情就是解析这个域名,一般来说,浏览器会首先查看本地硬盘的 hosts 文件,看看其中有没有和这个域名对应的规则,如果有的话就直接使用 hosts 文件里面的 ip 地址。

          2、如果在本地的 hosts 文件没有能够找到对应的 ip 地址,浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。

        3、查询你输入的网址的DNS请求到达本地DNS服务器之后,本地DNS服务器会首先查询它的缓存记录,如果缓存中有此条记录,就可以直接返回结果,此过程是递归的方式进行查询。如果没有,本地DNS服务器还要向DNS根服务器进行查询。

      4、根DNS服务器没有记录具体的域名和IP地址的对应关系,而是告诉本地DNS服务器,你可以到域服务器上去继续查询,并给出域服务器的地址。这种过程是迭代的过程。

      5、本地DNS服务器继续向域服务器发出请求,在这个例子中,请求的对象是.com域服务器。.com域服务器收到请求之后,也不会直接返回域名和IP地址的对应关系,而是告诉本地DNS服务器,你的域名的解析服务器的地址。

      6、最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问。

     

    下面这张图很完美的解释了这一过程:

    知识扩展:

    1)什么是DNS?

      DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析)。

      通俗的讲,我们更习惯于记住一个网站的名字,比如www.baidu.com,而不是记住它的ip地址,比如:167.23.10.2。而计算机更擅长记住网站的ip地址,而不是像www.baidu.com等链接。因为,DNS就相当于一个电话本,比如你要找www.baidu.com这个域名,那我翻一翻我的电话本,我就知道,哦,它的电话(ip)是167.23.10.2。

     

    2)DNS查询的两种方式:递归查询和迭代查询

    1、递归解析

        当局部DNS服务器自己不能回答客户机的DNS查询时,它就需要向其他DNS服务器进行查询。此时有两种方式,如图所示的是递归方式。局部DNS服务器自己负责向其他DNS服务器进行查询,一般是先向该域名的根域服务器查询,再由根域名服务器一级级向下查询。最后得到的查询结果返回给局部DNS服务器,再由局部DNS服务器返回给客户端。

    2、迭代解析

      当局部DNS服务器自己不能回答客户机的DNS查询时,也可以通过迭代查询的方式进行解析,如图所示。局部DNS服务器不是自己向其他DNS服务器进行查询,而是把能解析该域名的其他DNS服务器的IP地址返回给客户端DNS程序,客户端DNS程序再继续向这些DNS服务器进行查询,直到得到查询结果为止。也就是说,迭代解析只是帮你找到相关的服务器而已,而不会帮你去查。比如说:baidu.com的服务器ip地址在192.168.4.5这里,你自己去查吧,本人比较忙,只能帮你到这里了。

     

    3)DNS域名称空间的组织方式

     我们在前面有说到根DNS服务器,域DNS服务器,这些都是DNS域名称空间的组织方式。按其功能命名空间中用来描述 DNS 域名称的五个类别的介绍详见下表中,以及与每个名称类型的示例

    (盗图)

     

    4)DNS负载均衡

      当一个网站有足够多的用户的时候,假如每次请求的资源都位于同一台机器上面,那么这台机器随时可能会蹦掉。处理办法就是用DNS负载均衡技术,它的原理是在DNS服务器中为同一个主机名配置多个IP地址,在应答DNS查询时,DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的。例如可以根据每台机器的负载量,该机器离用户地理位置的距离等等。

    3、浏览器向 web 服务器发送一个 HTTP 请求

      拿到域名对应的IP地址之后,浏览器会以一个随机端口(1024<端口<65535)向服务器的WEB程序(常用的有httpd,nginx等)80端口发起TCP的连接请求这个连接请求到达服务器端后(这中间通过各种路由设备,局域网内除外),进入到网卡,然后是进入到内核的TCP/IP协议栈(用于识别该连接请求,解封包,一层一层的剥开),还有可能要经过Netfilter防火墙(属于内核的模块)的过滤,最终到达WEB程序,最终建立了TCP/IP的连接。

    TCP连接如图所示:

      建立了TCP连接之后,发起一个http请求。一个典型的 http request header 一般需要包括请求的方法,例如 GET 或者 POST 等,不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法,一般的浏览器只能发起 GET 或者 POST 请求。

      客户端向服务器发起http请求的时候,会有一些请求信息,请求信息包含三个部分:

      | 请求方法URI协议/版本

          | 请求头(Request Header)

      | 请求正文:

    下面是一个完整的HTTP请求例子:

    复制代码
    GET/sample.jspHTTP/1.1
    Accept:image/gif.image/jpeg,*/*
    Accept-Language:zh-cn
    Connection:Keep-Alive
    Host:localhost
    User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
    Accept-Encoding:gzip,deflate
    username=jinqiao&password=1234
    复制代码

     注意:最后一个请求头之后是一个空行,发送回车符和换行符,通知服务器以下不再有请求头。

    (1)请求的第一行是“方法URL议/版本”:GET/sample.jsp HTTP/1.1
    (2)请求头(Request Header)
       请求头包含许多有关的客户端环境和请求正文的有用信息。例如,请求头可以声明浏览器所用的语言,请求正文的长度等。

    Accept:image/gif.image/jpeg.*/*
    Accept-Language:zh-cn
    Connection:Keep-Alive
    Host:localhost
    User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
    Accept-Encoding:gzip,deflate.

    (3)请求正文
        请求头和请求正文之间是一个空行,这个行非常重要,它表示请求头已经结束,接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息:

    username=jinqiao&password=1234

     

    知识扩展:

    1)TCP三次握手

    第一次握手:客户端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之间可以开始传输数据了。

    如图所示:

     

     

    2)为什需要三次握手?

      《计算机网络》第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”

       书中的例子是这样的,“已失效的连接请求报文段”的产生在这样一种情况下:client发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后,就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段,同意建立连接。

      假设不采用“三次握手”,那么只要server发出确认,新的连接就建立了。由于现在client并没有发出建立连接的请求,因此不会理睬server的确认,也不会向server发送数据。但server却以为新的运输连接已经建立,并一直等待client发来数据。这样,server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况,client不会向server的确认发出确认。server由于收不到确认,就知道client并没有要求建立连接。”。主要目的防止server端一直等待,浪费资源。

     

    3)TCP四次挥手

    第一次挥手:Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态。
    第二次挥手:Server收到FIN后,发送一个ACK给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态。
    第三次挥手:Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态。
    第四次挥手:Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手。

     

    4)为什么建立连接是三次握手,而关闭连接却是四次挥手呢?

      这是因为服务端在LISTEN状态下,收到建立连接请求的SYN报文后,把ACK和SYN放在一个报文里发送给客户端。而关闭连接时,当收到对方的FIN报文时,仅仅表示对方不再发送数据了但是还能接收数据,己方也未必全部数据都发送给对方了,所以己方可以立即close,也可以发送一些数据给对方后,再发送FIN报文给对方来表示同意现在关闭连接,因此,己方ACK和FIN一般都会分开发送。

    4、服务器的永久重定向响应

       服务器给浏览器响应一个301永久重定向响应,这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。

      为什么服务器一定要重定向而不是直接发送用户想看的网页内容呢?其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址,就像http://www.yy.com/和http://yy.com/,搜索引擎会认为它们是两个网站,结果造成每个搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思,这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有就是用不同的地址会造成缓存友好性变差,当一个页面有好几个名字时,它可能会在缓存里出现好几次。

    扩展知识

    1)301和302的区别。

      301和302状态码都表示重定向,就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址,这个地址可以从响应的Location首部中获取(用户看到的效果就是他输入的地址A瞬间变成了另一个地址B)——这是它们的共同点。

      他们的不同在于。301表示旧地址A的资源已经被永久地移除了(这个资源不可访问了),搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址

      302表示旧地址A的资源还在(仍然可以访问),这个重定向只是临时地从旧地址A跳转到地址B,搜索引擎会抓取新的内容而保存旧的网址。 SEO302好于301

     

    2)重定向原因:

    (1)网站调整(如改变网页目录结构);
    (2)网页被移到一个新地址;
    (3)网页扩展名改变(如应用需要把.php改成.Html或.shtml)。
            这种情况下,如果不做重定向,则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息,访问流量白白丧失;再者某些注册了多个域名的网站,也需要通过重定向让访问这些域名的用户自动跳转到主站点等。
     

    3)什么时候进行301或者302跳转呢?

            当一个网站或者网页24—48小时内临时移动到一个新的位置,这时候就要进行302跳转,而使用301跳转的场景就是之前的网站因为某种原因需要移除掉,然后要到新的地址访问,是永久性的。
    清晰明确而言:使用301跳转的大概场景如下:
    1、域名到期不想续费(或者发现了更适合网站的域名),想换个域名。
    2、在搜索引擎的搜索结果中出现了不带www的域名,而带www的域名却没有收录,这个时候可以用301重定向来告诉搜索引擎我们目标的域名是哪一个。
    3、空间服务器不稳定,换空间的时候。

    5、浏览器跟踪重定向地址

       现在浏览器知道了 "http://www.google.com/"才是要访问的正确地址,所以它会发送另一个http请求。这里没有啥好说的

     

    6、服务器处理请求

      经过前面的重重步骤,我们终于将我们的http请求发送到了服务器这里,其实前面的重定向已经是到达服务器了,那么,服务器是如何处理我们的请求的呢?

      后端从在固定的端口接收到TCP报文开始,它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。

      一些大一点的网站会将你的请求到反向代理服务器中,因为当网站访问量非常大,网站越来越慢,一台服务器已经不够用了。于是将同一个应用部署在多台服务器上,将大量用户的请求分配给多台机器处理。此时,客户端不是直接通过HTTP协议访问某网站应用服务器,而是先请求到Nginx,Nginx再请求应用服务器,然后将结果返回给客户端,这里Nginx的作用是反向代理服务器。同时也带来了一个好处,其中一台服务器万一挂了,只要还有其他服务器正常运行,就不会影响用户使用。

    如图所示:

    通过Nginx的反向代理,我们到达了web服务器,服务端脚本处理我们的请求,访问我们的数据库,获取需要获取的内容等等,当然,这个过程涉及很多后端脚本的复杂操作。由于对这一块不熟,所以这一块只能介绍这么多了。

     

    扩展阅读:

    1)什么是反向代理?

    客户端本来可以直接通过HTTP协议访问某网站应用服务器,网站管理员可以在中间加上一个Nginx,客户端请求Nginx,Nginx请求应用服务器,然后将结果返回给客户端,此时Nginx就是反向代理服务器。

     

    7、服务器返回一个 HTTP 响应 

      经过前面的6个步骤,服务器收到了我们的请求,也处理我们的请求,到这一步,它会把它的处理结果返回,也就是返回一个HTPP响应。

    HTTP响应与HTTP请求相似,HTTP响应也由3个部分构成,分别是:

    l  状态行

    l  响应头(Response Header)

    l  响应正文

    复制代码
    HTTP/1.1 200 OK
    Date: Sat, 31 Dec 2005 23:59:59 GMT
    Content-Type: text/html;charset=ISO-8859-1
    Content-Length: 122
    
    <html>
    <head>
    <title>http</title>
    </head>
    <body>
    <!-- body goes here -->
    </body>
    </html>
    复制代码

    状态行:

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

    格式:    HTTP-Version Status-Code Reason-Phrase CRLF

    例如:    HTTP/1.1 200 OK \r\n

    -- 协议版本:是用http1.0还是其他版本

    -- 状态描述:状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok

    -- 状态代码:状态代码由三位数字组成,第一个数字定义了响应的类别,且有五种可能取值。如下

     

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

        100 Continue

        101 Switching Protocols

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

        200 OK 表示客户端请求成功

        204 No Content 成功,但不返回任何实体的主体部分

        206 Partial Content 成功执行了一个范围(Range)请求

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

        301 Moved Permanently 永久性重定向,响应报文的Location首部应该有该资源的新URL

        302 Found 临时性重定向,响应报文的Location首部给出的URL用来临时定位资源

        303 See Other 请求的资源存在着另一个URI,客户端应使用GET方法定向获取请求的资源

        304 Not Modified 服务器内容没有更新,可以直接读取浏览器缓存

         307 Temporary Redirect 临时重定向。与302 Found含义一样。302禁止POST变换为GET,但实际使用时并不一定,307则更多浏览器可能会遵循这一标准,但也依赖于浏览器具体实现

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

           400 Bad Request 表示客户端请求有语法错误,不能被服务器所理解

           401 Unauthonzed 表示请求未经授权,该状态代码必须与 WWW-Authenticate 报头域一起使用

           403 Forbidden 表示服务器收到请求,但是拒绝提供服务,通常会在响应正文中给出不提供服务的原因

           404 Not Found 请求的资源不存在,例如,输入了错误的URL

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

            500 Internel Server Error 表示服务器发生不可预期的错误,导致无法完成客户端的请求

            503 Service Unavailable 表示服务器当前不能够处理客户端的请求,在一段时间之后,服务器可能会恢复正常

     

    响应头:

      响应头部:由关键字/值对组成,每行一对,关键字和值用英文冒号":"分隔,典型的响应头有:

     

    响应正文

    包含着我们需要的一些具体信息,比如cookie,html,image,后端返回的请求数据等等。这里需要注意,响应正文和响应头之间有一行空格,表示响应头的信息到空格为止,下图是fiddler抓到的请求正文,红色框中的:响应正文:

     

    8、浏览器显示 HTML

      在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了,浏览器是如何把页面呈现在屏幕上的呢?不同浏览器可能解析的过程不太一样,这里我们只介绍webkit的渲染过程,下图对应的就是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)。

      JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务,异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚本运行时先依次运行执行栈,然后会从任务队列里提取事件,运行任务队列中的任务,这个过程是不断重复的,所以又叫做事件循环(Event loop)。具体的过程可以看我这篇文章:点击这里

     

    9、浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)

      其实这个步骤可以并列在步骤8中,在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片,CSS,JS文件等,类似于下面的链接:

    图片:http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif

    CSS式样表:http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css

    JavaScript 文件:http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

      这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名,发送请求,重定向等等...

    不像动态页面,静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯,而从缓存中直接读取,或者可以放到CDN中

    展开全文
  • 这应该算是一个很经典的面试题了,前端工程师,后端工程师,包括网络工程师都有可能被问。开放度很高,每个人都可以针对自己熟悉的部分,进行深入的讲解。 总体来说,分为如下几个部分 1.DNS解析 2.建立TCP连接,...

    请添加图片描述

    前言

    这应该算是一个很经典的面试题了,前端工程师,后端工程师,包括网络工程师都有可能被问到。开放度很高,每个人都可以针对自己熟悉的部分,进行深入的讲解。

    总体来说,分为如下几个部分

    1.DNS解析
    2.建立TCP连接,发送HTTP请求
    3.服务端处理请求并返回HTTP响应
    4.浏览器解析渲染页面
    5.关闭连接

    DNS解析

    DNS解析就是获取服务器IP地址的过程。互联网上每一台计算机的唯一标识是它的IP地址,但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机,例如www.baidu.com,www.taobao.com。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡,这个权衡就是一个网址到IP地址的转换,这个过程就是DNS解析。它实际上充当了一个翻译的角色,实现了网址到IP地址的转换。网址到IP地址转换的过程是如何进行的?

    DNS的解析方式有两种

    1.递归解析
    当局部DNS服务器自己不能回答客户机的DNS查询时,它就需要向其他DNS服务器进行查询。此时有两种方式,如图所示的是递归方式。局部DNS服务器自己负责向其他DNS服务器进行查询,一般是先向该域名的根域服务器查询,再由根域名服务器一级级向下查询。最后得到的查询结果返回给局部DNS服务器,再由局部DNS服务器返回给客户端。
    在这里插入图片描述

    2.迭代解析
    当局部DNS服务器自己不能回答客户机的DNS查询时,也可以通过迭代查询的方式进行解析,如图所示。局部DNS服务器不是自己向其他DNS服务器进行查询,而是把能解析该域名的其他DNS服务器的IP地址返回给客户端DNS程序,客户端DNS程序再继续向这些DNS服务器进行查询,直到得到查询结果为止。也就是说,迭代解析只是帮你找到相关的服务器而已,而不会帮你去查。

    在这里插入图片描述

    再放一个详细的流程图
    在这里插入图片描述
    为了提高查找的效率,DNS服务器会进行缓存。具体的缓存策略如下:
    在这里插入图片描述

    1.浏览器缓存

    浏览器会先检查是否在缓存中,没有则调用系统库函数进行查询。

    2 操作系统缓存

    操作系统也有自己的 DNS缓存,但在这之前,会向检查域名是否存在本地的 Hosts 文件里,没有则向 DNS 服务器发送查询请求。
    Linux在/etc/hosts文件中
    windows在C:\Windows\System32\drivers\etc\hosts文件中

    3.路由器缓存

    路由器也有自己的缓存。

    4.ISP DNS 缓存

    ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器,它们在大多数情况下都会有缓存。

    建立TCP连接

    http协议是基于tcp/ip协议的,整个数据的发送和接收流程如下
    在这里插入图片描述
    TCP/IP的建议需要经历三次握手
    在这里插入图片描述
    TCP的三次握手还是经常被问到的,这里概述一下

    第一次握手:客户端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之间可以开始传输数据了。

    如图所示:
    在这里插入图片描述

    服务端处理请求并返回HTTP响应

    服务端拿到Http请求处理后,再返回HttP响应,这里主要涉及到一部分Http的常见知识点,如各种状态码,各种Header的含义。把常见的状态码,常见的Header了解一下就行了。Http相关的知识前面的文章已经介绍过了,就不重复介绍了。

    浏览器解析渲染页面

    这部分内容偏前端一点。大家可以参考相关博问,后端几乎很少问。

    关闭连接

    这里要注意的一点是一个TCP连接是可以发送多个Http请求的,不是发送一次Http请求TCP连接就断了。默认情况下建立 TCP 连接不会断开,只有在请求报头中声明 Connection: close 才会在请求完成后关闭连接。这里又涉及到TCP四次挥手

    在这里插入图片描述

    第一次挥手:Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态。

    第二次挥手:Server收到FIN后,发送一个ACK给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态。
    第三次挥手:Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态。

    第四次挥手:Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手。

    参考博客

    [1]https://4ark.me/post/b6c7c0a2.html
    [2]https://segmentfault.com/a/1190000006879700
    [3]https://www.cnblogs.com/xianyulaodi/p/6547807.html
    [4]https://www.itcodemonkey.com/article/3263.html

    展开全文
  • 1.输入网址 2.浏览器查找域名ip地址 3.建立tcp协议 4.浏览器向web服务器发起http请求 5.服务器端处理 6.关闭tcp链接 7.浏览器解析资源 8.浏览器布局渲染

    1.输入网址
    2.浏览器查找域名ip地址
    3.建立tcp协议
    4.浏览器向web服务器发起http请求
    5.服务器端处理
    6.关闭tcp链接
    7.浏览器解析资源
    8.浏览器布局渲染

    展开全文
  • 1、浏览器地址栏输入url 2、浏览器会先查看浏览器缓存 - - 系统缓存 - - 路由缓存,如有存在缓存,就直接显示。如果没有,接着第三步 3、域名解析(DNS)获取相应的ip 4、浏览器向服务器发起tcp连接,与...
  • 1、浏览器通过DNS域名解析ip地址 2、浏览器通过TCP协议建立服务器的TCP连接(TCP三次握手)  TCP三次握手:  1)客户端发送请求连接、请求报文  2)服务端接受连接后回复ACK报文,并为此次连接分配资源 ...
  • 1、首先,在浏览器地址栏中输入url 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳第三步操作。 3、在发送http请求前,需要域名解析(DNS解析),...
  • 文章目录基本背景知识介绍最新的 Chrome 进程架构完整的 TCP 连接过程完整的HTTP 请求流程完整的渲染流水线从输入 URL 到页面展示完整流程结语 注:本篇博客的内容来源自极客时间李兵老师的“浏览器工作原理与实践”...
  • 面试题: URL 在浏览器被输入到页面展现的过程中发生了什么? 延伸: 现代浏览器在与服务器建立了一个 TCP 连接后是否会在一个 HTTP 请求完成后断开?什么情况下会断开? 一个 TCP 连接可以对应几个 HTTP 请求...
  • 从输入URL到页面展示到底发生了什么

    千次阅读 多人点赞 2018-08-07 11:00:51
    刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜一大堆的资料。而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步...
  • 1、浏览器的地址栏输入URL并按下回车。  2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。  3、DNS解析URL对应的IP。  4、根据IP建立TCP连接(三次握手)。  5、HTTP发起请求。  6、服务器处理...
  • 我们现在上网过程中,常常会在浏览器中输入各种各样的URL或者网址,然后浏览器就会渲染出对应的网页。这里到底是怎么实现的呢,中间包含的过程又有哪些呢。让我们来一一分析。 首先,我们可以大致分为以下几步。 1...
  • 当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染。 一、网络通信  互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP...
  • 当我们在浏览器的地址栏上输入一个url地址,按下enter后,浏览器会显示出来相应的页面,在这个过程中发生了什么呢?   ▍大致流程 1、DNS解析,将域名解析为IP地址; 2、浏览器与服务器建立TCP连接(三次握手)...
  • 从输入URL到页面加载完成的过程(全程梳理)

    千次阅读 多人点赞 2018-10-29 16:04:36
     输入URL后,就会进行解析(URL的本质就是统一资源定位符)  URL一般包括几大部分: protocol,协议头,譬如有http,ftp等 host ,主机域名或IP地址 port ,端口号 path ,目录路径 query ,即...
  • URL 输入到页面展现到底发生什么?   前言 一、URL 到底是啥 二、域名解析(DNS) 1. IP 地址 2. 什么是域名解析 3. 浏览器如何通过域名去查询 URL 对应的 IP 呢 4. 小结 三、TCP 三次...
  • 首先,当输入url,浏览器会先本地硬盘的host文件,找域名对应的IP,如果有的话直接就会使用host文件中的IP, 如果没有的话,就会继续向上寻找。找到本地DNS服务器一般由网络接入服务器商提供(中国电信,中国移动...
  • 1、浏览器地址栏输入url 2、浏览器会先查看浏览器缓存--系统缓存--路由缓存,如有存在缓存,就直接显示。如果没有,接着第三步 3、域名解析(DNS)获取相应的ip 4、浏览器向服务器发起tcp连接,与浏览器建立tcp三...
  • 1、在浏览器地址栏输入URL 2、浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转转码步骤  ①如果资源未缓存,发起新请求  ②如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器...
  • 输入一个url到浏览器页面展示都经历了哪些过程

    万次阅读 多人点赞 2018-07-19 15:12:12
    在日常的浏览器访问过程中,我们肯定会访问n多页面,但是我们输入一个网址后是如何变成一个页面展示在我们目前,一个url到页面的展示这个过程中,我们的浏览器都经历了一些什么? 步骤 → 1- 输入网址 → 2-...
  • 地址栏输入URL到显示页面都发生了什么?这是一道面试经常会考的面试题。那么下面我们就来探讨一下输入URL响应,都经历了哪些过程。 1、DNS解析 我们在用户PC中使用网页浏览器来访问外部服务器的内容,在...
  •  浏览器的主要功能是将用户选择的web资源呈现出来,它服务器请求资源,并将得到的资源(HTML,PDF,image等等)显示... 输入URL,浏览器根据域名寻找IP地址  2. 浏览器发送一个HTTP请求给服务器,如果服务器...
  • 最近在进行前端面试方面的一些准备,看了网上许多相关的文章,发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么。仔细思考这个问题,发现确实很深,这个过程涉及...
  • 1、首先,在浏览器地址栏中输入url 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳第三步操作。 3、在发送http请求前,需要域名解析(DNS解析),解析...
  • 浏览器中输入URL到页面返回的全过程

    千次阅读 多人点赞 2018-03-01 19:25:46
    在java软件开发的面试中,浏览器中输入URL到页面返回的全过程是一道非常经典的面试题。下面就给大家详细讲解一下。 总共分为7个步骤:浏览器中输入域名+域名解析+浏览器与目标服务器建立TCP连接+浏览器通过http协议...
  • 我们平常在地址栏里输入一些网址时,页面很快就会出现,但在这之中到底发生了什么事情呢? 大概是这样的流程: 在浏览器的地址栏中敲入了url 域名解析 服务器处理请求 浏览器处理 绘制网页 一、在浏览器的地址栏中敲...
  • 输入url到页面返回的全过程

    千次阅读 2015-07-07 14:50:18
    在比较全面的学习了计算机网络之后,我们可以来谈一谈生活中经常遇到的一个比较经典的问题,就是描述一下从输入url到页面返回的全过程。 1. 我们输入一个域名:www.baidu.com,然后点击确认; 2. 浏览器查找域名...
  • 比如输入url后,你看到了百度的首页,那么这一切是如何发生的呢? 这个问题之前、最近、我想以后肯定还会被问,或者问这样的题目,如果在百度框里输入查询的字符串开始,是怎么返回你需要的东西呢。 那这什么...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 322,768
精华内容 129,107
关键字:

从输入url到页面显示