浏览器页面呈现过程

从输入链接到浏览器呈现页面的过程中,浏览器所经历的过程。

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=xSYN=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加密传输,HTTPSHTTP的基础下加入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的传输过程,其中2356也被称为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>标签后,浏览器会立即开始解析脚本,并停止解析文档,因为脚本有可能会改动DOMCSS,继续解析会浪费资源,所以应当将<script>标签放于<body></body>
  4. DOM TreeCSSOM生成后,将两者结合进行布局,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型,可称为渲染树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状态。

相关

TCP三次握手四次挥手 https://github.com/WindrunnerMax/EveryDay/blob/master/Browser/TCP%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B.md HTTP协议概述 https://github.com/WindrunnerMax/EveryDay/blob/master/Browser/HTTP%E5%8D%8F%E8%AE%AE%E6%A6%82%E8%BF%B0.md HTTPS加密传输过程 https://github.com/WindrunnerMax/EveryDay/blob/master/Browser/HTTPS%E5%8A%A0%E5%AF%86%E4%BC%A0%E8%BE%93%E8%BF%87%E7%A8%8B.md 浏览器渲染与内核 https://github.com/WindrunnerMax/EveryDay/blob/master/Browser/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E4%B8%8E%E5%86%85%E6%A0%B8.md 对称加密与非对称加密 https://github.com/WindrunnerMax/EveryDay/blob/master/Browser/%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86%E4%B8%8E%E9%9D%9E%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86.md

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/d616d887953a https://www.cnblogs.com/lhh520/p/10232738.html https://blog.csdn.net/bjweimengshu/article/details/78978314 https://blog.csdn.net/wlk2064819994/article/details/79756669 https://blog.csdn.net/weixin_40659167/article/details/86510745