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 <select> element, with some dynamic filtering done with an ngIf. In short the code looks like this:

    <select>
      <ng-container *ngFor="let option of options">
        <option
          *ngIf="true"
          [ngValue]="option.value"
        >
          {{ option.displayText ?? 'Please select' }}
        </option>
      </ng-container>
    </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 <option> element (aka removing the <ng-container>) 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 <ng-container>s inside <select> elements, as a simple list of <div>s load fine in Firefox (https://stackblitz.com/edit/angular-akq8zj?file=src/main.ts):

    <ng-container *ngFor="let option of options">
      <div *ngIf="true">
        {{ option.displayText ?? 'Please select' }}
      </div>
    </ng-container>

In short, there seem to be a performance bug specific to Firefox with the way Angular handles <ng-container> elements within <select>

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

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)

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 😀