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

Posted 2023-05-09

【中文标题】$(\'.item_name:containes("text")\') 导致 IE8 在页面加载时冻结

【英文标题】：$('.item_name:containes("text")') causing IE8 to freeze on page load$('.item_name:containes("text")') 导致 IE8 在页面加载时冻结

【发布时间】：2013-01-08 22:08:26

【问题描述】：

我在 $(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.

【问题讨论】：

$('.item_name:contains("'+value+'")') 返回一个不是 undefined 的 jQuery 对象。您应该改用length 属性。

写到最后一行，你的意思是$('.item_name:contains("'+value+'")').length > 0？

@undefined，见最后一行，使用 length 也会导致冻结，无论什么是正确的都不能解决它。

@Ezra 你还没有使用length 属性！ if($('.item_name:contains("'+value+'")').length > 0)

@undefined，哎呀..正确。但仍然不影响冻结。将更新我的问题的日期。

【参考方案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基于上下文的过滤器可以减少它。

【讨论】：

那很好，但我无法添加 ID。 （除非你指的是 javascript），我根本无法直接修改 HTML。

你可以试试var context = $('#page_content > .main_content_holder > .main > .cross_sell > .products'); $('.item_name:contains("'+value+'")', context)

hmm，这极大地改善了负载，加载时仍然冻结了 8 秒.. 但它不再使浏览器崩溃。但是，该上下文在整个站点中发生了变化。它需要在具有不同 div 布局的不同页面上处于活动状态。

id 选择器将是最佳解决方案，如果您不能拥有它，我认为这是您能获得的最佳解决方案。否则需要对选择器的进一步改进做进一步的分析。如果您有任何其他想法，也请告诉我。使用最优选择器纯粹是个问题

总之告诉我解决办法，花了好长时间才找到问题