jQuery的：添加（）的性能;有没有更好的办法？ [英] jQuery: add() performance; is there a better way?
问题描述
我想要做的：组中的所有页面上的类似元件（某一种）到一个对象，我以后可以重复上 - 或者内申请全面改革的每一个元素
What I want to do: Group all the like elements on a page (of a certain kind) into an object which I can later iterate on -- or apply sweeping changes to every element within.
我code是成功地完成了给定的任务，但是，当元件的数目增长到200-300 +则性能急剧下降关和用户已经注意到。我已经分离出code的违规行，想知道是否有实现同样问题的另一种方式。
My code is successful at accomplishing the given task but when the number of elements grows to 200-300+ then the performance drastically drops off and users have noticed. I have isolated the offending lines of code and want to know if there is another way of accomplishing the same problem.
在add（）函数似乎是基于计时器有问题的操作我已经把他们周围。首先来执行该操作所需要的时间是0.001，但增长，直到元件的数量达到300，它需要〜第二对于每个附加元件.1与继续减慢
The add() function appears to be the problematic operation based on timers I have placed around them. At first the time required to perform the operation is .001 but grows until the number of elements reaches 300 and it takes ~.1 of a second for each additional element AND continues slowing down.
我有<一个href=\"http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/\"相对=nofollow>研究（的多）jQuery的性能增强能力，并且实施了他们几个（即3），但他们并没有给我任何有意义的性能提升。令人惊讶的是，这个code 1秒（！）用于Firefox（300+呼吁加（））之内，而Chrome和IE浏览器需要大约10-20x更长或更...
I have researched (and more) for jQuery performance enhancing abilities and have implemented a few of them (namely 3) but they have not given me any meaningful performance increases. Amazingly, this code performs within 1 second (!) for Firefox (300+ calls to add()) while Chrome and IE take roughly 10-20x longer or more...
下面是我的code：
rowsToChange = $([]);
// Grab all the ids greater than whichever one I'm currently looking at:
var arr = $.makeArray($("[id^=stackLocatorLinkFillUp]:gt("+(uniqueID-1)+")"));
for (var i=0; i<arr.length; i++) {
$this = arr[i];
// <<< VARIOUS CONDITIONALS that make this as selective as possible REMOVED >>>
startTimer = new Date().getTime();
// **************************
// PROBLEMATIC LINE FOLLOWS when 200+ records:
rowsToChange = rowsToChange.add($this);
// Grows from .001 to .1xx after 300 iterations
console.log("innertiming:"+(new Date().getTime() - startTimer)/1000);
// **************************
}
最后的结果看起来像这样（通过Chrome检查）：
The end result looks like this (via Chrome Inspector):
[<div style="display:none" id="stackLocatorLinkFillUp1">itemType=BOUND&ccLocale=PERIODICAL</div>,
<div style="display:none" id="stackLocatorLinkFillUp2">itemType=BOUND&ccLocale=PERIODICAL</div>,
...
]
最后，我处理所有这些如下（其中我爱简单的！）：
var superlink = "...new <a> goodness to display for all elements...";
rowsToChange.html(superlink).css("display","block");
这看起来可能是一个有效的解决方案（<一个href=\"http://stackoverflow.com/questions/7242947/is-there-any-difference-in-jquerysel1-addsel2-and-jquerysel1-sel2\">different添加的方法？），但我的 preFER 的继续收集对象的列表在一起，使得最后一行可以工作它的魔力。
This looked like it could be a valid solution (different add method?) but I would prefer to continue gathering a list of objects together so that the last line can work its magic.
（我不是我是指出，以下是不正确的 - 关于级联;感谢'我不是我是'）
(am not i am pointed out that the following is not true -- regarding concatenation; thanks 'am not i am')
这似乎是的add（）操作，因为这似乎是他人所面临的主要问题之一，必须连接字符串。但是，我的转变加（）语句转换成+ =看起来并不像它的工作原理。
It seems like the add() operation must be concatenating strings since that appears to be one of the main problems others face. But transforming my add() statement into += doesn't look like it works.
感谢检查了这一点;
铬：18.0.1025.142米
火狐：11.0
IE浏览器：8.0.7600.16385
Chrome: 18.0.1025.142 m Firefox: 11.0 IE: 8.0.7600.16385
推荐答案
第一观察：添加保存设置previous元素。尝试 rowsToChange = jQuery.merge（rowsToChange，[$本段]）; 而不是
First observation: add saves the previous element set. Try rowsToChange = jQuery.merge(rowsToChange, [$this]); instead.
第二个观察：它好像 rowsToChange 最终会被设置为你那叫一个完全相同的元素 $ makeArray 上。为什么不直接保存原来的设置？
Second observation: it seems as though rowsToChange will end up being the exact same element set as the one you called $.makeArray on. Why not just save the original set?
这篇关于jQuery的：添加（）的性能;有没有更好的办法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
