vue: Application freezes with 10.000 Components [Chrome De-Optimization]

it’s only one array on the wrapper component, containing numbers. there’s not much to set up.

Some observations:

• original benchmark renders after 6.4s for me
• Object.freeze(BENCHMARK_LIST) doesn’t make any difference (as expected, since reactive setup required for this is minimal)
• Adding a :key=“item”` even makes it a tad slower at 6.8s
• using 2.1.1 renders after 3.6s (so a regression perhaps?)

…but that’s all pretty moot when benchmarking the development build…

Using Minified versions (as @posva said, that’s the real benchmark):

2.1.1

2.3s around 1.44s after a couple of runs

2.2.1:

2.2s about 1.366s after a couple of runs

So 2.2 is not slower (no regression) on my machine. Can be further optimized with:

• pre-compiled templates from vue-loader, or
• using functional components

Comparison to Angular

Can’t compare to the angular values from OP as he didn’t provide those benchmarks as a fiddle.

@martinoppitz can you provide numbers with the minified version as well as the angular benchmark setups & code?

Even with your original setup using the development build, I get nowhere near 120s.

Also I don’t see how any of this should her anything to do with the chrome de-optimization discussed in this issue…

…and a 3rd test: The “crash” scenario performs much better in IE11 (!!!):

Far from good as well (but hey, it’s IE11 !!), but it seems we have a de-optimization in Chrome here, so this is likely related to #5012 ?

You can use the minified version: <script src="https://unpkg.com/vue/dist/vue.min.js"></script> to get a real benchmark. Although you should use compiled templates too.

You may want to use functional components in performance-critical scenarios (example). You can also use virtual-scrolling solutions.