Question

我有一个网络应用，其中有几个元素class="classA"。我想为所有这些选择并应用一个函数。我正在做一件显而易见的事，即$(".classA").each(function () { ... })。这在Chrome / Safari / Firefox中运行得很好但在IE中确实很慢。事实证明，当在jQuery中通过CSS类选择事物时，IE存在严重的性能问题。

我想知道是否有人有关于处理这个问题的好方法的建议。我不能使用ID选择器，因为我可以选择多个DOM元素。

- 编辑 -

以下是我的测试代码。

test1使用document.getElementById("id")并且非常快。
test2使用$("#id")而且速度很慢。
test3使用$(".class")甚至更慢。

据我所知，IE8中没有document.getElementsByClassName的原生实现 - 当我尝试使用它时出错。

<html>

    <head>
        <script type="text/javascript" src="jquery-1.4.2.js"></script>


        <script type="text/javascript">


            function test1 ()
            {
                var start = (new Date).getTime();
                for (var i = 0; i < 10000; i++)
                {
                    document.getElementById("test1");
                }
                var elapsed = (new Date).getTime() - start;
                alert("test1 elapsed: " + elapsed);
            }

            function test2 ()
            {
                var start = (new Date).getTime();
                for (var i = 0; i < 10000; i++)
                {
                    var x = $("#test2");
                }
                var elapsed = (new Date).getTime() - start;
                alert("test2 elapsed: " + elapsed);
            }

            function test3 ()
            {
                var start = (new Date).getTime();
                for (var i = 0; i < 10000; i++)
                {
                    $(".test3");
                }
                var elapsed = (new Date).getTime() - start;
                alert("test3 elapsed: " + elapsed);
            }

        </script>

    </head>

    <body>

        <div id="test1">test1</div>

        <div id="test2">test2</div>

        <div id="test3" class="test3">test3 1</div>
        <div id="test3" class="test3">test3 2</div>
        <div id="test3" class="test3">test3 3</div>
        <div id="test3" class="test3">test3 4</div>

        <input type="button" onclick="test1();" value="test1" />
        <input type="button" onclick="test2();" value="test2" />
        <input type="button" onclick="test3();" value="test3" />

    </body>

</html>

Answer 1

查看jQuery: Performance analysis of selectors：

测试2 - 按类
查找元素
虽然CSS类是打算的   你可以在元素之间重复使用   创建一些独特的元素   类名只是为了识别和   通过javascript检索它们。这个   正是我们在这第二次测试的   通过搜索其元素进行测试   class是“p-4781”。我们有四个   备选方案：

A - 使用类选择器
$('.p-4781').html()
B - 使用班级选择器+标签
$('p.p-4781').html()
C - 使用属性搜索+标记
$('p[class="p-4781"]').html()
D - 使用标签搜索+过滤器
$('p').filter('.p-4781').html()
第一次运行此测试后在不同浏览器中的时间，我得到了：
   Firefox Opera    IE6     IE7    Safari
A     2891   641   1718     631      329
B      453    78    313     180       78
C      422   109    578     201      187
D      203   266    375     210       94
上表显示案例B为大多数浏览器的最快选择器（除了Firefox）。这很容易理解为什么案例A效率不高，因为代码必须迭代所有 DOM树的元素。案例C和D. 并不是那么糟糕，但我会说 B应该是首选的目标

因此请使用标记名称和类名称。在旧版浏览器中速度更快。

Answer 2

你可以尝试各种各样的东西，但是IE被优化为通过ID获取元素，没有别的东西（它将元素ID放在哈希表中）。

如果您是通过某种服务器端技术生成页面，则可以确定元素列表，然后输出这些元素的ID的JavaScript数组，然后在页面加载时，您可以遍历该数组并收集您的元素按ID。

这是我们使用ASP.NET应用程序取得的成功的方法，尽管您可能正在做其他事情。我至少会调查jmbledsoe描述的选项，他们可以帮助一点，但我怀疑你会得到你希望的表现。

Answer 3

我不知道这是否有用，但如果你的元素都是相同的标签（例如DIV），你可以使用像“DIV.classA”这样的选择器。 jQuery可以通过调用getElementsByTagName来优化它。

如果您可以指定父元素，例如$（'DIV.classA'，someParent），这将限制搜索内容的范围，这可能会提高性能。

IE中的CSS类的Jquery选择器真的很慢 - 解决方法？

3 个答案:

测试2 - 按类

A - 使用类选择器

B - 使用班级选择器+标签

C - 使用属性搜索+标记

D - 使用标签搜索+过滤器