的JavaScript/jQuery的 - 性能问题

我有某种的webapp在这里，这当然包含的JavaScript和jQuery。在载入时，函数在文本的每个字母周围包含span - 约150个字母。然后用户可以选择字母，并在确认后显示结果。一切都很好，顺利，只有最后一部分真的杀死了表演。的JavaScript/jQuery的 - 性能问题

结果保存在三个数组。点击后，会触发为点击元素添加类的函数（这是确认）。

我做这样的（3次，为每个阵列）：

$.each(myArr, function(i, v){ 
    $(v).addClass("my-class"); 
});

是这样工作的，而是因为我操作DOM很大程度上它杀死的性能。

我在MacBook上使用2.26 GHz和2 GB RAM，我不能够在类已被添加后运行一个简单的提示或任何东西。特别是如果一个阵列真的满了，这会对性能产生负面影响。

我已经尝试优化脚本。我缓存了多次使用过的每个DOM对象，但这在每种情况下都是不可能的（我认为...）。我还使用了诸如.my-class和#my-id而不是span[class = my-class]和span[id = my-id]的选择器来加速所有操作。只有最后一个数组部分是坏的。

有什么办法来优化这部分$.each？缓存或攻击？或者可能使用其他技术？

我不希望脚本超快速 - 但在显示结果后添加简单的工具提示应该是可能的。

来源

2012-07-16 Sven

如果'myArr'是一个jQuery集合，您应该可以执行'myArr.addClass（'my-class'）'。另外，你能否提供一个jsFiddle来说明减速？ – millimoose 2012-07-16 19:58:12

数组包含什么？ – Bergi 2012-07-16 19:58:26

什么似乎是问题是，你造成很多浏览器的回流。每当您对DOM中的对象进行某些更改时（如更改其大小，删除/附加它等），都会发生这种情况。为了防止这种情况发生，您可以：

一次删除所有对象通过删除包含所有对象（这会导致一个回流）的父对象。
进行所有必要的更改，而对象不是DOM的一部分。
将父对象放回到DOM中（这又一次导致重排）。

如果删除父对象造成视觉干扰，你可以改为深克隆它（var clone = parent.cloneNode(true)），使所有更改克隆，然后替换父对象（parent.parentNode.replaceChild(clone, parent)）。请注意，如果对象有任何JavaScript事件侦听器，则需要将这些侦听器重新绑定到克隆的对象。

来源

2012-07-16 20:37:44 bennedich

为什么不Concat的的arraies：

myArr = myArr[0].concat(myArr[1],myArr[2]); 
    $(myArr).addClass("my-class");

我认为它可以更快。

来源

2012-07-16 19:56:33

您将数组中的元素连接起来，而不是数组本身。而且你没有保存结果。另外，如果为每个阵列应用不同的类别，该怎么办？ – 2012-07-16 19:58:25

我想要一个数组运行$（）一次。在这个问题中，我没有看到每个数组的类。如果它需要，它将无济于事。 – 2012-07-16 20:02:04

如果您尝试创建单个数组，请按照以下方式进行：'fullArray = myArr1.concat（myArr2，myArr3）' – 2012-07-16 20:04:18

的JavaScript/jQuery的 - 性能问题

回答

相关问题