Why is IE9 taking so long to execute some JQuery?
I have an application that executes this piece of code (JQuery 1.4.2) in an ASPX page for each element in the HTML table (500x)
$(".ArtRow_" + artId).each(function () {
if ($(this).find(".ArtOpen_" + artId).length <= 0) return;
.... };
omitting the line with find makes this page load normally, but with the find:
I did a profile in IE, and 95% of the time, IE is executing the function CLASS ( call stack: find.f.filter.CLASS )
I tried
to no avail (42s)
Anyone a clue? Thanks in advance!
edit: Im convinced now that the each is taking so long. I skipped it, because with empty code block it didn't took 42 s to load . But with some lines of comment int it, it took again 42s, so i guess it was some kind of not very intelligent dead code detection.
on explicit request: the HTML where the ArtRow lives
<tbody>
<tr class="SB_ReceptielijstHeader">
<th>Artikel / Bestelling</th>
<th>Besteldatum</th>
<th>Pr. School</th>
<th>Pr. Levering</th>
<th class="Number">Aantal besteld</th>
<th class="Number">Aantal ontvangen</th>
</tr>
<tr class="SB_ReceptielijstArtikelHeader ArtRow_132109">
<td id="Titel_132109" class="Artikel" colspan="5">
<img src="images/SB/Icons/23-book.png" style="vertical-align:middle"> 9789030170433 - NANO 1</td>
<td class="Number ArtikelTotal">
<input type="hidden" value="132109" class="Artikel_Id">
<input type="hidden" value="" id="ArtLevLn_132109">
<input type="text" value="12" style="text-align:right" size="4" id="Aantal_132109" name="Aantal_132109" maxlength="4">
</td>
</tr>
<tr class="SB_ReceptielijstRow ArtRow_132109 ArtRowInvisible">
<td>Bestelling 81 / Lijn </td>
<td>02/07/2010</td>
<td>24,05</td>
<td>22,85</td>
<td class="ArtOpen_132109 Number">
</td>
<td id="ArtToew__132109" class="ArtToew ArtToew_132109 Number">
<div style="display:none" class="ArtBestLn">
<input type="hidden" value="">
</div>
<input type="text" style="text-align:right" size="4" id="Aantal_" name="Aantal_" maxlength="4">
</td>
</tr>
<tr class="SB_ReceptielijstArtikelHeader ArtRow_134399">
<td id="Titel_134399" class="Artikel" colspan="5">
<img src="images/SB/Icons/23-book.png" style="vertical-align:middle"> 9789045533322 - HANDELWIJS 3 INCL CDROM HERWERKT 2010</td>
<td class="Number ArtikelTotal">
<input type="hidden" value="134399" class="Artikel_Id">
<input type="hidden" value="" id="ArtLevLn_134399">
<input type="text" value="25" style="text-align:right" size="4" id="Aantal_134399" name="Aantal_134399" maxlength="4">
</td>
</tr>
<tr class="SB_ReceptielijstRow ArtRow_134399 ArtRowInvisible">
<td>Bestelling 81 / Lijn </td>
<td>02/07/2010</td>
<td>23,95</td>
<td>23,60</td>
<td class="ArtOpen_134399 Number">
</td>
<td id="ArtToew__134399" class="ArtToew ArtToew_134399 Number">
<div style="display:none" class="ArtBestLn">
<input type="hidden" value="">
</div>
<input type="text" style="text-align:right" size="4" id="Aantal_" name="Aantal_" maxlength="4">
</td>
</tr>
</tbody>
It's slow because it's running that code 500 times.
I assume that's not that answer you're looking for though, so if you could post your HTML structure, we can see if there's a way to optimise the selectors you've used to make it faster.
I can't image the code below being processed differently than the above .find, but you could also try:
$(".ArtOpen_" + artId, this)
Fetching stuff by class however is intensive. There's no native javascript support for that and all nodes have to be examined to figure out which have that class. Executing it 500 times, ...
链接地址: http://www.djcxy.com/p/43672.html