当我们输入URL直到页面加载完成发生了什么呢

当我们输入URL之后,浏览器都背着我们干了啥呢?一直想写这个文章,前前后后拖了好久,今天我们就来谈谈这个“深奥”的问题~~
这个过程大体上主要是这些步骤:

 - DNS解析
 - TCP连接
 - 发送HTTP请求
 - 服务器处理请求并返回HTTP报文
 - 浏览器解析、渲染页面
 - 连接结束
1.DNS解析(即浏览器查找域名的IP地址)

输入的域名并不是最后资源所在的真实位置,而域名只是与IP地址的一个映射。域名解析就是将域名还原为IP地址的过程。(由于IP地址比较多,所以得一步一步进行查找)
浏览器将输入的域名解析为对应的IP地址的过程是:

  • 查找浏览器缓存
    浏览器一般会缓存DNS记录一段时间,不同的浏览器的事件可能不一样。浏览器去查找这些缓存,若有缓存,则直接返回IP,否则下一步。
  • 查找系统缓存
    浏览器缓存中找不到IP之后,浏览器会进行系统调用,查找本机的hosts文件,若有,则返回IP,否则下一步。
  • 查找路由器缓存
    前面查询无果,则需借助网络,路由器一般都有自己的DNS缓存,将前面的请求发送给服务器,查找ISP服务商缓存DNS的服务器,若查找到,则返回IP地址,否则下一步。
    • 递归查询
      上述步骤找不到,则ISP的DNS服务器会进行递归查询,而递归查询就是如果主机所询问的本地域名服务器不知道被查询域名的IP地址,那么本地域名服务器就以DNS客户的身份,向其他根域名服务器继续发出查询请求报文,而并非让该主机自己进行下一步查询。(本地域名服务器地址是通过DHPC协议获取地址)
    • 迭代查询
      本地服务器采用迭代查询,先向一个根域名服务器查询。所谓迭代查询就是当根域名服务器收到本地域名服务器发出的查询请求报文后,告诉本地域名服务器下一步应该查询哪一个域名服务器,然后本地域名服务器自己进行后续的查询。(而不是替代本地域名服务器进行后续查询)
2.浏览器与目标服务器建立TCP连接

主机服务器通过DNS解析得到了目标服务器的IP地址后,与服务器建立TCP连接。
TCO三次握手连接:

  • 浏览器所在客户端向服务器发初连接请求报文。(SYN标志为1)
  • 服务器接收报文后,同意建立连接,向客户端发送确认报文。(SYN,ACK为1)
  • 客户端接收到确认报文之后,再次向服务器发出报文,确认已接收到确认报文。此处客户端与服务器之间的TCP连接建立完成,开始通信。
3.浏览器通过HTTP协议发送请求

HTTP请求包括请求报头和请求主体两个部分,请求报头包括请求的方法(GET、POST)、目标URL、遵循的协议(http/https/ftp等)、返回的信息是否需要缓存以及客户端是否发送cookie等。
<1>请求报头分为请求方法、请求地址和协议版本。
请求方法:HTTP定义的请求方法有8种:GET、POST、PUT、DELETE、Patch、Head、options、trace.
最常用的两种:GET、POST。
请求地址:组成:<协议>://<主机>:<端口>/<路径>,有时会带参数,GET请求。
**请求头部:**常见的请求头如下:HOST、User-Agent、Connection、Acceot-Charest、Allow等。

4.服务器处理请求并返回Http报文

服务器接收到请求后,根据路径参数0,经过后端的一些处理之后,把处理后的结果返回给浏览器。然后进入到Web服务器上的 WebServer,随后进入到部署好的后端应用,找到对应的请求处理,最后处理结束后返回报头,将数据返回给浏览器。

5.浏览器解析渲染界面

浏览器拿到完整的HTML页面代码或其他数据结果后,浏览器开始下载HTML文档同时设置缓存并关闭TCP连接。
四次挥手:

  • 浏览器所在主机向服务器发出释放报文,然后停止发送数据。

  • 服务器接收到释放报文后发出确认报文,然后将服务器上未传递玩的数据发完。

  • 服务器数据传输完毕后,向客户机发送连接释放报文。

  • 客户机接收到报文后,发出确认,然后等待一段时间后,释放TCP连接。
    浏览器渲染页面过程

  • 解析HTML,构建DOM树

  • 解析CSS,生成CSSOM树

  • 合并DOM树和CSSOM树,生成render渲染树

  • 根据render树进行布局,并计算每个元素的几何属性。

  • 绘制render树,将每个元素的几何属性绘制到屏幕上。

此时,连接结束。

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值