memory heep optimize ?

[abshuhuhuhu]

hello,
I've tried to find a lightweight framework for my project.
firstly alpine then petite-vue.
since my project has a big table with lots of cell.
My focus is on memory heep size and smoothy work.
then the problem appeared as the fellowing code:

<!-- vue 3 -->
<ul id="root">
	<li v-for="item in colors">
		<span v-if="item=='red'" v-text="item"></span>
		<span v-else v-text="item+'defer'"></span>
	</li>
</ul>
<script>
const Colorset = {
  data() {
    return {
      colors:"red,green,".repeat(10000).split(',')
    }
  }
}
Vue.createApp(Colorset).mount('#root')
</script>

<!-- petite-vue -->
<ul v-scope>
	<li v-for="item in colors">
		<span v-if="item=='red'" v-text="item"></span>
		<span v-else v-text="item+'defer'"></span>
	</li>
</ul>
<script>
PetiteVue.createApp({
	colors:"red,green,".repeat(10000).split(',')
	})
	.mount()
</script>

in Perfomance monitor of my chrome, reloading the page by F5,
vue 3 -- loaded in <3s; DOM Nodes 80,027; Js heap size 30 MB downfall to 17.1MB after seconds. page relaoded to hit 38MB and downfall to 17.1MB again.
petite -- loaded in 6s; DOM Nodes 212,435; Js heap size 71 MB downfall to 6MB after 40seconds. page relaoded to hit 103MB and downfall to 6MB again.
also the same test for alpine.js done but it burn memory easier to 150MB and after several reload heaps over 1 GB.

So petite amazing me on the downfalled heap size.
however the loading time is more than twice that vue 3 used.
My project is far more complicate than the example above,
So is there a way for petite to run faster or at least the same as vue 3?
In my knowledge, petite is light so it should be theoretically faster then vue , isn't it?

[niutech]

Vue 3 is using Virtual DOM, unlike Petite Vue, so it does not create DOM nodes for every item, thus it renders faster. But VDOM uses more memory, hence bigger JS heap. However, Petite Vue is more lightweight and provides progressive enhancement, so it is better suited for less demanding interactions.