浏览器页面呈现过程

WindRunnerMax

发布于 2020-08-27 02:39:54

67500

代码可运行

文章被收录于专栏：Czy‘s BlogCzy‘s Blog

运行总次数：0

代码可运行

浏览器页面呈现过程

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

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    →  接收
(已建立链接)                               (已建立链接)

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

SSL加密传输

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

首先TCP三次握手建立链接，这是数据传输基础，在此之上开始SSL。
客户端首先发送Client Hello开始SSL通信，报文中包含客户端支持的SSL版本、随机值Random1、加密算法以及密钥长度等。
服务器发送Server Hello，和客户端一样，在报文中包含SSL版本、随机值Random2以及加密组件，此后服务端将证书也发送到客户端。
此时客户端需要对服务端发送的证书进行验证，通过操作系统内置的CA证书，将服务器发送的证书的数字签名进行解密，并将证书的公钥进行相同算法的HASH与解密的数字签名解密的内容进行对比，验证证书是否合法有效，是否被劫持更换。
客户端验证证书合法，然后生成一个随机值Random3，用公钥对Random3进行加密，生成Pre-Master Key，客户端以Client Key Exchange报文将Pre-Master Key发送到服务端，此后发送Change Cipher Spec报文表示此后数据传输进行加密传输。
服务端将Pre-Master Key用自己的私钥解密为Random3,服务端发送Change Cipher Spec报文表示此后数据传输进行加密传输。
此时客户端与服务端都拥有三个随机字符串，且Random3是密文传输的，是安全状态的，此时则可以使用这三个字符串进行对称加密传输。由于非对称加密慢，不能每次传输数据都进行非对称加密，所以使用非对称加密将密钥协商好然后使用对称加密进行数据传输。
此时便正常进行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"}

浏览器渲染页面

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

第一次挥手：客户端发出释放标识FIN=1，自己的序列号seq=u，进入终止等待FIN-WAIT-1状态
第二次挥手：服务端收到消息后发出ACK=1确认标志和客户端的确认号ack=u+1，自己的序列号seq=v，进入关闭等待CLOSE-WAIT状态，客户端收到消息后进入终止等待FIN-WAIT-2状态
第三次挥手：服务器发送释放标识FIN=1信号，确认标志ACK=1，确认序号ack=u+1，自己的序列号seq=w，服务器进入最后确认LAST-ACK状态
第四次挥手：客户端收到回复后，发送确认标志ACK=1，确认序号ack=w+1，自己的序列号seq=u+1，客户端进入时间等待TIME-WAIT状态，经过2个最长报文段寿命后，客户端CLOSE。服务器收到确认后，立刻进入CLOSE状态。

参考

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