@Mike M.
You're still looping through 3000 jQuery objects and invoking the
setClass() method. I haven't tried it but I suspected it will take
roughly the same time as the show() method. It does seem logical that
the actual showing of the div will be faster if the browser does it
natively. The question which part is the bottleneck - looping through
3000 jQuery objects or actually show()ing them one by one? If I can
experiment and find out, I will - and I'll post the results.
@DBJ The page is not live yet. It's still in dev so I can't share the
URL right now.
@Ryan @Raymond @William Yes, the 3000 divs are initially generated
server-side. And yes, no one really cares to see that many. The only
reason I'm doing it is so search engines can crawl everything.
Initially, I had wanted to put them in a 2-column table instead of
using divs. But the show/hide approach with jQuery would mess with the
layout when hiding individual table cells. So I switched to floating
divs instead. Now that I'm regenerating the HTML instead of using show/
hide, I'm wondering whether I should switch back to table layout
instead. It will also mean not needing those "clearing" divs, which is
nice.
Tangentially related question:
When you have an event listener that you tag to 3000 elements, is it
better to use function names? i.e. instead of
$("div.myDivClass a").click(function(){...});
you should say
var myFunc = function(){..};
$("div.myDivClass a").click(myFunc);
My guess is that the 2nd approach conserves memory but I could be over-
analyzing. What do you guys think?
On Sep 28, 9:39 am, William Chang <diehardb...@gmail.com> wrote:
> For 3000 divs and a lot more in the future, then I recommend you do an
> AJAX to load the content when the user scrolls down.
>
> Examples:
> Slashdot (slashdot.org)
> Google Reader
>
> I know there are jQuery plugins to help you load on scroll, please
> Google.
>
> Good Luck,
> William Changhttp://www.williamchang.orghttp://www.babybluebox.com
>
> On Sep 28, 10:54 am, Raymond Ho <rym...@gmail.com> wrote:
>
> > 3000 divs are freaking huge. it would be better to do it in ajax and
> > load them by chunks instead of putting it all in one huge HTML page.
>
> > On Sep 28, 6:17 pm, "ryan.j" <ryan.joyce...@googlemail.com> wrote:
>
> > > presumably the HTML for these ~3k records are being generated server-
> > > side somewhere - can you not split/group the results before they hit
> > > the browser?
>
> > > On Sep 28, 3:36 am, Sid <nikhil...@gmail.com> wrote:
>
> > > > Thanks, guys.
>
> > > > Michael G., your solution worked like a charm. setTimeout seems to
> > > > mess with the context ("this" is not recognized within the function).
> > > > But that was a minor problem. I just assigned "this" to a global
> > > > variable and used that variable inside setTimeout's function. A couple
> > > > of other solutions were discussed
> > > > here:http://stackoverflow.com/questions/1267275/jquery-show-is-delayed-in-...
> > > > I also liked the approach of using show()'s callback function: $
> > > > ('#foo').show( 0, function() { doOtherThings(); } );
>
> > > > Mike M.,
> > > > Interesting suggestions to use CSS. But even with the CSS approach, I
> > > > doubt if performance will be any better. Looping through each of the
> > > > 3000 divs and calling $(this).show() or $(this).addClass('showing')
> > > > will probably take the same amount of time.
>
> > > > What I ended up doing (and it did speed things up) is not use jQuery
> > > > for hide/show. I now store basic info about all 3000 entities in a JS
> > > > object { ent0 : { property1 : 'abc', property2 : 'xyz' }, ent1 :
> > > > { prop1: '123', ..},..}. The HTML for each div is similar, so I just
> > > > generate a whole new HTML with only the entities I want to show. Then
> > > > replace the existing HTML with the new HTML.
>
> > > > On Sep 27, 2:07 pm, Mike McNally <emmecin...@gmail.com> wrote:
>
> > > > > If there's a need to selectively show particular elements out of a
> > > > > large number, something to try while experimenting with performance
> > > > > improvements is to construct a CSS block dynamically and then update
> > > > > it. You'd put together the CSS as a stream of "#randomDiv0021 {
> > > > > display: block; }" CSS statements, and then just jam the whole thing
> > > > > into a <style> block (which you can access by "id" attribute. I know
> > > > > that you have to update style blocks with a particular function in IE
> > > > > (Firefox lets you use "innerHTML" pretty much anywhere, but IE will
> > > > > throw an "unknown error" exception); it may be "innerText" or
> > > > > "cssText" or something like that. Perhaps jQuery deals with that for
> > > > > us.
>
> > > > > Building and updating a CSS block en masse may or may not be faster
> > > > > than explicit calls to show() and hide(). If you do build a CSS block,
> > > > > make sure you do it by constructing an array of strings and then
> > > > > joinging it together rather than repeatedly appending to a single
> > > > > accumulating string.
>
> > > > > On Sun, Sep 27, 2009 at 1:56 PM, Michael Geary <m...@mg.to> wrote:
> > > > > >> You would expect the "waitingdiv" to appear instantaneously
> > > > > >> because the bottleneck is in show()ing all 3000 divs. But for
> > > > > >> some reason it takes a really long time for it to show up.
> > > > > >> And then it's gone in a flash and all 3000 divs appear.
>
> > > > > > That's because the browser doesn't refresh the page while
> > > > > > JavaScript code is
> > > > > > running. It waits until all your code finishes running and then
> > > > > > refreshes
> > > > > > with all the changes you've made.
>
> > > > > > If you want to see partial results, use setTimeout() to delay part
> > > > > > of your
> > > > > > code:
>
> > > > > > doOneThing();
> > > > > > setTimeout( function() {
> > > > > > doAnotherThing();
> > > > > > }, 1 );
>
> > > > > > Now you will see the results of doOneThing() immediately, before
> > > > > > doAnotherThing() is called.
>
> > > > > > Mike M's tip sounds good for hiding and showing all your divs, but
> > > > > > I think
> > > > > > that leaves the problem of hiding and showing a subset of them
> > > > > > according to
> > > > > > your filter. I don't have any ideas for you on that, though - I'd
> > > > > > have to
> > > > > > see a test page to get a better idea of what it's doing.
>
> > > > > > -Mike
>
> > > > > > On Sat, Sep 26, 2009 at 10:25 PM, Sid <nikhil...@gmail.com> wrote:
>
> > > > > >> I have a page with about 3000 (expected to grow to around 5000)
> > > > > >> floating divs. It's a list of entities.
>
> > > > > >> The page also has filters to allow the user to narrow down (no one
> > > > > >> wants to see 3000 items, of course).
>
> > > > > >> When all filters are removed, I want to show all 3000 divs. After
> > > > > >> every 2 of these divs, I also need to insert an additional div to
> > > > > >> "clear" the float. The problem is that $("div.mydivclass").show();
> > > > > >> is
> > > > > >> taking a really long time. Any performance tips?
>
> > > > > >> The other interesting thing that's happening is this:
> > > > > >> $("body").append(waitingdiv);//Positioned in the center of the
> > > > > >> screen
> > > > > >> with a wait gif and "Please wait" message
> > > > > >> if(appliedfilters.length==0) //No filters. Show all divs
> > > > > >> $("div.mydivclass").show();
> > > > > >> else {
> > > > > >> .. show only divs that meet filter criteria..
> > > > > >> }
> > > > > >> insertClearingDivs();//Insert a div to clear the float after every
> > > > > >> 2
> > > > > >> visible divs
> > > > > >> $("div#waitingdiv).remove();
>
> > > > > >> You would expect the "waitingdiv" to appear instantaneously because
> > > > > >> the bottleneck is in show()ing all 3000 divs. But for some reason
> > > > > >> it
> > > > > >> takes a really long time for it to show up. And then it's gone in a
> > > > > >> flash and all 3000 divs appear. Incidentally, this also happens
> > > > > >> when
> > > > > >> the first filter is applied. In that case, the filter usually
> > > > > >> narrows
> > > > > >> down 3000 items to about 100.
>
> > > > > --
> > > > > Turtle, turtle, on the ground,
> > > > > Pink and shiny, turn around.
