建站學院（LieHuo.Net）文檔 DOM 效能瓶頸 DOM 操作的效能瓶頸在于畫面的重繪。降低重繪的次數就可能提高 DOM 操作效能。
減少重繪提升效能 對 DOM 操作盡可能濃縮在一次完成
范例：使用暫時物件 效能較差
| 以下為引用的內容： for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item);}效能較佳 |
| 以下為引用的內容： 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 對象先設為 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 = "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 的多次設定效能較差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 對象效能較差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網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
