建站學(xué)院（LieHuo.Net）文檔 DOM 效能瓶頸 DOM 操作的效能瓶頸在于畫面的重繪。降低重繪的次數(shù)就可能提高 DOM 操作效能。
減少重繪提升效能 對(duì) DOM 操作盡可能濃縮在一次完成
范例：使用暫時(shí)物件 效能較差
| 以下為引用的內(nèi)容： for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item);}效能較佳 |
| 以下為引用的內(nèi)容： var fragment = document.createDocumentFragment();for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); fragment.appendChild(item);}list.appendChild(fragment); |
將 DOM 對(duì)象先設(shè)為 display:none 在進(jìn)行操作 效能較差
| 以下為引用的內(nèi)容： for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item);}效能較佳list.style.display = "none";for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item);}list.style.display = "";使用 classname 取代 style 的多次設(shè)定效能較差element.style.backgroundColor = "blue";element.style.color = "red";element.style.fontSize = "12em";效能較佳.newStyle { background-color: blue; color: red; font-size: 12em;}element.className = "newStyle";快取 DOM 對(duì)象效能較差document.getElementById("myDiv").style.left = document.getElementById("myDiv").offsetLeft + document.getElementById("myDiv").offsetWidth + "px";效能較佳var myDiv = document.getElementById("myDiv");myDiv.style.left = myDiv.offsetLeft + myDiv.offsetWidth + "px"; |
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
