angular / angular/angular

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

Open
#50,233 6 comments 1 reaction 0 assignees View on GitHub
area: core browser: firefox core: ng-template and *microsyntax core: performance
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction in src/main.ts and compare the select/ng-container case with the div case in Firefox. Trace platform-browser rendering around the native Node.insertBefore calls and verify that a large filtered or grouped select remains responsive in Firefox without changing the reported behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.