16

I have a web application that doesn't run correctly in chrome. Works perfectly in Firefox. I have a page with a large numbered of list items, 316 to be exact. Each list item contains a large amount of HTML. My problem is when I want to hide or show these list items.

I have a test page on jsFiddle to show the problem I'm having. I stripped down the HTML page to one unordered list to hold all 316 list items. I have two buttons that simply call jQuery hide or show when clicked. Again this runs fast in Firefox, Opera, even IE, pretty well in Safari but in Google Chrome it can take over 30 seconds which brings up the dialog window asking if you want to kill the page because a script is running to long.

Here is the link to jsFiddle

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

thanks for any input. jmm

2
  • Well that's unusual. Chrome being slower with a dynamic operation. Have you tried profiling it, see what operations it is being slow with?
    – Orbling
    Jan 30, 2011 at 3:08
  • Weird indeed, if you use the Web Inspector to hide it via CSS it takes a long time too, so the problem is not the Javascript. Visibility: hidden is fast, but I'm guessing this doesn't solve your problem. Jan 30, 2011 at 3:37

3 Answers 3

11

Looks like this has nothing to do with jQuery and just is a problem with Chrome hiding an parent element that has a HUGE number of children elements.

This just uses basic javascript to hide the element on document ready:

document.getElementById('sortable-lines').style.display="none";

And it still takes forever after the document is ready.

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

Opened a Chrome bug for this: http://code.google.com/p/chromium/issues/detail?id=71305

2
  • Can you please file a bug in Chrome regarding this? crbug.com/new and let me know the # that you files. I will bring it up with the right team. Performance should be better. Its not acceptable for this to happen, it breaks one of the three s's in Chrome which is "speed" Jan 30, 2011 at 4:11
  • 1
    Your javascript certainly proves its not a jquery issue. Thanks for taking the time to look at this.
    – jmm
    Jan 30, 2011 at 16:28
10

When hiding, removing the element from the DOM is faster than using hide().

var sortableLines = $('#sortable-lines');
$('#hide').click(function() {
    $('#timer').text("Hiding");        
    sortableLines.remove();
});

It is still slow when you append() it back to the DOM.

A possible workaround is to show the first 10 or so items when the show button is clicked, and then setInterval to progressively show them.


Edit: Found another hack:

You have to set the container to overflow: hidden:

#linecontainer { overflow: hidden; }

When hiding, move that element up to far top, by setting margin-top to a big negative number.

$('#hide').click(function() {
    $('#timer').text("Hiding");
    sortableLines.css('margin-top', '-1000000px');
});

When showing, reset its margin-top.

$('#show').click(function() {
    $('#timer').text("Showing");
    sortableLines.css('margin-top', '0');
});

And it shows and hides instantly.

5
  • Thai - Thanks for working on this. My biggest question was why the speed difference in chrome. But I am definitely going to explore setting the margin-top property.
    – jmm
    Jan 30, 2011 at 16:33
  • Thanks for the margin-top hack, works wonderfully. Was running into the same issue in chrome
    – MikeM
    Jun 9, 2011 at 15:45
  • 1
    Something else to add, I had a second situation where margin-top wasn't working, it was shifting the whole list of elements up due to some of my styling requirements. However, position:absolute and top:-10000px worked as a 2nd option
    – MikeM
    Jun 10, 2011 at 20:04
  • The container of that list must have overflow: hidden, so that all other elements below the container won't go up (the container will just act like height: 0 in this case).
    – Thai
    Jun 15, 2011 at 12:17
  • These really should be two separate answers, so each can be voted on its own merit. (If they're both good answers, it means more rep for the answer author, too.) Nov 23, 2015 at 3:36
0

Thanks for the answer above, it works great and speeds up the process.

It doesn't however always work - Works nice when the elements I need are at the top of the list. However, it doesn't show them all if I pick something from the middle of the list.

I believe I know why it misbehaves.

When the value of a long list of elements is set to hide/show the hidden elements are removed from the flow and placed on the bottom of the page in the order they were removed.
This makes removing the elements remarkably fast.

However, trying to make them visible again is a pain on the rendering as chrome has to remember the order in which these items belonged in and seemingly to recompute the values associated.

Other than most other browsers the spot for the component isn't lost so no time is wasted in this unnecessary sorting. The above answer works remarkably well as this avoids Chrome's disordering problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.