软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Ajax/JavaScript > 有效提升 Javascript 的 DOM 操作效能

有效提升 Javascript 的 DOM 操作效能

  烈火建站学院(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";

    相关阅读
    网友评论
    栏目导航
    推荐软件