DOM的重绘和回流及代码性能优化

1.DOM的重绘和回流Repaint&Reflow

1.1重绘：元素样式的改变(但宽高、大小、位置等不变)

如outline、visibility、color、background-color等

1.2回流：元素的大小或者位置发生了变化(当页面布局和几何信息发生变化的时候)，触发了重新布局，导致渲染树重新设计布局和渲染。

如添加或删除可见的DOM元素；元素的位置发生变化，元素的尺寸发生变化，内容发生变化(比如文本变化或者图片被另一个尺寸不一样的图片替换);页面一开始渲染的时候(这是无法避免);因为回流是根据视口的大小来计算元素的位置和大小的，所以浏览器的窗口尺寸变化也会引发回流。

注意回流一定会触发重绘，重绘不一定会回流。

2.前端性能优化：避免DOM的回流

2.1放弃传统操作DOM，基于vue/react开始数据影响视图模式

可通过vue或react等框架中的virtual dom/dom diff，避免对DOM的直接操作。

2.2分离读写操作(现代的浏览器都有渲染队列的机制)

style样式

<style>

    #box {

        width: 100px;

        height: 100px;

        background-color: red;

        border: 1px solid yellow;

    }

</style>

body代码

<body>

    <div id="box"></div>

    <script>

        //(1)

        let box = document.getElementById('box');

        box.style.width = '200px'; //大小发生变化，引发一次回流

        box.style.height = '200px';

        box.style.margin = '10px';

        //因为浏览器存在渲染队列机制，如果引发回流的语句挨在一起写，只会引发一次回流

        //(2)

        box.style.height = '300px';

        console.log(box.clientWidth); //不引发回流

        box.style.margin = '20px';

        //中间插入非引发回流语句，打断了任务队列，所以总共回流2次

        //(3)

        box.style.height = '300px';

        box.style.margin = '30px';

        console.log(box.clientWidth); //只引发一次DOM回流

        /*分离读写:就是把能引发回流的"写语句"与不能引发回流的"读语句"分开写，以减少回流次数*/

    </script>

</body>

2.3样式集中改变

style样式

<style>

    #box {

        width: 100px;

        height: 100px;

        background-color: red;

        border: 1px solid yellow;

    }

    .a {

        width: 200px;

    }

</style>

body代码

<body>

    <div id="box"></div>

    <script>

        let box = document.getElementById('box');

        /*批量处理：把元素的多个样式统一修改减少DOM的回流*/

        //(1)直接添加多种样式

        // box.style.cssText = 'width:200pxl;height:200px;';

        //(2)通过添加类名添加多种样式

        box.className = 'a';

    </script>

</body>

2.4缓存布局信息

body代码

<body>

    <script>

        let box = document.getElementById('box');

        //缓存处理(实质上属于分离读写)

        //(1)

        box.style.width = box.clientWidth + 10 + 'px';

        box.style.height = box.clientHeight + 10 + 'px';

        //由于box.clientWidth获取操作，终端了任务队列，上面语句触发两次DOM回流

        //(2)

        let a = box.clientWidth;

        let b = box.clientHeight;

        box.style.width = a + 10 + 'px';

        box.style.height = b + 10 + 'px';

        //先使用一个变量存储获取的数据，再进行写操作，就不会中断任务队列，只触发一次DOM回流。

    </script>

</body>

2.5元素批量修改

body代码

<body>

    <ul id="box">

    </ul>

    <script>

        //批量处理：在ul中动态创建5个li

        var box = document.querySelector('#box');

        //(1)

        for (let i = 0; i < 5; i++) {

            let newLi = document.createElement('li');

            newLi.innerHTML = i;

            box.appendChild(newLi);

        }

        //这种写法循环几次便会引发几次回流不可取

        //(2) 文档碎片

        let frg = document.createDocumentFragment(); //创建一个文档碎片的临时容器

        for (let i = 0; i < 5; i++) {

            let newLi = document.createElement('li');

            newLi.innerHTML = i;

            //创建的li先储存在文档碎片中

            frg.appendChild(newLi);

        }

        box.appendChild(frg);

        frg = null; //对于不用的容器，要进行销毁释放

        //相当于把文档碎片frg中的对象一次性添加到box中只引发一次文档回流。可取

        //(3)模板字符串拼接 (最优)

        let str = ``;

        for (let i = 0; i < 5; i++) {

            str += `<li>${i}</li>`;

        }

        box.innerHTML = str; //只引发一次回流

        //运用ES6的模板字符串，添加标签十分方便，并且能够有效减少文档回流，为最优方法。

    </script>

</body>

2.6动画效果应该使用position属性absolute或者fixed(脱离文档流)

如果使用margin等属性对元素进行定位，会对其他元素的位置造成影响并导致回流。而使用position属性进行定位的元素能够脱离文档流，在一个新的平面上操作，虽然也会引起回流，但是不会影响其他元素，性能更好。

2.7CSS3硬件加速(GPU加速)

比起考虑如何减少回流、重绘，我们更期望的是，根本不需要回流和重绘；transform、opacity、filters...这些属性会触发硬件加速，不会引发回流和重绘。

通常用的比较多的是transform(能用transform改变的样式绝对不用普通样式)。比如用translate属性来移动元素不会引起回流。

缺点：用的多会导致占用大量内存，性能消耗严重。

2.8牺牲平滑度换取速度

简单地说就是动画总移动100px的情况下，每一秒钟移动1px，平滑度高，但是会引发100次回流；每一秒钟移动10px，平滑度相对较差，但是只会引起10次回流。当电脑比较快时可取前者，电脑较慢应取后者。

2.9避免使用table布局

由于table布局要一层一层的嵌套，添加完底层样式，才开始往外一层一层添加样式，不仅不好写样式，而且不利于DOM的性能优化。