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:
data()16585.59%457.185ms457.185ms2.771ms0.007ms11.215msjquery.js (line 658)
ajax()12.86%15.267ms17.361ms17.361ms17.361ms17.361msjquery.js (line 2583)
fix()11.89%10.122ms10.122ms10.122ms10.122ms10.122msjquery.js (line 2092)
merge()291.6%8.554ms8.554ms0.295ms0.003ms6.079msjquery.js (line 1155)
classFilter()61.5%8.008ms8.008ms1.335ms0.012ms4.04msjquery.js (line 1657)
remove()30.85%4.524ms451.542ms150.514ms7.582ms332.348msjquery.js (line 1310)
remove()710.8%4.268ms428.967ms6.042ms6.166ms7.32msjquery.js (line 1908)(?)()
20.68%3.633ms4.378ms2.189ms0.116ms4.262msjquery.js (line 947)find()140.52%
2.751ms19.985ms1.428ms0.14ms10.527msjquery.js (line 1464)append()50.35%
1.843ms1.843ms0.369ms0.04ms1.186msjquery.js (line 237)removeData()1060.34%
1.793ms1.793ms0.017ms0.011ms0.318msjquery.js (line 684)init()580.32%1.711ms
24.058ms0.415ms0ms10.864ms
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:http://wuyanhong.blogspot.com
