的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的 - 性能問題

回答

相關問題