重绘 回流 以及浏览器解析URL和渲染整个页面
前言
在文档重新加载的时候，浏览器引擎会解析html来生成dom树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。
重绘(repaint)
当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。
常见的浏览器重绘操作：改变元素颜色 改变元素背景色 改变visibility/outline
回流(reflow)
又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。
常见的浏览器回流操作：页面初次渲染 浏览器窗口大小改变 元素尺寸/位置/内容发生改变 元素字体大小变化 添加或者删除可见的 DOM 元素 激活 CSS 伪类（:hover……）
重点：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。*
想清楚了以上的两个概念，在前端中为什么要使用防抖（debounce）和节流（throttle）就显得格外的重要。
这张图就能很好的说明重绘和回流以及防抖和节流的总要性
那么，在工作中我们要如何避免大量使用重绘与回流呢？：
1.避免频繁操作样式，可汇总后统一一次修改
2.尽量使用
class进行样式修改，而不是直接操作样式3.减少
DOM 的操作，可使用字符串一次性插入
浏览器解析URL
1.用户输入 URL 地址。
2.对 URL 地址进行 DNS 域名解析成ip地址。
3.建立 TCP 连接（三次握手）。
4.浏览器发起 HTTP 请求报文。
5.服务器返回 HTTP 响应报文。
6.关闭 TCP 连接（四次挥手）。
7.浏览器解析文档资源并渲染页面。
image.png
什么是DNS域名解析？
DNS（Domain Name System）是 域名系统 的英文缩写，提供的服务是用于将主机名和域名转换为 IP 地址的工作
- 浏览器根据地址，在 自身 的缓存中查找DNS（域名服务器）的解析记录，如果有则直接返回 IP 地址。如果没有，则查找 操作系统中host文件 的DNS解析记录，如果有也就直接返回IP地址。
- 如果在1的条件上（自身缓存没有，操作系统host文件也没有解析记录），则直接向该 域名服务器 发起请求解析这个域名。
- 先向 本地域名服务器 中请求，让它解析这个域名，如果解析不了，则向 根域名服务器 请求解析。
- 根服务器 给 本地域名服务器 返回一个 主域名服务器 。
- 本地域名服务器 向 主域名服务器 发起解析请求。
- 主域名服务器 接收到解析请求后，查找并返回域名对应的域名服务器的地址。
- 域名服务器会查询存储的域名和 IP 的 映射关系表 ，返回 目标 IP 记录 以及一个 TTL（Time To Live）值 。
- 本地域名服务器接收到 IP 和 TTL 值，进行缓存，缓存的时间由 TTL 值控制。
- 将解析的结果返回给用户，用户根据 TTL 值 缓存 在 本地系统 缓存中，域名解析过程结束。
更详细的解释：https://juejin.im/post/5c88b8f7518825068d1d1d7e#heading-0
image.png
TCP三次握手
TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。简单来说，它的作用就是将数据流从一台主机可靠地传输到另一台主机。
- 第一次握手：起初两端都处于
CLOSED关闭状态，Client将标志位SYN置为 1，随机产生一个值seq = x，并将该数据包发送给Server，Client进入SYN-SENT状态，等待Server确认。 - 第二次握手：
Server收到数据包后由标志位SYN = 1得知Client请求建立连接，Server将标志位SYN和ACK都置为 1，ack = x + 1，随机产生一个值seq = y，并将该数据包发送给Client以确认连接请求，Server进入SYN-RCVD状态，此时操作系统为该TCP连接分配 TCP 缓存和变量。 - 第三次握手：
Client收到确认后，检查seq是否为x + 1，ACK是否为 1，如果正确则将标志位ACK置为 1，ack = y + 1，并且此时操作系统为该TCP连接分配TCP缓存和变量，并将该数据包发送给Server，Server检查ack是否为y + 1，ACK是否为 1，如果正确则连接建立成功，Client和Server进入established状态，完成三次握手，随后Client和Server就可以开始传输数据。
TCP三次握手
