我有一个Web应用程序,其中有多个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>

最佳答案

您可以尝试各种方法,但是IE经过优化,可以通过ID来获取元素,而别无其他(它将元素ID放在隐藏的哈希表中)。

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

这就是我们在ASP.NET应用程序中所取得的成功,尽管您可能正在做其他事情。我至少会调查jmbledsoe所描述的选项,它们可以有所帮助,但是我怀疑您是否会获得想要的性能。

10-04 22:05
查看更多