渲染数据一、Dom的回流，重绘，映射

/*

* Dom回流：（重排reflow）：是指html文档结构发生改变（增加删除元素，位置改变等。。），然后浏览器重新渲染html页面

* Dom重绘：是指某一个元素的部分样式变了，浏览器只需要渲染那些改变的样式。例如：背景颜色

* Dom映射：js中获取的元素与html文档当中相对应的元素是呈映射关系，无论样式的改变还是节点的增删,只要html当中元素改变，相对应的js当中获取相应的元素也会跟着改变

* */

var ary = [{

"content": "css是层叠样式表",

"title": "css"

},

{

"content": "html是标记性语言",

"title": "html"

},

{

"content": "js是一门编程语言",

"title": "js"

},

]

var oUl = document.getElementById("uls");

var oLi = oUl.getElementsByTagName("li");

console.log(oLi);

for(var i = 0; i < oLi.length; i++) {

oLi[i].onmouseover = function() {

this.style.backgroundColor = "red";

}

oLi[i].onmouseout = function() {

this.style.backgroundColor = "";

}

}

//一、

//1.动态绑定数据 优势：不会影响原来的页面节点。缺点：使Dom多次回流，消耗内存

// for(var j = 0; j < ary.length; j++) {

// var cur = ary[j];

// var lis = document.createElement("li");

// lis.innerHTML ="<span>"+cur.title+"</span>";

// oUl.appendChild(lis);

// }

//2.字符串拼接的方式绑定数据 优点：Dom只回流一次省内存。 缺点：会影响原来页面的节点

// var str = "";

// for(var j = 0; j < ary.length; j++) {

// var cur = ary[j];

// str += "<li>";

// str += cur.title;

// str += "</li>";

// }

// oUl.innerHTML+=str;

//3.文档碎片 优点节省内存，不会影响原来页面的节点

// var frg = document.createDocumentFragment();

// for(var j = 0; j < ary.length; j++) {

// var cur = ary[j];

// var lis = document.createElement("li");

// lis.innerHTML+= cur.title;

// frg.appendChild(lis);

// }

// oUl.appendChild(frg);

// frg = null;

//二、Dom映射

var ary = Array.prototype.slice.call(oLi);

ary.sort(function(a, b) {

return parseInt(a.innerHTML) - parseInt(b.innerHTML);

});

var frg = document.createDocumentFragment();

for(var j = 0; j < ary.length; j++) {

frg.appendChild(ary[j]);

}

oUl.appendChild(frg);

frg = null;