Destorying modal is slow due to scrollbar reset #1831
Comments
|
The function
What's the length of each node list for selectors 1 to 3? |
|
It's 0 for all of them? My form is huge though, |
|
@Remo this is a performance issue in both the library and your implementation. for things that has 6000 rows, it's better to use a virtual scrolling system, instead of creating all of them in the dom |
|
@emanuelmutschlechner this problem is similar to the clickout issue, the scrollbar should be reset only when it's set in the first place, not always be called in beforeDestroy. |
|
@rinick agree. this function should only be called if the modal is visible |
|
@rinick I'm aware, I didn't think the customer would add that many elements. In reality he just added 198 rows, but there are a lot of nested elements. While it's not very nicely engineered, removing this one call increased the performance by several factors, that's why I thought something is wrong. |
|
seems to improve things for me!
|
* dev: (31 commits) feat(card): support left and right image placement (bootstrap-vue#1981) fix(collapse/toggle): "collapsed" class cleared when component updated (bootstrap-vue#2102) fix(form-file): Add validation of single file (bootstrap-vue#2028) chore(docs): minor update to the b-form-input docs chore(docs): Minor update to b-form-input docs feat(table): Add row-unhovered event (bootstrap-vue#1874) feat(table): Support contextmenu event binding for table rows (bootstrap-vue#2064) docs(table): fix minor typo (bootstrap-vue#2093) feat(table): Support sorting on nested object properties (bootstrap-vue#1868) perf(modal): optimize model.resetScrollbar, resolves bootstrap-vue#1831 (bootstrap-vue#1837) docs: Update images reference section (bootstrap-vue#1999) fix(observe-dom): fix comment typo (bootstrap-vue#2084) chore(modal): trivial word fix in comment (bootstrap-vue#2089) (docs): Fix grammer in Intro readme (bootstrap-vue#2092) fix(modal): prevent scrolling on .modal-content focus, fixes bootstrap-vue#1748 (bootstrap-vue#2060) feat(pagination): added slots for first, prev, next, last, and ellipsis. Fixes bootstrap-vue#1870. (bootstrap-vue#1980) Handle state change on validated fields. (bootstrap-vue#1984) fix(docs): input group prepend slot typo (bootstrap-vue#2059) fix(dependencies): replace opencollective with opencollective-postintall (bootstrap-vue#2067) fix(docs): change b-input-group attribute 'left' to 'prepend' (bootstrap-vue#2017) ...
I've got a component with quite a few nested components. It's some kind of a form builder and one form contains a lot of elements and each elements as well as each row has a few options. Those options I'm hiding by default by using a bootstrap-vue modal component.
That works well and reasonably fast, but when I unload the page, things get insanely slow.
The problem starts in
resetScrollbarwhich is called a lot and eventually causesquerySelectorAllto consume a lot of CPU time. You can see it in the profile below:Is there some way to get around that? Would it be possible to manually call that method if required and disable it by default? I know that I can customize the component and add a switch, but I'm looking for a solution that doesn't require me overriding code which won't get updated in the future. I'm also wondering if it wouldn't be enough to reset the scrollbar if we close one modal instead of doing so when it gets destroyed.
The text was updated successfully, but these errors were encountered: