您当前位置：首页 > web前端 > jscript > 有效提升 Javascript 的 DOM 操作效能

有效提升 Javascript 的 DOM 操作效能

来源：程序员人生发布时间：2014-02-27 18:34:07 阅读次数：3358次

　　建站学院（LieHuo.Net）文档 DOM 效能瓶颈 DOM 操作的效能瓶颈在于画面的重绘。降低重绘的次数就可能提高 DOM 操作效能。

　　减少重绘提升效能对 DOM 操作尽可能浓缩在一次完成

　　范例：使用暂时物件效能较差

以下为引用的内容：
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";

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 玩联盟：突破性六大优势给网站带来盈利

下一篇 Tor.exe是什么进程 Tor.exe程序文件及功能介绍

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点