简体中文

浏览器页面呈现过程

在本文中，我们介绍从输入链接到浏览器呈现页面的过程中，浏览器所经历的基本流程。

DNS解析

首先浏览器将输入的链接进行DNS解析，也就是将域名转换为IP地址的过程，得到了服务器具体的IP地址，才可以进行TCP链接以及数据的传输，具体DNS解析的过程为:

  • 浏览器首先检查自身的DNS缓存是否对于此域名有IP地址，chrome对于域名解析的缓存时间为60s，可以通过地址栏输入chrome://net-internals/#dns清除DNS缓存。
  • 若浏览器解析缓存未命中，则到操作系统中hosts文件检查域名与IP对应关系。若hosts文件未命中，则向本地域名服务器请求解析，本地域名服务器一般是运营商ISP提供的，一般是通过53端口发送UDP报文请求服务器解析DNS。
  • 若本地服务器解析未命中则会有两种解析方案: 迭代解析与递归解析。一般来说，主机向本地域名服务器的查询一般都是采用递归查询，本地域名服务器向根域名服务器的查询通常是采用迭代查询，依次向根域名服务器、顶级域名服务器、主域名服务器等一级一级查询查询直到查询到IP地址。

TCP三次握手

HTTP协议是使用TCP协议作为其传输层协议的，在拿到服务器的IP地址后，客户端浏览器会与服务器建立TCP连接，该过程包括三次握手。

client server 主动打开 → SYN=1,seq=x → 被动打开，接收 (同步已发送) (同步收到) 接收 ← SYN=1,ACK=1,seq=y,ack=x+1 ← 发送 (已建立链接) (同步收到) 发送 → ACK=1,seq=x+1,ack=y+1 → 接收 (已建立链接) (已建立链接)
  1. 第一次握手：客户端主动链接服务器，发送初始序列号seq=x与SYN=1同步请求标志，并进入同步已发送SYN_SENT状态，等待服务器确认。
  2. 第二次握手：服务端收到消息后发送确认标志ACK=1与同步请求标志SYN=1，发送自己的序列号seq=y以及客户端确认序号ack=x+1，此时服务器进入同步收到SYN_RECV状态。
  3. 第三次握手：客户端收到消息后发送确认标志ACK=1，发送自己的序列号seq=x+1与服务器确认号ack=y+1，发送过后即确认链接已建立状态ESTABLISHED，服务端接收确认信息后进入链接已建立状态ESTABLISHED。

SSL加密传输

SSL的建立是为了HTTPS加密传输，HTTPS在HTTP的基础下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

  1. 首先TCP三次握手建立链接，这是数据传输基础，在此之上开始SSL。

  2. 客户端首先发送Client Hello开始SSL通信，报文中包含客户端支持的SSL版本、随机值Random1、加密算法以及密钥长度等。

  3. 服务器发送Server Hello，和客户端一样，在报文中包含SSL版本、随机值Random2以及加密组件，此后服务端将证书也发送到客户端。

  4. 此时客户端需要对服务端发送的证书进行验证，通过操作系统内置的CA证书，将服务器发送的证书的数字签名进行解密，并将证书的公钥进行相同算法的HASH与解密的数字签名解密的内容进行对比，验证证书是否合法有效，是否被劫持更换。

  5. 客户端验证证书合法，然后生成一个随机值Random3，用公钥对Random3进行加密，生成Pre-Master Key，客户端以Client Key Exchange报文将Pre-Master Key发送到服务端，此后发送Change Cipher Spec报文表示此后数据传输进行加密传输。

  6. 服务端将Pre-Master Key用自己的私钥解密为Random3,服务端发送Change Cipher Spec报文表示此后数据传输进行加密传输。

  7. 此时客户端与服务端都拥有三个随机字符串，且Random3是密文传输的，是安全状态的，此时则可以使用这三个字符串进行对称加密传输。由于非对称加密慢，不能每次传输数据都进行非对称加密，所以使用非对称加密将密钥协商好然后使用对称加密进行数据传输。

  8. 此时便正常进行HTTP数据传输，但是由于SSL加密的作用，此时的HTTP传输便是安全的，此为HTTPS的传输过程，其中2、3、5、6也被称为SSL四次握手。

发起请求

浏览器构建HTTP请求报文，并通过TCP协议传送到服务器的指定端口，HTTP请求报文一共有三个部分，报文首部，通常包含请求行与各种请求头字段等；空行，告诉服务器请求头部到此为止），报文主体，即发送的数据信息，通常并不一定要有报文主体。

<!-- 报文首部 --> GET / HTTP/1.1 <!-- 请求行 --> accept: text/html accept-encoding: gzip, deflate, br accept-language: zh-CN,zh;q=0.9 ... <!-- 请求头 --> <!-- 空行 --> <!-- 报文主体 --> u=1&t=1587699008

响应报文

服务端响应HTTP请求，返回响应报文，HTTP响应报文由四部分组成：响应行、响应头、空行、响应体。

HTTP/1.1 200 OK <!-- 响应行 --> content-encoding: gzip content-type: text/html; charset=utf-8 date: Fri, 24 Apr 2020 03:34:50 GMT ... <!-- 响应头 --> <!-- 空行 --> <!-- 响应体 --> {"status":1, "msg": "success"}

浏览器渲染页面

  1. 自上而下，首先解析HTML标签，生成DOM Tree
  2. 在解析到<link>或者<style>标签时，开始解析CSS，生成CSSOM，值的注意的是此时解析HTML标签与解析CSS是并行执行的
  3. 当遇到<script>标签后，浏览器会立即开始解析脚本，并停止解析文档，因为脚本有可能会改动DOM与CSS，继续解析会浪费资源，所以应当将<script>标签放于<body></body>后
  4. 当DOM Tree与CSSOM生成后，将两者结合进行布局，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型，可称为渲染树render tree
  5. 根据计算好的信息绘制整个页面，系统会遍历渲染树，并调用paint方法，将内容显示在屏幕上。

断开TCP链接

client server 主动关闭 → FIN=1,seq=u → 被动关闭，接收 (终止等待1) (关闭等待) 接收 ← ACK=1,seq=v,ack=u+1 ← 发送 (终止等待2) (关闭等待) 接收 ← FIN=1,ACK=1,seq=w,ack=u+1 ← 发送 (时间等待) (最后确认) 发送 → ACK=1,seq=u+1,ack=w+1 → 接收 (时间等待 2MSL 关闭) (关闭)

  1. 第一次挥手：客户端发出释放标识FIN=1，自己的序列号seq=u，进入终止等待FIN-WAIT-1状态

  2. 第二次挥手：服务端收到消息后发出ACK=1确认标志和客户端的确认号ack=u+1，自己的序列号seq=v，进入关闭等待CLOSE-WAIT状态，客户端收到消息后进入终止等待FIN-WAIT-2状态

  3. 第三次挥手：服务器发送释放标识FIN=1信号，确认标志ACK=1，确认序号ack=u+1，自己的序列号seq=w，服务器进入最后确认LAST-ACK状态

  4. 第四次挥手：客户端收到回复后，发送确认标志ACK=1，确认序号ack=w+1，自己的序列号seq=u+1，客户端进入时间等待TIME-WAIT状态，经过2个最长报文段寿命后，客户端CLOSE。服务器收到确认后，立刻进入CLOSE状态。

每日一题

参考

目录