DOM優(yōu)化
DOM與JavaScript
-
瀏覽器會把dom與js獨立實現(xiàn)
像兩個獨立的小島
-
js操作dom
從一個島到另外一個島
-
dom的性能
島與島之間的橋，每次通過收取“過橋費”
盡量減少過橋的次數(shù)
-
innerHTML與dom方法對比
window.onload = function() { // 1.頻繁的js+dom操作 // 2.先執(zhí)行完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; } 結(jié)論：通過以上的測試可以看出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操作
-
節(jié)點克隆
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; } 結(jié)論：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,第一次結(jié)果可能高達(dá)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，第一次結(jié)果可能高達(dá)1800多ms； } 結(jié)論，兩者性能提高不多，但是有優(yōu)化作用?
-
元素節(jié)點
盡量用只獲取元素的節(jié)點方法
1.盡量使用獲取元素的方式，而不是既可以獲取元素也可以獲取文本節(jié)點的方式。 childNodes firstChild --> 元素節(jié)點、文本節(jié)點 children firstElementChild --> 獲取元素節(jié)點?
-
選擇API
利用querySelector、querySelectorAll
DOM與瀏覽器
重排：改變頁面的內(nèi)容
重繪：瀏覽器顯示內(nèi)容
-
添加順序
盡量在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'); // } 結(jié)論：性能上有優(yōu)化，但是和測試結(jié)果有待考據(jù)?
-
緩存布局信息
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架構(gòu)的基礎(chǔ)）
