Skip to content
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.

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

Slow performance with large sets of data #223

Open
mrkwdwrd opened this issue Aug 14, 2020 · 3 comments
Open

Slow performance with large sets of data #223

mrkwdwrd opened this issue Aug 14, 2020 · 3 comments
Labels
performance Improve the speed and perofrmance.
Projects
Milestone

Comments

@mrkwdwrd
Copy link

Describe the bug
Performance is slow when using checkbox input bound to a model with a large number of records.

To Reproduce
See CodePen below. I have set up a simple form with Vue Formulate inputs populated by an array of 500 records (and have also included native inputs for comparison). The inputs are bound to an array that stores the selected values.

The performance of the checkboxes individually is quite slow (there is a noticeable lag compared to the native inputs) and seems worse when using check/uncheck all. Vue developer tool shows around 1,500 events being emitted from FormulateInput and FormulateForm whenever the values are updated.

https://codepen.io/mrkwdwrd/pen/LYNGaEz

@mrkwdwrd mrkwdwrd added the bug report A submitted bug report, not yet validated. label Aug 14, 2020
@justin-schroeder
Copy link
Member

Not ideal at all. This is technically the same as #171 (checkboxes are technically groups internally) but has a different manifestation to end users so lets leave it open on here for now.

@justin-schroeder justin-schroeder added performance Improve the speed and perofrmance. and removed bug report A submitted bug report, not yet validated. labels Aug 14, 2020
@justin-schroeder justin-schroeder added this to 2.5.0 in Roadmap Sep 25, 2020
@justin-schroeder justin-schroeder added this to the 2.5.0 milestone Sep 25, 2020
@justin-schroeder justin-schroeder moved this from 2.5.0 to 3.0.0 in Roadmap Jan 6, 2021
@justin-schroeder justin-schroeder modified the milestones: 2.5.0, 3.0.0 Jan 6, 2021
@justin-schroeder
Copy link
Member

To help address this issue, 2.5.1 shipped a debouce prop that prevents these kinds of large data sets from being so problematic. To be clear it isn't perfect, but it's a big improvement. Here's the same form as above with a 50ms debounce

https://codepen.io/justin-schroeder/pen/wvojNwV

@anisite
Copy link

anisite commented Apr 6, 2021

With a large form (e.g. >150 fields) we got very high lag while typing on text fields, we fixed it changing v-model into v-model.lazy in input text component.
All is working great now (we also removed debounce after that, it's incompatible)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
performance Improve the speed and perofrmance.
Projects
Roadmap
FormKit
Development

No branches or pull requests

3 participants