关于如何优化 IE 中某些 Jquery 命令性能的提示答案

【问题标题】：Tips on how to optimize performance for some Jquery commands in IE关于如何优化 IE 中某些 Jquery 命令性能的提示
【发布时间】：2010-11-29 14:47:56
【问题描述】：

在 IE8 中显示/隐藏拇指网格非常缓慢。

我有一个拇指，每个拇指上都有一个类别属性和一些切换来显示不同的类别。下面的代码处理显示/隐藏拇指，但这在 IE 中非常慢，有时会抛出“A 脚本很慢”警告。我想没有必要说它在所有其他浏览器中运行得很好。

我的问题是：您能提供一些性能提示吗？甚至可能暗示将那个位重写为纯 Javascript 是否有意义？

$('#cat-tab .categories-list a').live('click', function() {
        var $this = $(this);
        var $target = $('#cat-tab .video-results');
        var $text = $.trim($('span', $this).text());
        $scroll = $(window).scrollTop();

        $('#cat-tab .categories-list a').removeClass('active');
        $this.addClass('active');

        $('#cat-tab .video-results .channel').removeClass('hidden');
        if($text != 'All') {
            $('#cat-tab .video-results .channel[rel!="'+$text+'"]').addClass('hidden');
        }
        $.rePage(true);

        return false;
    });

【问题讨论】：

你在 jQuery 中使用了哪些插件，正如我看到的 $.rePage() 那里。
尝试注释掉脚本的某些部分以确定导致缓慢的部分（我会先注释掉$.rePage(true)）。我们在谈论多少个元素？（$target、$('#cat-tab .categories-list a') 等匹配多少个元素？）
那里的代码运行缓慢对我来说没有多大意义。你怎么知道是那个代码？我会在那里放一些计时器代码（在开头和return之前创建一个日期并检查差异）以确保，因为（除非页面真的很大；其中有多少“.video-results 。频道”元素在那里？）没有太多的工作要做。
protoculous/prototype.js protoculous/effects.js protoculous/dragdrop.js
你们是对的 - rePage() 需要时间 - 我会先研究一下，然后再发布半途而废的问题。

标签： javascript jquery performance internet-explorer

【解决方案1】：

与其费力地从脚本中查找和隐藏每个单独的拇指元素，不如利用样式表为您完成工作：

#categories .channel { display: none; }
#categories.category-all .channel { display: block; }
#categories.category-1 .channel-1 { display: block; }
#categories.category-2 .channel-2 { display: block; }
#categories.category-3 .channel-3 { display: block; }
#categories.category-4 .channel-4 { display: block; }

现在您可以只设置祖先 #categories 元素的 className，并且里面的所有拇指将根据它们是否具有该类别的匹配类来显示/隐藏。

【讨论】：

人们通常认为这很恶心，但是当有大约 200 个不同的“通道”（使用此示例）时有效的方法是在某个静态块中使用“显示：无”样式的 CSS，然后让代码在页面状态更新时使用新规则更新一个单独的 <style> 元素。换句话说，页面直接更新一些 CSS 代码以使特定的“通道”可见。