Skip to content

Render time of list of components increases in dev mode after each render #5174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
itsMapleLeaf opened this issue Mar 12, 2017 · 7 comments
Closed

Render time of list of components increases in dev mode after each render #5174

itsMapleLeaf opened this issue Mar 12, 2017 · 7 comments
Labels
improvement

Comments

@itsMapleLeaf
Copy link
Contributor

itsMapleLeaf commented Mar 12, 2017 •
edited
Loading

Vue.js version

2.2.2

Reproduction Link

https://jsfiddle.net/Kingdaro/1jpsbjz9/

Steps to reproduce

Toggle the list of elements on and off.

What is Expected?

Consistent speed between component list re-renders.

What is actually happening?

With "use component" unchecked: rendering is instantaneous.

With "use component" checked: rendering the components takes longer and longer each time the elements are rendered.

Tested in Firefox, Edge, Chrome and Opera. It seems to be most noticeable with Chrome and Opera.

This does not appear to happen in production mode, but cases like this during testing will mean eventually waiting full seconds for many components to render.
@fnlctrl
Copy link
Member

fnlctrl commented Mar 12, 2017

Hi, thanks for filling this issue.
Good rendering speed is way too broad, and without a benchmark comparison between other frameworks we cannot settle on a reasonable definition of Good.
Vue has always been dedicated to improving rendering performance, but unfortunately this issue can't really help us improve anything, since it's more of a complaint rather than constructive ideas on what exactly can be improved, so I'm closing it.

@fnlctrl fnlctrl closed this as completed Mar 12, 2017
@itsMapleLeaf
Copy link
Contributor Author

That's fair. I'll clarify, then: the rendering speed should be consistent between renders, fast or slow, but it's taking more and more time each time the list of elements are being rendered. This leads me to believe there's some sort of memory leak somewhere, where extra function calls are being done on data that should have been GC'd already.

@posva
Copy link
Member

posva commented Mar 12, 2017 •
edited
Loading

Creating 1000 stateful components is obviously slower than creating 1000 spans. Also make sure to use the minified version when benchmarking, please

@itsMapleLeaf
Copy link
Contributor Author

itsMapleLeaf commented Mar 12, 2017 •
edited
Loading

That's not the issue.

...it's taking more and more time each time the list of elements are being rendered.

Check the "use component" box, and toggle the components about a dozen times to get a good idea of what I'm talking about here. The rendering of the components gets progressively slower each time.

And I mentioned that this doesn't happen with the production build, but the possibility of a memory leak of some kind is what pushed me to report this.

@posva
Copy link
Member

posva commented Mar 12, 2017

Ok, sorry for that, the title is so misleading. There's indeed a strange increase of render time that only happens on dev mode. I checked and there's no memory leak.

@posva posva reopened this Mar 12, 2017
@itsMapleLeaf
Copy link
Contributor Author

It's difficult issue to find and describe, so no worries.

@itsMapleLeaf itsMapleLeaf changed the title Performance bottleneck in rendering lots of component elements Progressive performance decrease in component renders over time Mar 12, 2017
@posva posva changed the title Progressive performance decrease in component renders over time Render time of list of components increases in dev mode after consecutive toggling Mar 12, 2017
@itsMapleLeaf itsMapleLeaf changed the title Render time of list of components increases in dev mode after consecutive toggling Render time of list of components increases in dev mode after each render Mar 13, 2017
@yyx990803
Copy link
Member

This seems to be caused by calls to window.performance.measure. Might have leaking calls somewhere.

awamwang added a commit to awamwang/vue that referenced this issue Mar 16, 2017
@awamwang
Merge branch 'dev' of https://github.com/vuejs/vue into dev
b63e816 
* 'dev' of https://github.com/vuejs/vue: (118 commits)
  [weex] Support unary and left open tags (vuejs#5052)
  [release] 2.2.4
  [build] 2.2.4
  fix perf measure regression for nested components of the same name (fix vuejs#5181)
  [release] 2.2.3
  [build] 2.2.3
  perf code coverage
  improve camelCase prop warning message
  warn when template contains text outside root element (vuejs#5164)
  Warn when not passing props in kebab-case (vuejs#5161)
  turn off perf timeline measuring by default + reduce its impact on dev time perf (fix vuejs#5174)
  v-bind object should have lower priority than explicit bindings (fix vuejs#5150)
  fix custom directive arg fall through (fix vuejs#5162)
  formatting tweaks
  refactor create-component
  fix wrong order of generate modifier code (vuejs#5147)
  fix v-on unit test (vuejs#5144)
  fix vuejs#5121: parse content in textarea as plaintext (vuejs#5143)
  [release] 2.2.2
  [build] 2.2.2
  ...

# Conflicts:
#	dist/vue.runtime.common.js
#	src/core/vdom/helpers/update-listeners.js
@kazupon kazupon mentioned this issue Mar 20, 2017
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@yyx990803 @posva @fnlctrl @itsMapleLeaf