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);

来自珠峰培训的学习经历

你可能感兴趣的:(性能,浏览器,dom)