如何在javascript的以下代码中优化使用数组？

有没有办法让下面的代码更快？当数组长度超过1000条记录时，速度变得太慢，尤其是在IE6中

  dbusers = data.split(";");
  $("#users").html("");
  for (i = 0; i < dbusers.length; i++) {
     if ($("#username").val() != "") {
        if (dbusers[i].indexOf($("#username").val()) != -1) {
           $("#users").append(dbusers[i] + "<br>");
        }
     } else {
        $("#users").append(dbusers[i] + "<br>");
     }
  }

dbusers=data.split（“；”）；
$（“#用户”）.html（“”）；
对于（i=0；i”）；
}
}否则{
$（“#用户”）.append（dbusers[i]+“
”）；
}
}

尽量减少循环中的工作量。不要在循环中向DOM添加内容，创建一个字符串

var dbusers = data.split(";");
var username = $("#username").val();
var userlist = "";
if (username == "") {
    for (i = 0; i < dbusers.length; i++) {
        userlist += dbusers[i] + "<br>";
    }
} else {
    for (i = 0; i < dbusers.length; i++) {
        if (dbusers[i].indexOf(username) != -1) {
            userlist += dbusers[i] + "<br>";
        }
    }   
}   
$("#users").html(userlist);

var dbusers=data.split（“；”）；
var username=$（“#username”）.val（）；
var userlist=“”；
如果（用户名==“”）{
对于（i=0；i”；
}
}否则{
对于（i=0；i”；
}
}   
}   
$（“#用户”）.html（用户列表）；

IE6不支持

querySelector

，因此查找速度可能特别慢。通过减少附加的数量，尽可能减少循环中的HTML操作，每个附加都有一个正则表达式，用于提取HTML并将其转换为DOM对象。也可以在一些微优化中工作，可能会稍微提高性能，尤其是在数千次迭代中

var usersEl = $("#users"); // reduce lookups to the #users element
var result  = "";          // create a variable for the HTML string
var unameVal = $("#username").val(); // do the username value lookup only once
dbusers = data.split(";");
usersEl.html(""); 

// Store the length of the array in a var in your loop to prevent multiple lookups
for (var i = 0, max = dbusers.length; i < max; i++) { 
  if (unameVal !== "") { 
    if (dbusers[i].indexOf(unameVal) != -1) { 
      result += dbusers[i] + "<br>"; 
    } 
  } else { 
    result += dbusers[i] + "<br>"; 
  }
} 
usersEl.html(result);  // Set the HTML only once, saves multiple regexes

var usersEl=$（“#用户”）；//减少对#users元素的查找
var result=”“；//为HTML字符串创建一个变量
var unameVal=$（“#用户名”）.val（）；//仅查找用户名值一次
dbusers=data.split（“；”）；
html（“”）；
//将数组的长度存储在循环中的变量中，以防止多次查找
对于（var i=0，max=dbusers.length；i”；
} 
}否则{
结果+=dbusers[i]+“
”；
}
} 
usersEl.html（结果）；//只设置一次HTML，保存多个正则表达式

比目前（尤其是IE中的更快）的方法是将字符串构建为数组（是的，真的），然后在末尾连接它：

var dbusers = data.split(";"), username = $('#username').val();
$("#users").html($.map(dbusers, function(_, dbuser) {
  if (username == '' || dbuser.indexOf(username) > 0)
    return dbuser + '<br>';
  return '';
}).get().join(''));

var dbusers=data.split（；”），username=$（'#username'）.val（）；
$（“#users”）.html（$.map（dbusers，function（#，dbuser）{
如果（用户名=“”| | dbuser.indexOf（用户名）>0）
返回dbuser+“
”；
返回“”；
}).get（）.join（“”））；

---

$.map（）

例程将根据您传递的函数的返回值构建一个数组。这里，我的函数返回用户字符串，后跟

。然后，通过调用本机

join（）

例程将生成的数组转换为字符串。特别是当您有1000件事情要处理时，这将比通过重复调用

+=

构建字符串快得多！尝试这两个版本并进行比较

使用文档片段

您还可以执行更多的优化，比如删除那些讨厌的if并自己创建节点

var frag = document.createDocumentFragment(),
    dbUsers = data.split(';'),
    dbUsersLength = dbUsers.length,
    curDbUser,
    usernameVal = $('#username').val();

for(i = 0; i < dbUsersLength; ++i) {
    curDbUser = dbUsers[i];

    if(curDbUser.indexOf(usernameVal) !== -1) {
        frag.appendChild(document.createTextNode(curDbUser));
        frag.appendChild(document.createElement('br'));
    }
}

$('#users').empty().append(frag);

var frag=document.createDocumentFragment（），
dbUsers=data.split（“；”），
dbUsersLength=dbUsers.length，
库德布泽，
usernameVal=$（'#username'）.val（）；
对于（i=0；i

我制作了一个工具来衡量所有当前答案：

---

ghoppe's和我的似乎是最快的。

第3页中的强制性“不要使用IE6”评论。。。2.1…欢迎来到SO@stee1rat。数据来自哪里？你知道哪一部分是慢的吗？谢谢你，佩卡！数据来自该公司的mssql服务器。这只是一个登录列表。+1许多小DOM插入比一个大DOM插入慢得多。哇，我太慢了。不应该在电视上看《超人归来》，反正它很烂：-）这不是一个很好的主意-在IE中创建这样的字符串速度非常慢。IE6对于重复的字符串连接来说是绝对糟糕的。始终将大字符串构建为数组，并在最后将（）连接在一起@尖头：我没意识到IE6中的字符串连接是如此糟糕。我想我今天学到了一些新东西：-）@Andy很高兴能帮上忙-我鼓励你尝试一下，因为在这么简单的东西上，浏览器的速度真是太慢了！谢谢你的帮助，但不幸的是，这些建议没有多大帮助。速度仍然非常慢。。实际上，我可以在服务器端生成此列表，同时发出ajax请求并获得完整的html以将其放在页面上，但问题是我想在页面上添加过滤功能，这就是为什么我必须在内存中存储带有名称的数组。我知道此线程现在已经完成，@AndyE，但我注意到，您在for循环的每次迭代中都设置了HTML。这使得它比@stee1rat的原版还要慢。我肯定这只是一个打字错误。你的代码不正确。传递给回调函数的第一个参数是数据，而不是索引；删除您的

，

。另外，

$.map

如果传递了数组，则返回一个数组，而不是jQuery对象，因此也要删除

.get（）

。