浏览器输入URL发生了什么(详细解释)

浏览器输入URL发生了什么

• URL解析
• DNS域名解析
• 建立TCP链接
• 发送HTTP请求
• 服务器处理请求
• 接收响应结果
• 关闭TCP连接
• 浏览器解析HTML
• 浏览器布局渲染

URL解析

• url地址解析

  判断输入是否为一个合法的url，如果是合法url则进行url补全(例如，输入baidu.com，则会补全协议http或https；补全端口http默认80,https默认443；有些还会补上www等)

• url地址编码

  浏览器会将字符空格、中文、unicode等编码为16进制

• HSTS

  HSTS的作用是强制客户端使用HTTPS与服务器创建连接。它是国际互联网工程组织IETF正在推行的一种新的安全协议。

• 其他操作

  安全检查、访问限制等

• 检查缓存

  

DNS域名解析

• DNS(Domain Name System): NDS服务它是一种提供域名到ip地址之间的解析服务。

• 域名解析一般为一下几个过程，采用递归的方式，一路查下去直到找到该域名的ip地址后便返回

  

• 本地DNS服务器找不到的话，会迭代或递归查找根域名服务器，下面介绍一下本地DNS服务器到根域名服务器查找的过程

  • 迭代方式

    

建立TCP连接

• 浏览器通过DNS查询到对应ip后，便向服务器发起TCP连接请求。下面先介绍一下TCP/IP四层结构的数据传输过程。发送端到从上到下依次是对数据的封装，接收端从下到上依次对数据进行解封。

  

  • 应用层

    得到ip地址后，浏览器会开始构造一个HTTP请求报文，其中包括下图中的内容

    

    • 请求方法

      GET、POST、HEAD（HEAD与GET类似，请求后只返回响应头，不返回响应内容，查看某个页面的状态时比较高效）

    • 请求头

      由关键字/值对组成，每行一对，下面是常用关键字

      Accept: 接收类型，表示浏览器支持的MIME类型
      （对标服务端返回的Content-Type）
      Accept-Encoding：浏览器支持的压缩类型,如gzip等,超出类型不能接收
      Content-Type：客户端发送出去实体内容的类型
      Cache-Control: 指定请求和响应遵循的缓存机制，如no-cache
      If-Modified-Since：对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内，http1.0中
      Expires：缓存控制，在这个时间内不会请求，直接使用缓存，http1.0，而且是服务端时间
      Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存，http1.1中
      If-None-Match：对应服务端的ETag，用来匹配文件内容是否改变（非常精确），http1.1中
      Cookie: 有cookie并且同域访问时会自动带上
      Connection: 当浏览器与服务器通信时对于长连接如何进行处理,如keep-alive
      Host：请求的服务器URL
      Origin：最初的请求是从哪里发起的（只会精确到端口）,Origin比Referer更尊重隐私
      Referer：该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段)
      User-Agent：用户客户端的一些必要信息，如UA头部等

    • 空行

      最后一个请求头是空行，发送回车和换行符，通知服务器以下不再有请求头

    • 请求数据

      请求数据不在GET中使用，只在POST中使用

  • 传输层

    传输层发起一条到达服务器的TCP连接，为了方便传输，会对数据进行分割(以报文为单位)，并标记编号，方便服务器接收时能够准确的还原报文信息。

    建立TCP连接前，会进行三次握手，如下图

    

    这里面介绍一下符号的意义

    • seq(sequence number)，序列号，用来标记数据段的顺序，TCP把连接中发送的数据字节都编上一个序号，第一个字节的编号由本地随机产生
    • ack(acknowlege number)，确认号，指的是期望接收到下一个字节的编号，因此当前报文段最后一个字节的编号+1即为确认号
    • ACK(acknowledgement)，确认，当ACK=1确认号字段才有效，ACK=0确认号无效
    • SYN(synchronous)，同步，连接建立时用于同步序号
    • PSH(push)，传送
    • FIN(finish)，结束
    • URG(urgent)，紧急
    • RST(reset)，重置

    

  • 网络层

    • IP协议查询Mac地址

    • 将数据段打包，并加入源及目标的ip地址，并且负责寻找传输路线

    • 判断目标地址是否与当前地址处于同一网络中，是的话直接根据 Mac 地址发送，否则使用路由表查找下一跳地址，以及使用 ARP 协议查询它的 Mac 地址。

    • 下图为IP首部图

    

    注意：在OSI模型中ARP协议位于链路层，但在TCP/IP中，它位于网络层

  • 链路层

    • 以太网协议，根据该协议将数据分为以“帧”为单位的数据包，每一帧每位两个部分

      • 标头：数据包的发送者、接收者、数据类型
      • 数据：具体数据内容

    • Mac地址

      以太网规定了连入网络的所有设备都必须具备“网卡”接口，数据包都是从一块网卡传递到另一块网卡，网卡的地址就是 Mac 地址。每一个 Mac 地址都是独一无二的，具备了一对一的能力。

    • 广播

      发送数据的方法很原始，直接把数据通过 ARP 协议，向本网络的所有机器发送，接收方根据标头信息与自身 Mac 地址比较，一致就接受，否则丢弃。（接收方回应应该是单播）

    • 服务器接受请求后以上几步反过来，可以看TCP连接部分的第一张图。

