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