DOM nodes caching for faster swap
Hello, i'm trying to cache dom nodes between updates (i have 2 div elements with 200 child nodes each, and i want to swap between them without recloning the <template> element, is there an idiomatic way to do that?)
I also tried to store the 2 div elements in an array and swap like this <div>{array[activeParent()]}</div> and update the children using array[1].append(<div />) for example, but i wondered if there's a downside to that (memory leak, update bugs, worse performance)
2 Replies
Caching dom nodes is fine from what I've seen.
it's a a common practice when doing performance optimisations.
There are potentially few issues to be cautious about
1. It's best if you are able to reuse the same element for the same chunk of data. If you were to use a different one it could lead to some glitches with transitions, leaking styles or event listeners.
2. You cannot have the same html elements mounted in two places at once, so make sure that the swap happens in order.
3. make sure that the elements are created under a reactive root that is connected to the rest of the ownership tree. this is no that things like context connect
4. individual elements probably should be wrapped with
createRoot just as mapArray does it, do that you can control the disposing manually. otherwise you may kill the reactivity when the swap happensThank you for the help, all the potential issues you pointed out seem to be fine for my use case.
Have a good day!