服务器处理请求

• 服务器处理请求的过程如下图

  

• 介绍一下上图中的部分步骤

  • 主进程监听，可以通过Apache，Nginx以及Windows上的IIS等，监听得到请求，开启子进程去处理请求
  • 处理请求，接受 TCP 报文后，会对连接进行处理，对HTTP协议进行解析（请求方法、域名、路径等），并且进行一些验证：
    • 验证是否配置虚拟主机
    • 验证虚拟主机是否接受此方法
    • 验证该用户可以使用该方法（根据 IP 地址、身份信息等）
  • 重定向，如果配置重定向，则返回一个301，浏览器会根据响应，重新发送HTTP请求
  • URL重写，根据 URL 重写规则，如果请求的文件是真实存在的，比如图片、html、css、js文件等，则会直接把这个文件返回。否则服务器会按照规则把请求重写到 一个 REST 风格的 URL 上。
  • 返回响应，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。

接收响应

• 下图是响应报文头

TCP断开连接

• HTTP1.0是无状态的，客户端收到响应后就会直接断开连接，下面是TCP四次挥手的图

  

• 介绍一下上图中的主要关键字

  • FIN_WAIT1是主动断开连接方发出关闭请求后的状态，表示主动方(主动断开TCP连接的一方)已经没有信息要发送给被动方

  • CLOSED_WAIT是被动方接收到主动方的关闭请求后返回ACK响应后的状态，此时被动方应该做的是查看自身是否还有数据需要传递给主动方，如果没有则发送关闭请求

  • FIN_WAIT2是主动方向被动方发送关闭请求后接收到响应后的状态

  • LAST_ACK是被动方已经确定没有数据需要传递给主动方后，发送给主动方关闭请求后的状态，表示最后一次响应主动方，它最后再等待主动方的ACK报文，当收到报文后便CLOSED

  • WAIT_TIME是主动方接收到被动方关闭请求后的状态，它再返回响应给被动方，被动方收到这个响应后便断开连接。此时主动方再等待2MSL，来确保被动方已经没有信息传递给主动方了，时间过后则关闭连接

    为什么等待2MSL

    1、在主动方发送出最后的ACK回复，但该ACK可能丢失。被动方如果没有收到ACK，将不断重复发送FIN片段。MSL指一个片段在网络中最大的存活时间，2MSL就是一个发送和一个回复所需的最大时间。如果直到2MSL，主动方都没有再次收到FIN，那么主动方推断ACK已经被成功接收，确保被动方已经断开连接，则结束此次TCP连接。

    2、等待2MSL就可以使本连接持续的时间所产生的所有报文段都从网络中消失。这样就可以使下一个新的连接中不会出现这种旧的连接请求的报文段。

    MSL不同系统的默认值
    Windows : MSL = 2 min
    linux(Ubuntu, CentOs) : MSL = 60s
    Unix : MSL = 30s

浏览器解析HTML

• 浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树

• DOM树

  

• CSS规则树

  

浏览器布局渲染

• 合并DOM树和CSS规则树，生成布局树，负责各元素尺寸、位置的计算、绘制布局树，浏览器进行渲染成页面。

参考链接https://www.cnblogs.com/jin-zhe/p/11586327.html
https://zhuanlan.zhihu.com/p/43369093
https://www.jianshu.com/p/7eea6fbc5fcd