DOM映射

通过DOM方法获取的一个元素集合(类数组),这个集合仍然和页面的元素保持着联系,并且这个元素集合会随着页面元素的增加而增加,减少而减少,即使把这个数组转为一个数组,每个元素仍然和页面有联系,这就叫做"DOM映射"

--

回流:

元素的位置发生改变(增加元素,删除元素,移动)引起回流,让整个页面重新渲染一遍,从而造成性能浪费

--

重绘:

元素样式发生改变,就会把当前这个元素重新渲染一遍所以在以后项目中,能用重绘代替的就不用回流,能用一次回流就不用使用多次

--

向页面增加元素的方式

1.动态创建的方式document
.document.createElement,然后一个一个appendChild,会造成多次回流,这样不好,但是他有个好处是不会改变原来的元素(比如不会影响他之前绑定的事件);

2.通过拼接字符串,最后在一次性通过innerHTML,这样只会引起一次回流,这样比较好,但是他会改变原来的元素(比如会影响之前绑定的事件);

3.关键点!"文档碎片",他就是个容器专门来盛放DOM元素的

例子:

var flg=document.createDocumentFragment();
    for (var i=0;i<jsonData.length;i++){
        var oli=document.createElement("li");
        oli.innerHTML=jsonData[i].content;
        oli.className=jsonData[i].class;
        flg.appendChild(oli);
    }
    news.appendChild(flg);
    flg=null;//用完了 没有用了，就清空
}

步骤:
1.先给创建元素 var oli=document.createElement("li")
2.按需求给元素增加一些需要的属性
3.暂时存放在flg(DOM碎片)中,也是appendChild进去的
4.循环完之后,把整flg放到ul中,news.appendChild(flg)
这样就只会引起一次回流