DOM virtualization with knockoutJS, CSS display:none

Question

I wanted to post a widget I have been working on to create a virtualized list with KnockoutJS, and find out any optimizations that I might be missing.

I am getting mixed answers researching using CSS display:none to virtualize off-screen elements. I have heard that in doing so, you avoid the browser "render" cycle, but the elements still get touched in the "dom" update cycle. In my testing, it seems that setting display:none (by binding knockout visible) certainly sped up adding an initial amount of items.

Finally, in my virtualization binding handler I am currently getting the current viewPort by getting the scroll location and the window height. This allows me to set the in-window index (indexes * rowHeight) to display:block . However, to hide the other non-visible indices, I iterate through and set each to display:none . This is obviously O(n) to perform the entire operation, but I don't see another way around it. Is there a way to optimize this? Would it be better to offload the resetting display:none to a queue, since it is not imperative that it happens right away?

http://jsbin.com/axupap/56/edit

Any insight would be greatly appreciated!

Answer 1

It does not make sense to set the to display none. To achieve better performance use "if" binding, this way element's are removed from the DOM completely, and that's where you get all performance gains, browser needs to do much less work with smaller tree, to repaint and reflow it's much easier.

For example see this Big Scroll demo, if you would putt all items into the tree browser would be crawling.

Answer 2

The best thing you could do on such an inconsistent and worst platform like the web is to make the browser render only the elements which falls in the viewport. I would suggest the following algorithm.

      1) get the current scroll height
      2) compute the index of the element at the top
      3) get the remaining elements (using offsets from top index)
      4) push these to the rendering queue which finally renders the elements.

This way you wouldn't touch the if binding, which is very heavy and re-evaluates all the sibling bindings unnecessarily.

One more thing, do not use knockout foreach bindings or template bindings if you are dealing with large volume of data. instead use pure javascript and the dom API provides you with something called "DocumentFragment" which improves the performance a lot.