[英]How to optimize working with array in the following code in javascript?
Is there a way to make the following code faster? 有没有办法让下面的代码更快? It's becoming too slow, when length of array is more than 1000 records, especially in IE6.
当数组的长度超过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>");
}
}
Minimize the amount of work you do in the loop. 最大限度地减少循环中的工作量。 Don't add stuff to the DOM in the loop, create a string.
不要在循环中向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);
Faster than those by far ( especially in IE!) is to build your string as an array (yes, really) and then concatenate it at the end: 比那些更快( 特别是在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(''));
The $.map()
routine will build an array from the return values of the function you pass. $.map()
例程将根据您传递的函数的返回值构建一个数组。 Here, my function is returning the user string followed by the <br>
. 在这里,我的函数返回用户字符串,后跟
<br>
。 The resulting array is then turned into a string by calling the native join()
routine. 然后通过调用本机
join()
例程将生成的数组转换为字符串。 Especially when you've got like 1000 things to work with, this will be much faster than building a string with repeated calls to +=
! 尤其是当你有一个像1000米的东西的工作,这将是比建立一个字符串重复调用快得多
+=
! Try the two versions and compare! 试试这两个版本并进行比较!
Use a document fragment. 使用文档片段。
You can perform more optimizations, too, like removing that nasty if and creating the nodes yourself. 您也可以执行更多优化,比如删除那些讨厌的并且自己创建节点。
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);
I made a tool to benchmark all the current answers: http://dev.liranuna.com/strager/stee1rat.html 我制作了一个工具来对所有当前答案进行基准测试: http : //dev.liranuna.com/strager/stee1rat.html
ghoppe's and mine seem to be the fastest. ghoppe和我似乎是最快的。
IE6 doesn't support querySelector
, so lookups can be particularly slow. IE6不支持
querySelector
,因此查找速度可能特别慢。 Keep HTML manipulation within loops to a minimum by reducing the number of appends you do, each one has a regular expression run on it to extract the HTML and convert it to a DOM object. 通过减少您执行的追加次数,将循环内的HTML操作保持在最低限度,每个操作都会运行正则表达式,以提取HTML并将其转换为DOM对象。 Also work in some micro optimisations where you can, might improve performance a little especially over thousands of iterations.
也可以在一些微优化中工作,可以在几千次迭代中提高性能。
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.