$('.item_name:containes("text")') 导致 IE8 在页面加载时冻结

Question

我在 $(document) 上有一个循环。准备检查一个文本数组，该数组调用一个函数来搜索元素中的每个 sn-p 文本并将其用作选择器。

此代码在 FF、Chrome、IE9+ 等中 100% 工作。但在 IE8 中冻结浏览器。

var setText = function(value)
{
    if(typeof $('.item_name:contains("'+value+'")') != 'undefined'){
      // Do something, it still freezes with nothing set here.
    }
}

// In the real script there maybe upwards of 20 items in this array.
var item_list = new Array('a','b','c');

$(document).ready(function() 
{
    $.each(item_list, function(index, value) {
       setText(value); 
    });
});

我已经禁用了 setText 函数并且它工作正常，所以它不是循环，它似乎是 :contains 选择器。

为什么会这样？我还能怎么做？我无法编辑 HTML 代码本身。

我的想法是我必须使用 jQuery 更改部分 HTML 标记，添加一些 HTML 并更改一些 CSS 值，但我拥有的唯一唯一标识符是 '.item_name' 中的文本。

运行此程序的冻结页面最多包含 3 个单独的“.item_name”实例。根据搜索字符串，其中任何一个都可能成为目标。

我使用的是 jQuery 1.7.1，无法更新。

if($('.item_name:contains("'+value+'")').length > 0){ // Also causes it to freeze.

Answer 1

这看起来是选择器性能问题。

我会建议以下步骤
1.在包含所有item_name元素的容器中添加一个像id="crazy-products"这样的id
2.将$('.item_name:contains("'+value+'")')改为$('.item_name:contains("'+value+'")', $('#crazy-products'))

IE8 或更低版本没有document.getElementsByClassName 实现，因此它会查看文档中的所有元素以查看是否应用了给定的过滤条件。如果我们可以将上下文传递给过滤条件，我们可以缩小文档查找的范围，从而提高页面的性能。

为了更好地理解问题，您可以查看 jquery.js 行号 4215 (found = filter( item, match, i, curLoop )) 并查看数组 curLoop 的大小，在您的情况下它看起来非常大，通过传递一个 id基于上下文的过滤器可以减少它。