components: Autocomplete slow to update with large data sets after material beta 12
Bug, feature request, or proposal:
When displaying an autocomplete list with a large number of options it is slow to display. It appears that this is caused by 2 event listeners being created for each item in the list. This slowness started after updating to beta 12.
You can see the large number of event listeners being set up if you open the Chrome dev tools and set the logging level to verbose.
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
What is the expected behavior?
Similar performance when using autocomplete with 200+ data sets to older versions of material.
What is the current behavior?
Rendering an autocomplete with a large number of options has a delay, it is even longer when the dev tools are open due to the large number of event listeners being created causing logs to be written to the console
What are the steps to reproduce?
Open dev tools, set console logging to verbose and click the “Click to toggle autocomplete” button . You can also see the behavior by filtering the list, type anything to shorten the length of the list, then clear the input and new event listeners will be created again for each item in the list causing additional slowdown. https://plnkr.co/edit/QhlHy7FrlvQbDeRfncCo?p=preview
What is the use-case or motivation for changing an existing behavior?
Improve performance. Is it not possible to have a single event listener on the parent that catches click events that bubble up? If not do 2 event listeners need to be created for each item in the list?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 4.4.4 Material: beta.12 All browsers
Is there anything else we should know?
Event handler times on beta.11
Clearing out the input box, causing all items to be displayed again
[Violation] 'input' handler took 187ms
Clicking the button to display the autocomplete
[Violation] 'click' handler took 246ms
Event handler times on beta.12 doing the same actions
[Violation] 'input' handler took 1347ms
[Violation] 'click' handler took 1048ms
About this issue
- Original URL
- State: open
- Created 7 years ago
- Reactions: 16
- Comments: 18 (4 by maintainers)
I just spent 2 hours trying to figure out if I broke something performance-related somewhere after updating from material
beta.8tobeta.12. I was comparing the performance between the app on prod and the newly updated dev version and my country autocomplete is definitely causing noticeable lag inbeta.12.I have some form arrays where each internal form object contains a
countryautocomplete (so a whole bunch of options) and adding a few of these autocompletes is making the page really slow.I also see thousands upon thousands of these messages
@mikeomeara1 cheers this solve the issues I had.
@crisbeto I have some good news. Upgrading from v5.0.0 to v5.1.1 solved this problem. All of our autocomplete and select’s are now working as we would expect (and the delays when rendering or opening have gone from 8-10 seconds down to <1 second again).
So, whatever was done during that time seemed to resolve the issue (at least for us).
As usual, truly appreciate your help.
It’s almost exactly the same as yours actually…just with an
onSelectionChangeand async pipe. https://gist.github.com/mikeomeara1/facf01de71bed795b49457ae8bfdde23I just pulled your demo into my app and it’s doing the same thing…taking a VERY long time to load up and reopen. Curious.
#5113 seems related. I didn’t see this problem in beta.10 but it appears to be quite nasty in beta.12.
Will this be addressed in the next beta?