vue.js is slower than react when rendering 1k SVG circles

Created on 10 Mar 2016 · 13Comments · Source: vuejs/vue

Hi guys,

I truly love what you did here, and I was a bit sad to notice that vue.js is slower than react. I still love the framework, and consider this as a performance bug.

Vue.js version

1.0.17

Reproduction Link

https://github.com/anvaka/vue-compare - I made a 10 second screen record to show what I see: https://www.youtube.com/watch?v=ugmVIkFimhs

Steps to reproduce

Open dev tools and compare FPS with react/native DOM implementation

What is Expected?

FPS on vue.js is better/at the same level as react.

What is actually happening?

FPS is lower than expected.

Source

anvaka

Most helpful comment

Update: thanks to your use case, with 598bf0a8aa0ff1a55d014f8db70cad6cc0601c3c and 5bc8cd72370b0bf1b1cdd7182300f1c438c84e9f I've managed to obtain similar FPS with React, and also improved the non-optimized dbmon fps by 20% :)

yyx990803 on 10 Mar 2016

🎉11

All 13 comments

I'd change the title to "vue.js is slower than react when rendering 1000 svg circles"... there are many other scenarios where "vue.js is faster than or as fast as react", e.g. http://mathieuancelin.github.io/js-repaint-perfs/ or https://github.com/krausest/js-framework-benchmark

Also, on my mbp Vue shows fps around 33~35 whereas React around 40, not as drastic on yours, while this could use some improvement, I certainly do not consider this a "performance bug".

yyx990803 on 10 Mar 2016

That's unfortunate, but thanks for response. I'm happy to see that vue.js outperforms in other use cases! On newer macbook I saw 30 fps for vue, and 40 for react.

My use case in mind was rendering graphs with vue.js. Most of the modern browsers can deal with 2k-4k SVG nodes at acceptable FPS.

@yyx990803 any plans on improving performance for this use case?

anvaka on 10 Mar 2016

I would say neither React nor Vue seems suitable for that use case if you are looking for animating several thousand nodes at 60fps - I'd even say SVG would not be a wise choice in that case for performance concerns. Canvas/WebGL would be a much better choice.

yyx990803 on 10 Mar 2016

Well, I do have canvas and webgl implementations too. I can do hundreds of thousands nodes with webgl (e.g. http://anvaka.github.io/pm/). But neither canvas or WebGL stand close to SVG in convenience of use.

anvaka on 10 Mar 2016

It's always a tradeoff between ease of use and extreme perf - although frameworks like React/Vue try to optimize the perf as much as possible, they are simply not designed for such specific use cases - the optimization is centered around typical UI-heavy applications.

For your use case, it sounds D3 would be a better choice?

yyx990803 on 10 Mar 2016

D3 is fantastic, I've been watching it for very long time. I prefer however declarative UI definition over functional/imperative.

This looks easier to me:

<body>
  <svg width='500px' height='50px'></svg>
</body>

Than this:

var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 50);

anvaka on 10 Mar 2016

👍1

yyx990803 on 10 Mar 2016

🎉11

Updated repository and re-measured again. Now it's very close to React indeed!

Hope we can get vue.js closer to native DOM in future :)!

PS: I bought you coffee through https://www.paypal.me/evanyou but if you are in Seattle - I'd be happy to do it again ;).

anvaka on 11 Mar 2016

@anvaka , you'll find yourself driven mad when trying to handle SVG with vue.
Due to the restriction of not supporting camel case tag, you can hardly define a SMIL animation or mask or filter with vue.

I'm considering a plugin to support SVG for vue ... but it seems that would really take effort which probably will end in a special version of vue compiler for SVG.