Performance issue in Firefox with ng-container inside a <select>
- Vorherrschende Sprache
- TypeScript
- Sterne
- 101k
- Forks
- 27.5k
- Ø Merge
- 1 T. 19 Std.
- Gemergte PRs (30 T.)
- 288
Beschreibung
### Which @angular/* package(s) are the source of the bug?
platform-browser
### Is this a regression?
No
### Description
I have a list of ~2000 entries (US Universities) in a `` element, with some dynamic filtering done with an `ngIf`. In short the code looks like this:
```
{{ option.displayText ?? 'Please select' }}
```
While this works fine in Chrome, this causes Firefox to freeze. Spinning up the Firefox DevTools shows that the native DOM `Node.insertBefore` for each of the 2000 select items take almost 1s, compare to ~300ms in Chrome (x3000 faster).
Firefox:
Chrome:
Playing around with the repro in https://stackblitz.com/edit/angular-f1vhwu?file=src%2Fmain.ts shows that removing the `*ngIf` & moving the `*ngFor` to the `` element (aka removing the ``) works around the issue, although in my case I cannot do that (e.g. pre-filter the `options` object) as I use the `*ngIf` to handle select groups/items.
In addition, this issue seems to be specific to ``s inside `` elements, as a simple list of ``s load fine in Firefox (https://stackblitz.com/edit/angular-akq8zj?file=src/main.ts):
```
{{ option.displayText ?? 'Please select' }}
```
In short, there seem to be a performance bug specific to Firefox with the way Angular handles `` elements within ``
### Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-f1vhwu?file=src%2Fmain.ts
### Please provide the exception or error you saw
```true
Firefox becomes unresponsive and shows the "This page is slowing down Firefox.." banner
```
### Please provide the environment you discovered this bug in (run `ng version`)
```true
I'm on v14 but I've upgraded the StackBlitz to latest and it still happens
```
### Anything else?
Our CEO happens to be using Firefox 😀
Beitragsleitfaden
Rechercherichtung
Beginne mit der verknüpften StackBlitz-Reproduktion in src/main.ts und vergleiche den select/ng-container-Fall mit dem div-Fall in Firefox. Verfolge das Rendering von platform-browser rund um die nativen Node.insertBefore-Aufrufe und überprüfe, dass ein großes gefiltertes oder gruppiertes select in Firefox responsiv bleibt, ohne das gemeldete Verhalten zu ändern.
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
- 35/100