CODEWITHSUNDEEP
javascriptjquery
Code Junkie
Code Junkie

Reputation: 7788

jQuery ie8 attr poor performance

"I have some html similar to below contained within a loop where the parent id is dynamically generated,

<t:loop>
    <div id="demoid-10132165498794631" class="lineItem-container">
        <div>
            <select/>
        </div>
    </div>
</t:loop>

I'm trying to get the id of the parent element containing class lineItem-container.

I'm using the following script to get the id, 

var id = $("select").parents(".lineItem-container").attr("id").substring(6);

The html can potentially be looped up to 1000 times which causes very poor performance in ie8. My assumption is the performance issue is caused by the attr selector.

JS Log from IE8

Function    Count   Inclusive Time (ms) Inclusive Time %    Exclusive Time (ms) Exclusive Time %    Avg Time (ms)   Max Time (ms)   Min Time (ms)

attr    431,334 21,609.38   12.65   14,406.25   8.43    0.05    2,234.38    0
attr    431,382 20,265.63   11.86   12,203.13   7.14    0.05    31.25   0
ATTR    239,906 20,531.25   12.02   9,125.00    5.34    0.09    8,156.25    0
attr    241,475 11,531.25   6.75    7,312.50    4.28    0.05    31.25   0

Does anybody have any suggestions on how to potentially speed this process up?

Upvotes: 3

Views: 513

Answers (2)

Kevin B
Kevin B

Reputation: 95061

Don't use the attr selector for something as simple as an id.

replace .attr("id") with [0].id

Upvotes: 5

Sushanth --
Sushanth --

Reputation: 55750

Try .closest()

It will get the closest ancestor and not all the parents for the element which might remove the extra overhead.

var id = $("select").closest(".lineItem-container").attr("id").substring(6);

Upvotes: 1

Related Questions