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