从浏览器输入地址到页面渲染都经历了哪些过程

作为前端开发工作者，要对浏览器请求URL到渲染非的了解，在这里，我们就来详细的看看页面渲染出来到底经历了哪些过程

1.URL输入

url：统一资源定位符，用于定位互联网上资源，也叫网址
我们在地址栏输入url并回车以后，浏览器会根据Url进行以下的判断，

1. 首先，检查输入的URL是否合法
2. 如果合法，判断url是否完整，如果不完整，浏览器可能会对地址进行猜测，补全地址的前缀或者后缀，
3. 如果不合法，将输入内容作为搜索条件，使用用户设置的默认搜索引擎来进行搜索

大部分浏览器会从历史记录、书签等地方开始查找我们输入的内容，并给出智能提示

2.DNS 解析

由于我们输入的是域名，浏览器不能通过域名找到对应的服务器IP地址，而数据包是通过 IP 地址传给对方的。因此我们需要得到域名对应的 IP 地址。这个过程需要依赖一个服务系统，这个系统将域名和 IP 一一映射，我们将这个系统就叫做 DNS（域名系统）。得到具体 IP 的过程就是 DNS 解析。 当然，值得注意的是，浏览器提供了 DNS 数据缓存功能。即如果一个域名已经解析过，那会把解析的结果缓存下来，下次处理直接走缓存，不需要经过 DNS 解析

DNS解析域名过程：

其实DNS可以看做是个数据库，记录了很多URL和对应的IP地址，这样就能用DNS解析出IP

1. 用户在浏览器输入域名，操作系统会检查 浏览器缓存和操作系统缓存（本地的host文件） 中是否有这个网址记录，有，则从记录里找到对应的IP，完整域名解析；
2. 没有，则接着检查本地DNS（网络配置中的"DNS服务器地址"了。操作系统会把这个域名发送给这个本地DNS服务器）是否缓存该网址记录，有，则返回解析结果，完成域名解析；
3. 还没有，则本地DNS服务器会发送查询报文到根DNS服务器，根DNS服务器收到请求后，返回顶级DNS服务器地址（它是国际顶级域名服务器，如.com、.cn、.org等，全球只有13台左右），（根服务器发出请求，进行递归查询（DNS服务器先问根域名服务器.com域名服务器的IP地址，然后再问.com域名服务器，依次类推）

其实就是三步骤：
1、找缓存
2、找本机的hosts文件
3、找DNS服务器

3.建立 TCP 连接

当浏览器获取到服务器的IP地址后，浏览器会用一个随机的端口号向服务器80端口发起TCP连接请求，这个请求到达服务器后，通过TCP三次握手建立TCP的连接

建立 TCP 连接经历了下面三个阶段

1. 建立连接时，客户端发送SYN报文（SYN=1；seq=x）到服务器，并进入SYN_SENT状态，等待服务器确认

2. 服务器收到SYN包，确认SYN，同时发送一个SYN包，即SYN+ACK包（SYN=1；ACK=1;seq=y;ack=x+1），此时服务器进入SYN_RECV状态

   第 2 次握手实际上是分两部分来完成的，即 SYN+ACK（请求和确认）报文。

   • 服务器收到了客户端的请求，向客户端回复一个确认信息（ACK=x+1）。
   • 服务器再向客户端发送一个 SYN 包（seq=y）建立连接的请求，此时服务器进入 SYN_RECV 状态，

3. 客户端收到服务器的SYN+ACK包，向服务器发确认包ACK，（ACK=1;seq=x+1;ack=y+1）客户端和服务端进入Established状态，TCP连接建立成功

SYN：同步序列编号
SEQ 表示请求序列号
ACK: 确认序列号，表示响应
RST：连接重置 复位标志
URG：紧急标志
RSH：推标志，表示有DaTa数据传输
FIN：结束标志

SYN建立连接 -> SYN+ACK 响应 -> PSH(TCP数据包传递) -> FIN关闭连接 -> RST连接重置

4.发送 HTTP 请求

现在 TCP 连接建立完毕，浏览器可以和服务器开始通信，即开始发送 HTTP 请求。浏览器发 HTTP 请求要携带三样东西:请求行、请求头和请求体

如果使用https，则会在TCP与HTTP之间多添加一层协议作为加密和认证的服务，https使用SSL/TLS协议，保障了信息的安全，SSL协议的作用是，认证客户端和服务器，确保发送到正确的客服端和服务器，加密数据，防止数据中途被监听、篡改，维护数据的完整性。TLS协议的作用在于，用于在两个通信程序之间，提供保密性和数据完整性，tls协议有两层，tls记录协议和tls握手协议；

5.网络响应

HTTP 请求到达服务器，服务器进行对应的处理。最后要把数据传给浏览器，也就是返回网络响应。

响应头包含了服务器及其返回数据的一些信息, 服务器生成数据的时间、返回的数据类型以及对即将写入的 Cookie 信息。如果请求头或响应头中包含 Connection: Keep-Alive，表示建立了持久连接，这样 TCP 连接会一直保持，之后请求统一站点的资源会复用这个连接。

