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

1,515 阅读5分钟

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的性能优化。