jQuery/Sizzle checkContext內存泄漏

Question

在DevTools中用'Profiles'調試我的應用程序時，我發現「分離的DOM樹」在積累。這些分離的節點具有主要由checkContext函數組成的保留樹（來自jQuery - v1.10.1中的sizzle）。

我不知道怎麼用這個進行。這個結果什麼意思？

Answer 1

這實際上是一個bug，沒有理由Sizzle需要掛在上下文節點上，它只是做它，因爲它沒有設置臨時變量後清理。我提交了一個issue for it，修正了它，運行了所有的Sizzle測試，並做了一個pull請求。

如果要修補現有的jQuery或滋滋聲副本：

1. 打開你的jQuery或嘶嘶聲文件

2. 搜索matcherFromTokens功能

3. 裏面找到這段代碼（靠近頂部）：

   matchers = [ function(elem, context, xml) { 
       return (!leadingRelative && (xml || context !== outermostContext)) || (
        (checkContext = context).nodeType ? 
         matchContext(elem, context, xml) : 
         matchAnyContext(elem, context, xml)); 
   } ]; 
   

4. 更改return到var rv =，並在匿名函數的末尾添加checkContext = undefined;，然後return rv;，例如：

   matchers = [ function(elem, context, xml) { 
       var ret = (!leadingRelative && (xml || context !== outermostContext)) || (
        (checkContext = context).nodeType ? 
         matchContext(elem, context, xml) : 
         matchAnyContext(elem, context, xml)); 
       // Release the context node (issue #299) 
       checkContext = null; 
       return ret; 
   } ]; 
   

注意：該代碼分配null到checkContext因爲很明顯這是他們的風格。如果是我，我將分配undefined。

如果在請求/合併過程中發生的修復有問題，我會更新答案。

最好繼續讓Sizzle緩存選擇器，因爲jQuery使用事件委託編譯選擇器的東西，並且你不希望它每次發生相關事件時都必須重新分析和重建匹配器函數，所以它可以弄清楚元素是否匹配它。

---

不幸的是，這不是jQuery保存在已編譯選擇器中元素上的唯一地方。它所做的每個地方都可能是一個可以使用修復的bug。我只有時間追蹤另一個，我也報告並修復了這個問題（等待請求落地）：

如果您搜索「潛在錯綜複雜」您會發現對於:not僞選擇：

pseudos: { 
    // Potentially complex pseudos 
    "not": markFunction(function(selector) { 
     // Trim the selector passed to compile 
     // to avoid treating leading and trailing 
     // spaces as combinators 
     var input = [], 
      results = [], 
      matcher = compile(selector.replace(rtrim, "$1")); 

     return matcher[ expando ] ? 
      markFunction(function(seed, matches, context, xml) { 
       var elem, 
        unmatched = matcher(seed, null, xml, []), 
        i = seed.length; 

       // Match elements unmatched by `matcher` 
       while (i--) { 
        if ((elem = unmatched[i])) { 
         seed[i] = !(matches[i] = elem); 
        } 
       } 
      }) : 
      function(elem, context, xml) { 
       input[0] = elem; 
       matcher(input, null, xml, results); 
       return !results.pop(); 
      }; 
    }), 

的問題是在函數在有條件的經營者:後：

function(elem, context, xml) { 
    input[0] = elem; 
    matcher(input, null, xml, results); 
    return !results.pop(); 
}; 

注意，它不會清除input[0]。這是修復：

function(elem, context, xml) { 
    input[0] = elem; 
    matcher(input, null, xml, results); 
    // Don't keep the element (issue #299) 
    input[0] = null; 
    return !results.pop(); 
}; 

這就是我所有的時間來追查目前。

Answer 2

Sizzle將編譯後的選擇器存儲在選擇器緩存中，缺省情況下最多可存儲50個條目。在做任何選擇之前，您可以通過設置$.expr.cacheLength = 1進行試驗，看看它們是否消失。

這是文檔https://github.com/jquery/sizzle/wiki/Sizzle-Documentation#-internal-api。似乎內部，所以不要依賴它或任何實際的生產代碼。