6.页面渲染

完成以上过程后，数据已经达到浏览器端，接下来就是浏览器解析并渲染数据了

解析过程
（1） 构建 DOM 树–处理HTML标记构建DOM树

由于浏览器无法直接理解 HTML 字符串，因此将这一系列的字节流转换为一种有意义并且方便操作的数据结构，这种数据结构就是 DOM 树。DOM 树本质上是一个以 document 为根节点的多叉树。这步主要是处理HTML标记构建DMO树

（2） 构建CSSOM树–处理CSS标记构建CSSOM树

首先，浏览器是无法直接识别 CSS 样式文本的，因此渲染引擎接收到 CSS 文本之后第一件事情就是将其转化为一个结构化的对象，即 styleSheets。 浏览器处理CSS标记并解析成树形结构的 CSSOM 树

（3） 生成布局树–处理DOM树以CSSOM树合并为一颗渲染树

现在已经生成了 DOM 树和 CSSOM 树，接下来要做的就是通过浏览器的布局系统确定元素的位置，也就是要生成一棵布局树(Layout Tree)。 布局树生成的大致工作如下:

遍历生成的 DOM 树节点，并把他们添加到布局树中；
计算布局树节点的坐标位置。
值得注意的是，布局树只包含可见元素，对于 head 标签和设置了 display: none 的元素，将不会被放入其中。

浏览器根据渲染树所体现的节点、各个节点的 CSS 定义以及它们的从属关系，计算出每个节点在屏幕中的位置。Web 页面中元素的布局是相对的，在页面元素位置、大小发生变化，往往会导致其他节点联动，需要重新计算布局，这时候的布局过程一般被称为回流（Reflow）。

（4）绘制（Paint）-- 根据渲染树布局，以计算每个节点的几何信息

遍历渲染树，调用渲染器的 paint() 方法在屏幕上绘制出节点内容，本质上是一个像素填充的过程。这个过程也出现于回流或一些不影响布局的 CSS 修改引起的屏幕局部重画，这时候它被称为重绘（Repaint）。实际上，绘制过程是在多个层上完成的，这些层我们称为 渲染层（RenderLayer）

（5）渲染层合成（Composite）-- 将各个节点渲染到屏幕上

多个绘制后的渲染层按照恰当的重叠顺序进行合并，而后生成位图，最终通过显卡展示到屏幕上。

那什么是渲染层合成呢？

在 DOM 树中每个节点都会对应一个渲染对象（RenderObject），当它们的渲染对象处于相同的坐标空间（z 轴空间）时，就会形成一个 RenderLayers，也就是渲染层。渲染层将保证页面元素以正确的顺序堆叠，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。 这个模型类似于 Photoshop 的图层模型，在 Photoshop 中，每个设计元素都是一个独立的图层，多个图层以恰当的顺序在 z 轴空间上叠加，最终构成一个完整的设计图。 对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。

（6）显示器显示内容）

栅格化操作完成后，合成线程会生成一个绘制命令，即"DrawQuad"，并发送给浏览器进程。 浏览器进程中的 viz 组件接收到这个命令，根据这个命令把页面内容绘制到内存，也就是生成了页面，然后把这部分内存发送给显卡，从而展示在屏幕上。

从浏览器的渲染过程中我们知道，页面 HTML 会被解析成 DOM 树，每个 HTML 元素对应了树结构上的一个 node 节点。而从 DOM 树转化到一个个的渲染层，并最终执行合并、绘制的过程，中间其实还存在一些过渡的数据结构，它们记录了 DOM 树到屏幕图形的转化原理，其本质也就是树结构到层结构的演化。

7.http请求结束，TCP断开连接

现在的浏览器为了优化请求耗时，默认都会开启持久连接，也就是说页面关闭的时候，TCP连接才会关闭，这个关闭的过程就是四次挥手。

刚开始双方都处于 ESTABLISHED 状态，假如是客户端先发起关闭请求。四次挥手的过程如下：

• 第一次挥手： 客户端会发送一个 FIN 报文，报文中会指定一个序列号。此时客户端停止再发送数据，主动关闭TCP连接,处于 FIN_WAIT1（终止等待1） 状态。(FIN=1;seq=u)
• 第二次挥手：服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 +1 作为 ACK 报文的序列号值，表明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT 状态。（ACK=1，确认号ack=u+1，序号seq=v）
• 第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。（FIN=1，ACK=1，序号seq=w，确认号ack=u+1）
• 第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态，服务端收到 ACK 报文之后，就处于关闭连接了，处于 CLOSED 状态。(ACK=1，seq=u+1，ack=w+1）

服务器只要收到了客户端发出的确认，立即进入CLOSED状态。同样，撤销TCB后，就结束了这次的TCP连接。可以看到，服务器结束TCP连接的时间要比客户端早一些。