[jQuery] why does load cost so much time?
Hi,
recently I changed my ajax returned content format to html pieces, using a load() function with an expect of time decreasing used for dom manipulation.
On the contract, it could be even longer than the previous xml processing time.
After a debugging with firebug, I found the function data() consumes most of time, 90% of the total one. Here's a quick illustration:
<table class="profileTable" cellpadding="0" cellspacing="0" width="100%">
<tbody class="profileTbody"><tr class=""><td class=""><a class="objectLink objectLink-profile">data()</a></td><td class="">165</td><td class="">85.59%</td><td class="">457.185ms</td><td class="">457.185ms</td><td class="">
2.771ms</td><td class="">0.007ms</td><td class="">11.215ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 658)</a></td></tr><tr class=""><td class=""><a class="objectLink objectLink-profile">ajax()</a></td>
<td class="">1</td><td class="">2.86%</td><td class="">15.267ms</td><td class="">17.361ms</td><td class="">17.361ms</td><td class="">17.361ms</td><td class="">17.361ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 2583)</a></td>
</tr><tr class=""><td class=""><a class="objectLink objectLink-profile">fix()</a></td><td class="">1</td><td class="">1.89%</td><td class="">10.122ms</td><td class="">10.122ms</td><td class="">10.122ms</td><td class="">10.122ms</td>
<td class="">10.122ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 2092)</a></td></tr><tr class=""><td class=""><a class="objectLink objectLink-profile">merge()</a></td><td class="">
29</td><td class="">1.6%</td><td class="">8.554ms</td><td class="">8.554ms</td><td class="">0.295ms</td><td class="">0.003ms</td><td class="">6.079ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 1155)</a></td>
</tr><tr class=""><td class=""><a class="objectLink objectLink-profile">classFilter()</a></td><td class="">6</td><td class="">1.5%</td><td class="">8.008ms</td><td class="">8.008ms</td><td class="">1.335ms</td><td class="">
0.012ms</td><td class="">4.04ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 1657)</a></td></tr><tr class=""><td class=""><a class="objectLink objectLink-profile">remove()</a></td><td class="">
3</td><td class="">0.85%</td><td class="">4.524ms</td><td class="">451.542ms</td><td class="">150.514ms</td><td class="">7.582ms</td><td class="">332.348ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 1310)</a></td>
</tr><tr class=""><td class=""><a class="objectLink objectLink-profile">remove()</a></td><td class="">71</td><td class="">0.8%</td><td class="">4.268ms</td><td class="">428.967ms</td><td class="">6.042ms</td><td class="">
6.166ms</td><td class="">7.32ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 1908)</a></td></tr><tr class=""><td class=""><a class="objectLink objectLink-profile">(?)()</a></td><td class="">
2</td><td class="">0.68%</td><td class="">3.633ms</td><td class="">4.378ms</td><td class="">2.189ms</td><td class="">0.116ms</td><td class="">4.262ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 947)</a></td>
</tr><tr class=""><td class=""><a class="objectLink objectLink-profile">find()</a></td><td class="">14</td><td class="">0.52%</td><td class="">2.751ms</td><td class="">19.985ms</td><td class="">1.428ms</td><td class="">0.14ms</td>
<td class="">10.527ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 1464)</a></td></tr><tr class=""><td class=""><a class="objectLink objectLink-profile">append()</a></td><td class="">
5</td><td class="">0.35%</td><td class="">1.843ms</td><td class="">1.843ms</td><td class="">0.369ms</td><td class="">0.04ms</td><td class="">1.186ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 237)</a></td>
</tr><tr class=""><td class=""><a class="objectLink objectLink-profile">removeData()</a></td><td class="">106</td><td class="">0.34%</td><td class="">1.793ms</td><td class="">1.793ms</td><td class="">0.017ms</td><td class="">
0.011ms</td><td class="">0.318ms</td><td class="linkCell"><a class="objectLink objectLink-sourceLink">jquery.js (line 684)</a></td></tr><tr class=""><td class=""><a class="objectLink objectLink-profile">init()</a></td><td class="">
58</td><td class="">0.32%</td><td class="">1.711ms</td><td class="">24.058ms</td><td class="">0.415ms</td><td class="">0ms</td><td class="">10.864ms</td></tr></tbody></table><br clear="all">data() function consumed as much as 85% of time, strikingly beyond of my expectation which should be less than 100ms.
some code:
renderLearning=function(nextUrl,node) {
$('.words').load(nextUrl,function () {
var word=$('#words h1').text();
$('#next_word').click(function () {
renderLearning($('#next_word').attr('href'));
return false;
})
$('#prev_word').click(function () {
renderLearning($('#prev_word').attr('href'));
return false;
})
})
}
your helps are highly appreciated. Thanks very much.
Regards,
--
Samuel(吴焱红)
Blog:<a href="http://wuyanhong.blogspot.com">http://wuyanhong.blogspot.com</a>