从输入URL到页面渲染的前世今生
前言
对于我们前端练习生来讲，与我们打交道最多的是什么？ 那必是浏览器了吧（不接受反驳）。我们都知道当我们输入一个正确的url地址时，我们的页面就会重新渲染。那这里我们就不禁好奇了，从输入url到页面渲染这两者之间到底发生了什么事？ 那下面咋来细说。
从我们输入URL到页面完成渲染总共分为两件事，第一件就是浏览器发送网络请求拿到URL对应的资源，我把它称为前世，第二件就是浏览器解析渲染资源，我把它称为今生。接下来就从这两点个给大家展开。
前世
当我们用户输入了url之后，浏览器与服务器便牵上线，搭上桥了。
这时候浏览器做的第一件事是什么？是对url身份进行解析，拿到对应服务器的IP地址，这一步浏览器用的办法就是我们熟悉的 DNS 解析。
首先浏览器会判断这个URL是不是合法的
当确定URL合法之后，浏览器就该发起真正的URL请求。那也就是DNS解析的过程了
DNS解析
这个DNS解析总共有四步，浏览器会按照一步一步的往下走，直到找到url对应的ip地址为止：
- 第一步，浏览器首先会在自己本地域名服务器中查找相应的url缓存资源
- 第二步，浏览器会向根域名服务器发送查找请求，查找url缓存资源
- 第三步，浏览器则向顶级域名服务器发送查找请求
- 第四步，浏览器则最后一级权威域名服务发送查找请求
用图片来表示就是如下这张图：
当DNS解析找到了URL对应的IP地址之后，浏览器就利用 IP 地址和服务器建立 TCP 连接，进行资源传输了。，这里也就到了我们熟知的三次TCP三次握手建立连接，四次挥手断开连接，
TCP连接
TCP连接分为三次握手，四次挥手两个过程：
三次握手
刚开始客户端处于 Closed 的状态，服务端处于 Listen 状态。
- 第一次握手：：客户端给服务端发一个
SYN报文，并指明客户端的初始化序列号ISN。此时客户端处于SYN_SENT状态。 - 第二次握手：服务器发送确定报文,表示自己收到了客户端的
SYN，此时服务器处于SYN_RCVD的状态。 - 第三次握手：：客户端发送
ACK报文，表示已经收到了服务端的SYN报文，客户端处于ESTABLISHED状态。服务器收到ACK报文之后，也处于ESTABLISHED状态，双方已经建立连接。
四次握手
客户端与服务端已经建立连接，它们就可以通过http协议传递资源了，当资源传递结束后，双方亲家也就谈妥了，客户端与服务端就该四次挥手了。
- 第一次挥手：客户端发送一个
FIN报文，并停止再发送数据，主动关闭TCP连接，进入FIN_WAIT1状态，等待服务端的确认。 - 第二次挥手： 服务端发送
ACK报文，，服务端进入CLOSE_WAIT状态，此时的TCP处于半关闭状态，客户端到服务端的连接释放。 - 第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文。此时服务端处于
LAST_ACK的状态。等待客户端的确认。 - 第四次挥手：客户端发送一个
ACK报文作为应答，此时客户端处于TIME_WAIT状态。需要过2MSL时间，确保服务端收到自己的ACK报文之后进入CLOSED状态，服务端收到ACK报文之后，进入CLOSED状态。
到此， 浏览器就顺利拿到了URL地址的资源，他们的前世篇就结束了，该来到今生篇了。
今生
当浏览器已经拿到了服务器的资源之后，浏览器就该对资源进行解析，渲染操作啦！那自然也就进入了今生篇了。
解析
- 第一步：浏览器解析 HTML 构建 DOM 树
- 第二步：浏览器解析 CSS 构建 CSSOM 树
- 第三步：结合 DOM 树 和 CSSOM 树，构建渲染树(Render Tree)
- 第四步：解析 JavaScript 脚本（严格来说，这不一定是第四步，因为当浏览器遇到script标签就会执行这一步）
渲染
其中渲染过程中，有两步重要的操作，一步叫做回流, 另一步叫做重绘。下面我就来说说这两步。
回流（重排）
回流的定义是：在同一图层下的某容器几何属性的变化影响了布局，浏览器需要回流操作。
引起回流的操作：
- 网页初始化
- JS 操作 DOM 树（增加或者删除 DOM 结构）
- 元素的尺寸发生变化
- JS中导致几何属性改变的方法（OffsetWidth、clientWidth...）
重绘
重绘的定义是：元素的非几何属性发生变化，尺寸或者位置等没有改变。浏览器需要重绘操作。
关于重绘有一点要注意：回流一定会引发重绘， 重绘不一定会引发回流。浏览器渲染是先进行回流，再进行重绘。
当浏览器所有图层都重绘完成，不再发生回流和重绘，那浏览器也就完成页面渲染。自此从输入URL到页面渲染的前世今生就结束了。
参考链接
转载自:https://juejin.cn/post/7213752661761572924