0

我这里有某种 webapp，它当然包含 JavaScript 和 jQuery。在加载时，一个函数span会围绕文本的每个字母 - 大约 150 个字母。然后用户可以选择字母并在确认后显示结果。一切都很顺利，只有最后一部分真正扼杀了性能。

结果保存在三个数组中。单击后，将触发向单击的元素添加类的功能（这是确认）。

我这样做（每个数组3次）：

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

它以这种方式工作，但是因为我大量操作 DOM，它会降低性能。

我使用的是 2.26 GHz 和 2 GB RAM 的 MacBook，在添加类后我无法运行简单的工具提示或任何内容。特别是如果一个阵列真的满了，这会对性能产生负面影响。

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

有没有办法优化这$.each部分？缓存还是什么？或者也许使用另一种技术？

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

4

2 回答 2

2

问题似乎是你导致了很多浏览器重排。每次您对 DOM 中的对象进行某些更改（例如更改其大小、删除/附加它等）时，都会发生这种情况。为了防止这种情况发生，您可以：

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

如果删除父对象导致视觉干扰，您可以改为深度克隆它 ( var clone = parent.cloneNode(true))，对克隆进行所有更改，然后替换父对象 ( parent.parentNode.replaceChild(clone, parent))。请注意，如果对象有任何 JavaScript 事件侦听器，您需要将它们重新绑定到克隆对象。

于 2012-07-16T20:37:44.750 回答
0

为什么不连接数组：

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

我认为它可以更快。

于 2012-07-16T19:56:33.397 回答