Big list and modify sub tree

[francescoagati]

Hi i have aquestion. If i have a big list of 2000 elements, and i need to referesh only the class attribute of one of this element is possible to diff and patching only a subtree, without traverse all the tree. My idea is the first time to generate the tree, and for any modification of single elements mutate the state of tree without recreate it. And after pass to diff and patch only the subtree that are mutate

[Raynos]

It's recommended you not mutate virtual trees as that breaks certain assumptions around caching and optimizations.

There are three general performance techniques you can apply to make something like a big list faster.

• use mercury.partial or vdom-thunk to cache each element in the tree, you avoid re-evaluation the entire tree and will only render & diff one subtree, but you do have to loop over the 2000 children
• use key on each element in this list, this will put virtual-dom in re ordering mode instead of diffing mode, this allows for very efficients moves of elements in the list.
• use a custom widget for performance. @Matt-Esch wrote a biglist widget to efficiently render & update a list. The current biglist implementation uses an old version of the Widget interface but virtual-dom does support embedding custom widgets for performance reasons

As always the best recommendation is to benchmark your app and try these techniques and see what helps.

Also note that in general virtual-dom does not support subtree re-rendering. subtree re-rendering is a complex technique and has been avoided so far.

[francescoagati]

thanks for the reply. big list is a big problem in all libraries of virtualdom or databinding. in this case a kvo like vue.js can be more performant of a virtual dom? when is necessary rerendering a single element of the tree?

[Raynos]

i can't answer that without actually benchmarking it.

[francescoagati]

i have port the infinite scroll example of mithtil (http://lhorie.github.io/mithril-blog/an-exercise-in-awesomeness.html) in mercury. change something for mobile scroll you can see it http://codepen.io/francescoagati/pen/jDhoy

[Raynos]

Nice :)

[francescoagati]

that is the modify version of mithril. i have changed only the scroll with a continuous loop

http://codepen.io/francescoagati/pen/dyjbq?editors=001

[francescoagati]

@Raynos i have resolve the problem of re-rendering only a subtree element. For the initial render i process all the list, and for the sub-render i patch only the dom element that must be rerendered.

this is the example code

http://codepen.io/francescoagati/pen/xDwyE