携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 >>
一、重绘
指将某个 dom 元素，重新渲染一遍，触发重绘时，只会对某一个 dom 元素进行修改，不会影响其他元素以及整个页面的布局。
因此对浏览性能的消耗很小。
dom 的颜色、字体、外貌样式发生改变时，即元素的外观发生变化时就会触发重绘。
二、重排/回流
将整个页面重新渲染一遍，相当于刷新了一次页面。对浏览器又不小的性能消耗，应当尽量避免触发。
触发条件：
- 第一次进入页面时。
- 添加或删除可见的 dom 元素时。
- 元素的位置及页面布局发生改变时。
- 使用动画时。
- 元素本身的尺寸（宽高，内外边距，边框、轮廓）发生变化时。
- 浏览器窗口尺寸（pc、pe端切换，响应式网站，resize事件发生时）发生变化时等等都会触发重排。
Tips：
- 重绘不一定会触发重排，但重排一定触发重绘。
- 多次触发重绘与重排会导致浏览器运行速度下降，影响用户使用体验。
三、优化操作：
一、浏览器自己的优化：
浏览器会维护一个队列，这个队列会将重排重绘再合适的时候批量执行任务，将多次重排重绘改为一次重排重绘
二、我们可进行的优化处理：
尽量减少并将多次 dom 操作合为一次操作。
- 减少 dom 操作。
- dom 操作时直接改变元素的 ClassName。
- 使用文档碎片进行 dom 插入操作。
- 定位布局时多使用 position 的 绝对定位 与 固定定位，因为其脱离了文档流，所以不会触发重排。
- 使用 display 优化：先将父元素设置 none 隐藏，再进行 dom 操作，操作完成以后改回 block 正常布局流，这样就只会触发两次重排与重绘。
- 使用 cloneNode(true of false)he replaceChild 技术，引发一次性的重排与重绘。
- 使用 BFC（块级格式化上下文）创建独立布局区域。
四、浏览器渲染相关知识点补充
1. 从输入 URL 到页面显示内容发生了什么？
- DNS 解析 URL 为 IP。
- 建立 TCP 连接（三次握手）。
- 发送 http 请求。
- 服务端接受请求并将处理结果返回。
- 浏览器接受处理结果并开始渲染页面。
- 断开 TCP 连接（四次挥手）。
- 浏览器开始渲染页面。
2. 浏览器渲染页面过程
- 构建 DOM 树：解析 HTML 并生成 DOM 树。
- 构建 CSSOM 规则树：解析 CSS 并生成 CSSOM 规则树。
- 构建渲染树：将 DOM 树和 CSSOM 规则树合并生成渲染树。
- 构建布局树：计算渲染树中每个节点的位置大小信息并构建布局树。
- 绘制渲染树：将渲染树的每个节点绘制到屏幕上。
