Petite Vue Performance Significantly Worse then Vue with Large Number of DOM Insertions

[an0nusr]

Petite vue seems considerably slower than vue at rendering a large number of elements at once.

I have a small template that allows authors to write a CSV with their works, and include lists of tags. The template then reads the CSV, and renders each story in a div, with each story having a list of clickable tags. When I tested with a list with several hundred stories (each with 5+ tags), petite-vue (and alpine) took 1.8s+ to render the page. Vue completed it in under a second.

I wrote the same template using different libraries here:

• Alpine: https://github.com/an0nusr/storything
• Vue (no SFC, using templates from HTML): https://github.com/an0nusr/storything/tree/vue-with-html-template
• Vue (SFC, compiled templates): https://github.com/an0nusr/storything/tree/vue
• Petite-vue: https://github.com/an0nusr/storything/tree/petitevue

Of the various options, Vue with SFCs did the best, with Vue without SFCs following closely, and then Alpine and Petite Vue were significantly worse.

I wanted to ask - is this a bug? An inherent issue with the DOM (and somehow a virtual dom can handle bulk insertions more effectively)? Or is there something entirely different at play?

Thank you for any help/explanation.

[emindeniz99]

I think that the reason behind the difference is virtual DOM.

[fparedlo]

Neither Petite-Vue or Alpine were created to outperform other frameworks in 'All Scenarios'. These 2 are created to facilitate small enhancements without having to drop a full on framework. They are tiny in size so their impact is also tiny during the page load.

If what you are looking is to have a full SPA or an app with thousands of elements etc the best think to do is use a JavaScript framework that uses Virtual DOM as this will always be more efficient in those cases.

I would use petite-vue only to enhance current HTML and Vue to create new SPA