All geek questions in one place

JQuery selectors by CSS class in IE are very slow - workarounds?

I have a web application in which I have several elements with class="classA". I want to select and apply a function to all of them. I am doing the obvious thing that $(".classA").each(function () { ... }). This works great in Chrome / Safari / Firefox, but in IE it is very slow. It turns out that IE has serious performance issues when choosing things by CSS class in jQuery.

I was wondering if anyone has any suggestions on good ways to handle this. I cannot use identifiers, because there can be several DOM elements that I want to select.

- EDIT -

Below is my test code.

  • test1 uses document.getElementById("id")and is very fast.

  • test2 uses $("#id")and runs quite slowly.

  • test3 uses $(".class")even slower.

As far as I can tell, in IE8 there is no built-in implementation of document.getElementsByClassName - I get an error when I try to use it.

<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>
+3
source share
3 answers

You can try a lot of things, but IE is optimized for extracting elements by identifier, nothing else (it puts the identifiers of elements in a hash table under covers).

If you create your page using any server technology, you can define a list of elements, and then output a JavaScript array from the identifiers of these elements, and then when the page loads, you can go through this array and collect your elements by ID.

, ASP.NET , - . , jmbledsoe, , , , .

+3

jQuery: :

2 -

CSS , , javascript. , , - "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). , , DOM. C D , , B .

. .

+18

, , - (, DIV), "DIV.classA". jQuery getElementsByTagName.

, . $('DIV.classA', someParent), , .

+1

Source: https://habr.com/ru/post/1750406/

More articles:


All Articles