建站学院（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"; |