DOM回流跟重绘问题

什么是DOM的回流

DOM回流(reflows)和DOM重绘(repaints)

回流：当页面上的结构发生改变，浏览器会从新的渲染我们的页面，回流是比较消耗性能的

回流产生的情况

1、添加或者删除可见的DOM元素；

2、元素位置改变；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；

什么是DOM重绘

重绘：当前元素的样式(背景颜色、字体颜色等)发生改变的时候，我们只需要把改变的元素重新的渲染一下即可

重绘对浏览器的性能影响较小，所以 一般不考虑

由于回流 对浏览器的影响比较大，所以我们一般是用文档碎片的方式去解决这个问题的，当我们需要给DOM中添加新的元素的时候，先将其放在一个容器中，然后统一添加，这样就只产生了一次回流

var frg = document.createDocumentFragment();//创建了一个文档碎片:相当于一个容器，把动态创建的li先放到容器中,最后一起添加到页面中(只引发一次回流)
    for (var i = 0; i < 10; i++) {
        var oLi = document.createElement("li");
        oLi.onmouseover = function () {
            this.style.backgroundColor = "#22b909";
        }
        oLi.onmouseout = function () {
            this.style.backgroundColor = "";
        }
        frg.appendChild(oLi);
    }
    oUl.appendChild(frg);

来自珠峰培训的学习经历