JQuery Toggle Method Slow on 1000+ UL

Question

Hello Everyone,

I am working on a project where I am building a treeview and in some cases my tree could have a 1000+ child nodes. The problem is its really slow on like a IE7 machine.

I'm not doing any kind of animation or anything, just simply trying to hide the next UL in the item using JQuery's toggle feature. Does anyone have any ideas of how to improve the performance?

Thanks!!

Answer 1

You can try to build at start your own tree object from DOM document.

Just iterate through all elements and nest them in standard attributes and variables. You can make additional parent and children pointers using $(element).get(0).parent = $(parent).get(0);

Then if you want to get specified elements use $.map function.

We used it to prepare something like firebug on a project. It rebuilded all 5000+ nodes portal in 3 sec and provided fast access on ie6+

Answer 2

If toggle is slow, you can set css styles directly via jquery like:

$(".tree_item").click(function(){
  //check the next ul if it is expanded or not
  if(this.next('ul:hidden').length == 0){
    //if expanded hide it
    this.next('ul').css('display', 'none');
  }else{
    //if not shown, show it
    this.next('ul').css('display', 'block');
  }
});

such approach would help. I don't know if it would work faster but give it a try...

Sinan.

Answer 3

I'm not surprised at all that this is slow if your treeview is that big. Silverlight 3 handles this problem with UI Virtualization.

You'll have to roll your own in javascript, but it shouldn't be that hard. Just make a huge blank div that's the size of what the rendered tree would have been, and put it inside a scrollable div, and then only render what should show up. Change it on the onscroll event.