DOM优化
DOM与JavaScript
-
浏览器会把dom与js独立实现
像两个独立的小岛
-
js操作dom
从一个岛到另外一个岛
-
dom的性能
岛与岛之间的桥，每次通过收取“过桥费”
尽量减少过桥的次数
-
innerHTML与dom方法对比
window.onload = function() { // 1.频繁的js+dom操作 // 2.先执行完js操作然后一次性添加做dom操作。 var oDiv = document.getElementById('divTyping'); var str = ""; // console.time('hello'); // for (var i = 0; i < 5000; i++) { // oDiv.innerHTML += 'a'; // } // console.timeEnd('hello'); // 谷歌下测试 时间：166.23779296875ms; console.time('hello'); for (var i = 0; i < 5000; i++) { str += 'a'; } oDiv.innerHTML = str; console.timeEnd('hello'); // 谷歌下测试 时间：0.22900390625ms; } 结论：通过以上的测试可以看出2的效率更高。window.onload = function() { // 1.单独的dom操作的性能 // 2.单独的javascript操作的性能 var oUl = document.getElementById('ul1'); var str = ""; // console.time('hello'); // for (var i = 0; i < 5000; i++) { // var oLi = document.createElement('li'); // oUl.appendChild(oLi); // } // console.timeEnd('hello'); // console.time('hello'); for (var i = 0; i < 5000; i++) { str += '<li></li>'; } oUl.innerHTML = str; console.timeEnd('hello'); } chrome：dom方法要比innerHTML性能要好 其他浏览器：innerHTML要比dom方法性能要好
减少DOM操作
-
节点克隆
cloneNode
window.onload = function() { // cloneNode性能测试 var oUl = document.getElementById('ul1'); var str = ""; // console.time('hello'); // for (var i = 0; i < 5000; i++) { // var oLi = document.createElement('li'); // oLi.innerHTML = 'li'; // oUl.appendChild(oLi); // } // console.timeEnd('hello'); // 测试完成时间：22.596923828125ms; console.time('hello'); var oLi = document.createElement('li'); oLi.innerHTML = 'li'; for (var i = 0; i < 5000; i++) { var newLi = oLi.cloneNode(true); oUl.appendChild(newLi); } console.timeEnd('hello'); // 测试完成时间：5.889892578125ms; } 结论：cloneNode性能稍微好一些
-
访问元素集合
尽量用局部变量
window.onload = function() { // 局部变量的性能测试 var oUl = document.getElementById('ul1'); var str = ""; var aLi = oUl.getElementsByTagName('li'); for (var i = 0; i < 5000; i++) { var oLi = document.createElement('li'); oLi.innerHTML = 'li'; oUl.appendChild(oLi); } // console.time('hello'); // for (var i = 0; i < aLi.length; i++) { // aLi[i].innerHTML = 'li'; // } // console.timeEnd('hello'); // 测试完成时间：hello: 882.308837890625ms,第一次结果可能高达2000多ms; console.time('hello'); var len = aLi.length; for (var i = 0; i < len; i++) { aLi[i].innerHTML = 'li'; } console.timeEnd('hello'); // 测试完成时间：hello: 842.797119140625ms，第一次结果可能高达1800多ms； } 结论，两者性能提高不多，但是有优化作用
-
元素节点
尽量用只获取元素的节点方法
1.尽量使用获取元素的方式，而不是既可以获取元素也可以获取文本节点的方式。 childNodes firstChild --> 元素节点、文本节点 children firstElementChild --> 获取元素节点
-
选择API
利用querySelector、querySelectorAll
DOM与浏览器
重排：改变页面的内容
重绘：浏览器显示内容
-
添加顺序
尽量在appendChild前添加操作window.onload = function() { var oUl = document.getElementById('ul1'); console.time('hello'); for (var i = 0; i < 5000; i++) { var oLi = document.createElement('li'); oUl.appendChild(oLi); oLi.innerHTML = 'li'; } console.timeEnd('hello'); // 完成时间：32.947021484375ms // console.time('hello'); // for (var i = 0; i < 5000; i++) { // var oLi = document.createElement('li'); // oLi.innerHTML = 'li'; // oUl.appendChild(oLi); // } // console.timeEnd('hello'); // 完成时间：27.43798828125ms }
-
合并dom操作
利用cssTest
window.onload = function() { // 局部变量的性能测试 var oUl = document.getElementById('ul1'); // console.time('hello'); // for (var i = 0; i < 5000; i++) { // var oLi = document.createElement('li'); // oLi.style.width = '100px'; // oLi.style.height = '100px'; // oLi.style.backgroundColor = 'red'; // oUl.appendChild(oLi); // } // console.timeEnd('hello'); // 完成时间：17.507080078125ms for (var i = 0; i < 5000; i++) { var oLi = document.createElement('li'); oLi.style.cssText = 'width:100px;height: 100px;background-color:red;'; oUl.appendChild(oLi); } console.timeEnd('hello'); // } 结论：性能上有优化，但是和测试结果有待考据
-
缓存布局信息
window.onload = function() { var oDiv = document.getElementById('box'); // setInterval(function() { // oDiv.style.left = oDiv.offsetLeft + 1 + 'px'; // oDiv.style.top = oDiv.offsetTop + 1 + 'px'; // }, 30); var L = oDiv.offsetLeft; var T = oDiv.offsetTop; setInterval(function() { L++; T++; oDiv.style.left = L + 'px';s oDiv.style.top = T + 'px'; }, 30); // 性能上有提升 }
-
文件碎片
createDocumentFragment()
window.onload = function() { var oUl = document.getElementById('ul1'); // console.time('hello'); // fsubor (var i = 0; i < 5000; i++) { // var oLi = document.createElement('li'); // oUl.appendChild(oLi); // } // console.timeEnd('hello'); // 完成时间：6.130126953125ms var oFrag = document.createDocumentFragment(); console.time('hello'); for (var i = 0; i < 5000; i++) { var oLi = document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(oFrag); console.timeEnd('hello'); // 完成时间：5.923828125ms }
DOM与事件（事件委托）
DOM与前端模板（能更好的对逻辑和试图分离，MVC架构的基础）
