angular / angular/angular

Performance issue in Firefox with ng-container inside a <select>

Offen
#50,233 6 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: core browser: firefox core: ng-template and *microsyntax core: performance
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:

Screenshot 2023-05-05 at 09 48 12

Chrome:

Screenshot 2023-05-05 at 09 49 05

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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

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