一、前言

当我们给我们的DOM结构改变或者给DOM结构设置样式时，会触发回流和重绘，但不同的样式改变，是否触发重排和重绘是不确定的。我们有必要深度理解重排和重绘，通过减少重排可以提高性能。

了解浏览器的解析渲染机制:

(1).解析HTML，生成DOM树，解析CSS，生成CSSOM树

(2).将DOM树和CSSOM树结合，生成渲染树(Render Tree)

(3).Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

(4).Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

(5).Display:将像素发送给GPU，展示在页面上

二、重排（回流）

当DOM的改变影响元素的几何信息（大小，位置）,浏览器重新计算元素的几何信息（位置）,将其正确的显示在浏览器上，这个过程就叫重排，也叫重绘。

什么情况下会触发重排?

(1).添加或删除可见的DOM元素（display:none;display:block）

(2).元素的尺寸发生变化 (宽度width和高度height,外边框margin,内边框padding)

(3).元素的内容发生变化也会导致元素的几何信息发生变化

(4).元素的位置 (通过定位调整元素的位置)

(5).页面一开始渲染的时候

(6).浏览器的窗口尺寸变化

除此之外，当我们获取一些特定的值时，也会触发浏览器进行回流,如下:

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight, 除此还包括getComputedStyle方法，原理是一样的

三、重绘

元素的外观被改变时，但是不影响元素的排列分布，浏览器将其重新绘制的过程，就叫重绘，如一些css样式，color, 背景色,以及文本方向的修改，阴影的修改

四、如何减少重排?

(1).如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
(2).避免设置多项内联样式
(3).应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
(4).避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
(5).对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
(6).使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
(7).避免使用 CSS 的 JavaScript 表达式

示例1:当我们要对元素的样式进行改变时，可以先将元素利用 display:none 将元素隐藏，减少浏览器重排的次数，减少额外的性能消耗

        <div></div>
        <script>
            const div = document.querySelector('div');
            // 先将元素隐藏
            div.style.display = 'none';
            div.style.width = '100px';
            div.style.height = '100px';
            div.style.border = '10px solid red';
            div.style.background = 'red';
            // 样式设置完毕
            div.style.display = 'block';
        </script>

示例2.当我们动态插入多个节点时，每一次插入节点都会触发一次浏览器的回流，如果我们使用DocumentFragment虚拟节点，就可以减少浏览器的回流次数，总而保证浏览器的性能

        <div></div>
        <script>
            const div = document.querySelector('div');
            const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
            // 创建了虚拟DOM节点
            const fragment = document.createDocumentFragment();

            fruits.forEach((fruit) => {
                const li = document.createElement('li');
                li.innerHTML = fruit;
                fragment.appendChild(li);
            });
            // 一次性将节点插入到 DOM div的后面
            div.appendChild(fragment);
        </script>

运行结果

新增的DOM结果已经添加到div后面

示例3:通过类名合并样式也可以减少重排的次数.

未合并样式之前，通过js 依次对样式进行操作，每操作一次，就有可能进行一次回流或者重绘

        <div></div>
        <script>
            const div = document.querySelector('div');
            // 先将元素隐藏
            div.style.width = '100px';
            div.style.height = '100px';
            div.style.border = '10px solid red';
            div.style.background = 'red';
            // 样式设置完毕
        </script>

当我们合并样式，通过操作类名来设置样式。只进行一次重排和重绘就达到了效果

        <style>
            .active {
                width: 100px;
                height: 100px;
                background: red;
                border: 10px solid red;
            }
        </style>

        <div></div>

        <script>
            const div = document.querySelector('div');
            div.style.background;
        </script>