angular / angular/components

Autocomplete slow to update with large data sets after material beta 12

Offen
#7,749 18 Kommentare 17 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/autocomplete P4 perf
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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`

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Autocomplete-Reproduktion im verlinkten Plunker und verwende die ausführliche Protokollierung der Chrome DevTools, um beta.12 mit beta.11 zu vergleichen. Verfolge die Listener-Erstellung beim Öffnen, Filtern und Leeren der Liste; fertig ist die Aufgabe, wenn große Optionsmengen nicht mehr die gemeldete listenerbedingte Verzögerung verursachen und die Zeiten der Event-Handler mit der älteren Version vergleichbar sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend, performance
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.