javascript基础六 （DOM优化）

/**
* DOM优化：
* 1：innerHTML与DOM操作方法，那个效率会更高
* chrome：DOM方法要比innerHTML的方法要好
* firefox：正好相反
* 2：cloneNode复制节点要比创建新节点，性能优化的多
* 3：减少DOM的频繁操作
* 4：新的选择器querySelectorAll()
*
* DMON与浏览器
* 1：重排；改变页面的内容
* 2：重绘：浏览器的显示内容
* 3：添加顺序
* 		-尽量在appendChild前添加操作
* 4:合并DOM操作
* 5:缓存布局信息 （用变量来代替dom）
* 6:文档碎片
* 		-createDocumentFragment
*
* DOM与前端模板
*/
var oUl = document.getElementById('ul');

var oLi = document.querySelectorAll("#ul li");

var str = "";
console.time('hello');
for(var i=0;i<5000;i++){
//innerHTML方法
str += "<li>"+i+"</li>";
}
oUl.innerHTML = str;
console.timeEnd('hello');

console.time('DOM');
for(var i=0;i<5000;i++){
//innerHTML方法

//DOM方法
var oLi = document.createElement("li");
oLi.innerHTML = 'li';
oUl.appendChild(oLi);
}
// oUl.innerHTML = str;
console.timeEnd('DOM');

console.time('cloneNode');
var oLi = document.createElement("li");
oLi.innerHTML = "li";
for(var i=0;i<5000;i++){
var newLi = oLi.cloneNode(true);
// oLi.innerHTML = 'li';
oUl.appendChild(newLi);
}
console.timeEnd('cloneNode');