CODEWITHSUNDEEP
jqueryperformancelive
Amra
Amra

Reputation: 25268

Jquery live gets Script causing web browser run slowly alert in IE

I have a block of code that generally works fine except when big lumps of data comes to the document then I get the error mentioned on the title.

I was attaching the click event to each element as you could see on the commented lines, but then I changed all to live as I though it was more effective. Despite the improvement on speed it would still come up with the alert twice asking me to stop the script, before rendering the entire page.

I wonder if there is any possible way of improve the performance on the following block of code (script) so the alert message does not come up when big amount of date its send to this particular page.

NOTE:I reduced the amount of code shown before as there were repeated code. this two left are giving a good example of the functions giving me a problem.

$(document).ready(function () {

//This adds the click event to toggle the next div right under the divLink clicked. 
//Old Code $(".divLink").click(function () { $(this).next('div').slideToggle(); });
$(".divLink").live('click', function (e) { $(this).next('div').slideToggle(); });


//Distribution 
//$(".Distribution").click(function () { $(this).parents().nextAll(".divDistribution").slideToggle(); });
$(".Distribution").live('click',function (e) { $(this).parents().nextAll(".divDistribution").slideToggle(); });

});

Any Ideas an explanation would be very much appreciated.

Thanks in advance.

Upvotes: 0

Views: 756

Answers (3)

Amra
Amra

Reputation: 25268

Eureka!!!

I found why I was getting such a big performance issues using .live on my code.

I first was having the problem mentioned on my question because I was using document.ready+ element.click() to selected elements so it was causing big performance issues to the point of bringing the alert "Stop running this script?".

Then I changed the element.click() for element.live('click',function(){}) because the .live attach a handler to the event for all elements which match the current selector therefore it should a lot quicker but it wasn't.

The reason of the performance issues using .live was I left the statements using .live inside the document.ready(); and therefore it was waiting for the the page to be rendered to attach the handler to the even for all elements.

The solution taking the .live out of the document.ready() as its not needed.

The result The page rendering of the page is now lightening, no matter how big the document is.

Upvotes: 3

Ruslan
Ruslan

Reputation: 10147

Now, you've said there are many elements being assigned the same event listener, I can suggest a workaround is to bind a single event listener to their container, like so (assuming you have a similar structure):

<div class="DistributionContainer">
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
        ...
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
</div>

Bind a click handler to DistributionContainer instead of each .myElement.

$('.DistributionContainer').click(function(e) {
    if (e.target.className=="Distribution")
        $(e.target).parents().nextAll(".divDistribution").slideToggle();
    }
});

here's live example with 300 Distribution elements: http://jsfiddle.net/zCt6X/

Upvotes: 1

T9b
T9b

Reputation: 3502

Welcome to the world of IE.

The Javascript Engine in Internet Explorer is notorious for a severe lack of performance.

You can find much huffing and puffing about it on almost every forum.

MS have introduced this alert - the one that tells the user that "there is a slow running script on the page" (IMHO) because they are embarassed about it how poorly it functions and seek to try to put the blame on website developers. Thankfully discussions are old hat on this because finally MS have thrown in the towel and decided to go all out on web standards in their latest offering. Hopefully these issues will disappear over a short period of time.

I know it's not much of an answer if your job is a internal corporate intranet one, but in the real world most sites redirect IE users and put up a sign saying "download a modern secure browser like FF Chrome or Safari to use this site" - to avoid bad press.

I think this is the root of your issue, not the javascript itself.

Upvotes: 2

Related Questions