精华内容
下载资源
问答
  • 浏览器输入url

    千次阅读 2020-04-28 09:33:56
    浏览器输入url 一、流程 流程无非如此:输入网址敲回车->查 DNS->找到 IP 地址->通过 TCP 三次握手建立连接->浏览器发送 Http 请求->收到回应->浏览器渲染页面->结束连接 长连接 短连接 二、...

    浏览器输入url

    一、流程

    • 流程无非如此:输入网址敲回车->查 DNS->找到 IP 地址->通过 TCP 三次握手建立连接->浏览器发送 Http 请求->收到回应->浏览器渲染页面->结束连接
    • 长连接 短连接

    二、dns

    • 域名空间采取树的结构, 全球 13 组根域名服务器以英文字母 A 到 M 依序命名。在域名中 com. org. cn. 这些是顶级域名,结尾的.号可以省略,URL 再往前是二级域名、三级域名。
      在这里插入图片描述

    • 查询域名,第一步是检查浏览器的本地缓存,

    • 之后是检查本机的缓存,在 Windows 中为C:\Windows\System32\drivers\etc\hosts,
      在 Linux 中是 /etc/hosts。

    • 若没找到,接下来是本地 DNS 服务器缓存,也就是 LDNS,使用递归查找。本地 DNS 服务器若没找到,

    • 则去请求根域名服务器,从树的顶点迭代向下查,找到顶级域名服务器地址,继续查找,直到找到。

    三、nslookup命令

    nslookup
    Nslookup -q=mx soho.com
    Nslookup -q=ns soho.com
    Nslookup soho.com
    

    在这里插入图片描述

    四、三次握手

    tcp需要三次握手:确保客户端服务器都有接受发送数据的能力。

    展开全文
  • 信不信我用2分钟让你明白,浏览器输入url后的事

    千次阅读 多人点赞 2020-08-24 17:46:43
    本文用有趣生动的语言,讲述一下浏览器输入url后发生了什么,计算机小白也能看懂。 浏览器输入url后一,DNS解析二,建立TCP连接(三次握手)三,发送http请求四,服务器处理请求五,返回响应结果六,关闭TCP连接(四...

    导语:
    本文用有趣生动的语言,讲述一下浏览器输入url后发生了什么,计算机小白也能看懂。

    一,DNS解析

    例如我们输入了www.baidu.com,一共有六个过程。但是说白了就是把它变成类似于172.12.342.222这样的IP地址,浏览器就能去找他了。

    不过我们还是讲一讲这六个过程是什么吧!

    在这里插入图片描述
    就这样一个圈回来就拿到ip地址去访问了。easy

    二,建立TCP连接(三次握手)

    简单的讲就是,一个人(用户浏览器)走到银行柜台,说你叫个人来给我办理业务,一个营业员(服务器)出来了。

    那个客户说,我要办理业务(发送一个SYN),营业员说我收到了你的请求(回复一个SYN+ACK),客户说我也收到了你想为我服务的回答(回复一个ACK),然后就开始服务了。一共三次握手。

    那么问题来了,为什么不是两次,四次五次呢?

    你要想,如果营业员说好的我来为你服务,但是客户没听到,客户就会不耐烦,再说一次我要办理业务,于是又一个营业员就出来了。以此往复,营业员们都在呆呆的站着,客户业务没能办理,等到营业员站的太多了,服务器不就宕机了?所以一定要三次握手,第三次的时候,没收到客户的回应就回去休息了。

    啊,是不是说的很简单形象。

    三,发送http请求

    这时候就是我们所熟知的api调用了,比如,https://www.baidu.com。就是调用了后台接口了,服务器就要开始运作起来,去准备数据返回。

    四,服务器处理请求

    服务器就受到请求后,就会返回数据,比如我的上一个接口,可能就要返回了一个HTML页面等等。

    五,返回响应结果

    服务器把它要返回的东西返回到浏览器上。

    六,关闭TCP连接(四次挥手)

    还是那对客户和营业员,这次它们已经开始办理业务了,现在已经办理好一个业务,客户说我办完我的业务了(发送一个FIN),营业员说好的(ACK),过了一会儿,营业员又说我也办理好了你的业务了,没事我就先走了(发送一个FIN),客户说好(ACK)。然后就进入TIME_WAIT状态(保留现场业务信息),等到2MSL时间过了,才能把这个柜台信息清理了(连接最终关闭,并且把业务信息都清理了)。

    这里双方都各发送了一个FIN和ACK,都得想对方表示想溜了,对方都同意了,它们才能都走了。

    七,浏览器渲染页面

    浏览器就把刚刚拿到的html页面给渲染出来了。至此url输入后,发生的事情都结束了。

    在这里插入图片描述

    建议收藏,不然刷着刷着就可能找不到了

    同时你的点赞是对我最大的鼓励,谢谢。

    展开全文
  • 输入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中

    展开全文
  • 输入URL后发生了什么?

    千次阅读 2018-08-22 10:44:10
    输入URL后发生了什么? 该问题可以理解为,①输入URL后,②浏览器向服务器发起了一个请求,传输了一些数据。③服务器接收到请求后,④作出了相应的处理,然后返回数据到浏览器。⑤浏览器再做相应的处理,最后将页面...

    输入URL后发生了什么?

    该问题可以理解为,①输入URL后,②浏览器向服务器发起了一个请求,传输了一些数据。③服务器接收到请求后,④作出了相应的处理,然后返回数据到浏览器。⑤浏览器再做相应的处理,最后将页面展现在我们面前。

    1. 浏览器如何接收到输入URL的信号
    首先,当我们在键盘上敲击某个键时,键盘内的处理器会先对键矩阵进行分析,然后将数据发送到计算机。有很多方式可以完成这一过程,比如USB键盘会通过USB缆线发送数据,无线键盘可以通过蓝牙发送数据。笔记本电脑通过内部的接口发送数据。

    无论何种方式,来自键盘的信号都会由计算机的键盘控制器(一种集成电路)进行处理,然后发送给操作系统。操作系统会分析,这些数据是否为系统命令,若不是,则将数据传给应用程序。

    应用程序会分析这些数据是否为命令,如果不是命令,则会将数据作为内容接受。比如在浏览器的地址栏中输入URL。若不接受这些数据,则将其忽略。

    到此,我们敲击键盘,输入URL,按下【Enter】,浏览器接收到URL,并且接收到用户按下了回车键,这一部分也就结束了。

    2. 浏览器如何向网卡发送数据
    在我们输入URL的过程中,浏览器可能会进行一些预处理。比如用户根据输入的字符判断想要输入的网站。当按下回车键后,浏览器会对URL进行检查,是否合法,如果不合法会将输入内容传给默认的搜索引擎。

    到此,浏览器开始正式解析URL了。在此之前,我们要先明白,什么是URL?

    URL简介
    URL(统一资源定位符 英文:Uniform / Universal Resource Locator),也就是我们所理解的网址。它有五个基本元素:

    传送协议
    服务器(通常为域名,由时为IP地址)
    端口号(比如“:80”)
    路径
    查询

    DNS(Domain Name System,域名系统)查询
    随后,浏览器会根据URL找到相应的IP地址,也就是DNS查询。其查询过程分几个步骤:

    查询浏览器缓存。不同的浏览器存储DNS记录的时间是不同的,一般在30秒到2分钟(要查看 Chrome 当中的缓存, 打开 chrome://net-internals/#dns)。
    查询系统缓存。若浏览器缓存中没找到,浏览器则会做系统调用(windows里是gethostbyname)进行查询。它会查询本地Host文件,Host的位置因系统而异。
    若Host文件也没有,则向DNS服务器发出查询请求,DNS服务器一般为路由器或 ISP 的缓存 DNS 服务器。
    ISP的缓存DNS服务器进行递归查询,从根域名服务器查到顶级域名服务器再查到权限域名服务器。最后得到目标域名的IP地址。
    到此已经获得了目标域名的IP地址。接下来就是通过 Socket 发送数据

    通过 Socket 发送数据
    通过Socket API发送数据,可以选择TCP或UDP协议,一般来说,HTTP常用的是TCP。TCP和UDP的区别在于:

    UDP(User Data Protocol,用户数据报协议)是面向非连接的协议,它不与对方建立连接,直接将数据包发送过去。一般适用于只传送少量数据,对可靠性要求不高的情况下。
    TCP(Transmission Control Protocol,传输控制协议)是基于连接的协议。采用了“三次握手(three-way handshaking)”策略。适用于数据量大,对可靠性要求高的情况。

    三次握手
    三次握手是为了确保数据准确无误的送达到目的地而采用的策略。发送端首先发送一个带SYN标志的数据包给对方,接收端收到后,回传一个带有SYN/ACK的标志的数据包以示传达确认信息。最后,发送端再回传一个带ACK标志的数据包,代表“握手”结束。若在握手中某个阶段莫名中断,TCP协议会再次以相同的顺序发送相同的数据包

    浏览器再得到URL后,调用Socket,使用TCP协议,HTTP请求会被封装,加入本地端口,目标端口等信息。IP地址是在IP协议中被封装的。但光有IP地址是不够的,因为设备是可以移动的,IP地址并不与设备绑定。所以还有一个MAC要被封装,每个网卡的MAC地址都是固定且唯一的。这一系列过程就关系到了“TCP/IP协议族”的一个重要的特点:分层。

    TCP/IP的分层管理
    TCP/IP协议族包含了很多协议,按层次分有四层:应用层、传输层、网络层、数据链路层。

    应用层:包含了各种通用的应用服务,比如 FTP(File Transfer Protocol,文件传输协议)、DNS、HTTP等。
    传输层:提供网络中两台计算机之间的数据传输,比如TCP、UDP。
    网络层:处理在网络上流动的数据包,该层规定了传输路线,数据包通过怎样的路径传送到对方的计算机中。比如 IP。
    数据链路层:连接网络的硬件部分,包括网卡,光纤等等硬件设备

    数据是如何从本机网卡发送到服务器的

    传输的方式一般有三种
    WIFI
    蜂窝数据网络
    以太网
    有些情况下,调制解调器将数字信号转换成模拟信号,另一个调制解调器再讲模拟信号转换成数字信号,传送送给下一个网络节点。有些情况下,数据就一直是数字信号,被传送给下一个网络节点。无论哪种传输的方式,数据最终会到达服务器的IDC内网,通过*交换机到达服务器的网卡*。

    服务器如何处理数据并返回数据
    事实上,在进入服务器之前,可能还会先经过负责负载均衡的机器,其目的为将请求合理地分配到多个服务器上,有很多实现方式,比如LVS,反向代理等。

    在经过了负载均衡后,请求真正地到了服务器的Web Server,比如 Apache,Node.JS等。就像之前所说的,请求从链路层到应用层,此时,服务器才算真正接收到了客户端发来的HTTP请求。

    HTTP报文分为三个部分

    报文首部
    空行(CR+LF)
    报文主体
    HTTP报文分为请求报文和响应报文

    Web Server首先会接收一个请求报文

    Web Server会阅读请求和他的一些参数和cookies,然后会有相应的操作,比如更新数据,储存数据于数据库中等等。然后,Web Server会生成一个HTTP响应。
    对于响应报文,其结构为

    与服务器交互的HTTP方法
    有四种最基本的方法:GET,POST,PUT,DELETE,对应着“查”,“改”,“增”,“删”四个操作。

    GET和POST的区别

    GET用于获取资源,POST用于修改资源,这是本质区别

    GET请求的数据在URL里,也就是请求行中。POST请求的数据在报文主体中。

    GET请求的数据明文出现,不安全。

    GET请求的数据会受URL长度的限制(不是HTTP对其的限制,多是浏览器的限制)。POST的数据理论上不受限制,但Web Server会对提交的数据大小进行限制。

    PUT和POST的区别
    POST是作用在一个集合资源上(/uri),PUT是作用在一个具体资源上(/uri/xxx)。即若能在客户端确定uri,就用PUT,若要在服务端确定,就用POST。

    GET是安全且幂等的,安全意味着不会修改资源,幂等意味着多次输入同一URL,得到的结果都是一样的。PUT,DELETE都是幂等的。POST既不安全,也不幂等。】

    状态码的类别
    状态码的作用是服务器返回响应时,描述响应的结果的数字和字符串。他由3位数字和原因短语组成。例如 200 OK。数字的第一位表明了响应的类别,五种:
    这里写图片描述

    5. 浏览器如何处理服务器的响应
    HTTP在传输数据时,可以直接按照原样传,也可以进行编码。

    报文和实体
    报文:HTTP通信中的基本单位,由8位组字节流组成,通过HTTP通信传输。
    实体:作为请求和响应的有效载荷数据被传输,内容由实体首部和实体主体组成。
    报文主体和实体主体在一般情况下相等,但当传输中进行编码操作时,实体主体的内容发生变化,导致它和报文主体产生差异

    内容编码是应用在实体主体的编码格式,目的是压缩实体信息,被压缩的实体信息由客户端接收并解码。常用的编码有 gzip,compress,deflate,identity(不编码)。

    浏览器的主要构成
    用户界面(User Interface)
    浏览器引擎(Browser engine)
    渲染引擎(Rendering engine)
    网络(Networking)
    UI后端(UI Backend)
    JS解释器(JavaScript Interpreter)
    数据储存(Data Persistence)

    展开全文
  • 在浏览器当中输入URL背后发生了什么? DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束
  • 输入URL到页面加载完成都发生了什么

    万次阅读 多人点赞 2019-06-27 16:53:53
    1、浏览器的地址栏输入URL并按下回车。 1.)名词解释 举个栗子:https://www.baidu.com/send 这个域名由三部分组成:协议名、域名、端口号,这里端口是默认所以隐藏,后边还可以加一些参数或者路径也可以不加, ...
  • 输入URL到页面渲染完成

    千次阅读 2018-09-23 17:28:58
    输入URL到页面渲染完成 原文-英文 译文 推荐阅读《图解HTTP》 各种协议与HTTP协议的关系(参照该图理解下文) 1. 输入URL地址 2. 浏览器根据域名查询IP地址 从要访问的域名中获取IP地址,DNS查询的...
  • 输入URL到渲染出整个页面的过程

    千次阅读 2021-01-31 14:03:50
    输入URL到渲染出整个页面的过程包括三个部分: DNS解析URL > 浏览器发送请求与服务器交互 > 浏览器对接收到的html页面渲染 一、DNS解析URL的过程 DNS解析的过程就是寻找哪个服务器上有请求的资源。因为ip...
  • 禁止地址栏输入URL进行文件下载

    千次阅读 2018-03-25 19:29:24
    思路是这样的:首先我们要获取父url,如果不是直接输入的话就是先前的访问过来的页面,要是用户输入了,这个父url是不存在的然后判断如果上一个目录为空的话,说明是用户直接输入url访问的,那么我们就让他跳到首页...
  • 输入URL到页面显示

    千次阅读 2018-03-10 15:17:02
    输入URL、敲下回车、最后浏览器页面显示,这里面有什么故事?键盘到操作系统、操作系统到浏览器、浏览器到服务器、服务器返回数据页面渲染…… 键盘到操作系统 回车键按下时,与键盘相关的电路闭合,通过消抖...
  • HTTP浏览器输入URL后发生了什么

    千次阅读 多人点赞 2017-12-23 22:56:32
    细说浏览器输入URL后发生了什么 慕课大神 本文摘要:1.DNS域名解析;2.建立TCP连接;3.发送HTTP请求;4.服务器处理请求;5.返回响应结果;6.关闭TCP连接;7.浏览器解析HTML;8.浏览器布局渲染;   1.浏览器...
  • 输入URL全过程

    千次阅读 2019-03-14 14:51:04
    当我们开始在浏览器中输入网址的时候,浏览器其实就已经在智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示,让你可以补全url地址。对于 google的...
  • 在浏览器中输入URL后发生了什么?

    千次阅读 2018-03-19 15:00:14
    在浏览器中输入URL后发生了什么? 作为前端开发,我们想要知道输入url后发生了什么,首先要知道URL是什么,由什么组成? 协议名+域名+端口号+路径+查询字符串+片段标识符 其次再必须对http请求以及浏览器的渲染...
  • 浏览器中输入url后发生了什么

    千次阅读 2017-09-21 10:17:37
    在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复习使用,如有理解不正确或不足的地方希望大家指出。 先上一张脑图: 浏览器中输入url后...
  • 输入URL到页面展示到底发生了什么

    千次阅读 多人点赞 2018-08-07 11:00:51
    刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料。而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步...
  • 输入URL,按下回车键后经历的6个流程 ...
  • 浏览器输入URL访问服务器过程

    千次阅读 2015-04-08 19:50:23
    我们来看看在自己的浏览器中输入URL:www.sina.com.cn,连接都经历了哪些过程 域名解析DNS 域名是方便人们记忆的,不然那么多网站,人怎么可能记住所有的ip地址。 www.sina.com.cn这个是新浪的域名,在输入该域名...
  • 输入url地址按下回车发生了什么?

    千次阅读 2019-01-19 23:04:00
    输入url地址按下回车发生了什么? 1.输入url地址后,首先进行DNS解析,将相应的域名解析为IP地址; 2.客户端根据IP地址去寻找相应的服务器; 3.与服务器进行TCP的三次握手;  所谓三次握手就是...
  • 浏览器输入URL到服务器响应的过程

    千次阅读 2018-04-03 08:28:42
    1.浏览器输入url 2.DNS系统完成域名解析IP得到地址;先查浏览器缓存,没有再查寻系统缓存,即本地host文件,再没有向ISP的DNS服务器请求解析域名得到IP地址的映射关系 3.浏览器和服务器之间建立TCP连接,通过...
  • 地址栏输入url, 要通过dns解析(浏览器是不能识别url地址的,需解析成ip地址), 返回相对应的IP地址, 建立tcp连接,(tcp三次握手) 发送Http请求, 服务器进行处理并返回Http报文, 浏览器渲染页面, ...
  • 输入URL到页面加载的过程

    千次阅读 2018-03-15 10:15:48
    浏览器输入url,查看缓存,解析域名,涉及dns相关知识 dns 使用udp,占53号端口 dns服务器分为四种 本地域名服务器、权威域名服务器、顶级域名服务器、根域名服务器 dns查询分为两种方式,递...
  • 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.
  • 1、首先,在浏览器地址栏中输入url 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。 3、在发送http请求前,需要域名解析(DNS解析),解析...
  • 浏览器输入URL 跳转 之后 浏览器 会先判断 这个 链接(URL)是否 需要 重定向(Redirect),需要就会跳转到 重定向页面,不需要的话就进入下一步。 (2).判断是否需要重定向之后 浏览器会判断 这个 访问的 链接 是否 有...
  • 前后端分离,如何防止用户直接在地址栏输入url进入页面,也就是判断用户是否登录,没有,则直接跳转到登录页,后台可以用session记录用户登陆的状态,疑问的是前端每次ajax请求,都要做状态判断么,没登录就location...
  • 网页中怎样禁止通过输入url直接访问? 1,web 开发应用除了主页展示index 以外 把其他的页面资源放在WEB-INF 下 2, 对于登录后的用户 若有get请求的url链接后 可以用session 判断用户是否登录 用sessionid 判断...
  • 在java软件开发的面试中,浏览器中输入URL到页面返回的全过程是一道非常经典的面试题。下面就给大家详细讲解一下。 总共分为7个步骤:浏览器中输入域名+域名解析+浏览器与目标服务器建立TCP连接+浏览器通过http协议...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,374
精华内容 15,349
关键字:

输入url