[javascript]
elementToWrap.html(
'<div class="frame" style="width: 157px;">' +
elementToWrap.html() +
'<div class="right_shadow">' +
'<div class="shadow_top_right"></div>' +
'<div class="shadow_right" style="height: 93px;"></div>' +
'</div>' +
'<div class="bottom_shadow">'
'<div class="shadow_bottom_left"></div>' +
'<div class="shadow_bottom" style="width: 143px;"></div>' +
'<div class="shadow_bottom_right"></div>' +
'</div>' +
'</div>'
);
[/javascript]
However, when I started using it in my site, page loads seemed sluggish. Especially on the thumbnail pages, with some 20 images to apply the plugin to. I was in for some performance measurements. With the Firefox plugin Firebug this is easy. You surround the code for which you want to measure the execution time with the following code:
[javascript]
console.time('applyShadow');
...
console.timeEnd('applyShadow')
[/javascript]
After which the firebug console will present you with timing in milliseconds for each time the plugin wraps an image with the forementioned divs. It looks as follows on my 2,4GHz quadcore:
In total it adds up to some 100-200ms for the 20 images on my homepage and even more on other pages. I'm afraid that with current browsers - even on Google Chrome you could notice the difference - this kind of offloading html generation to the client-side isn't performant enough. If you want to run a bleeding fast website DOM manipulation should be kept to a minimum. Of course it is still very useful and acceptable when reacting on user interactions (like with the jQuery UI dialogs).
Some very useful tips when it comes to using jQuery and performance can be found over here:
http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
No comments:
Post a Comment