select / <option *ngFor [ngValue]> performance

The performance of creating <option *ngFor [ngValue]> is pretty sad (the syntax described at https://angular.io/api/forms/SelectControlValueAccessor)

  <select [formControl]="control">
    <option *ngFor="let value of values" [ngValue]="value">{{ value }}</option>
  </select>

Reproduction: https://stackblitz.com/edit/angular-ivy-zrphum

See console for times. Angular needs ~25ms to render 100 options. And it gets even worse when you add BrowserAnimationsModule (as in the reproduction). It adds ng-star-inserted class to every option and increases the render time quite a bit. Then you are at ~35ms.

As a comparison just innerHTML’ing 100 options needs ~0.5ms. So if i only have string values, creating the options via innerHTML is 70x faster and works just as well with formControl/ngModel.

Btw. enableProdMode() method has no effect anymore since ivy as the value that it sets to true is not used by ivy’s debug mode. It only removes the “not in prod mode” warning 😄 - so I can’t show you the performance on stackblitz without all the debug overhead.

[sod]

Oh nice. Thank you for having the stamina holding onto that PR for 2 years 😃

[theodorejb]

One reason that selects perform poorly (at least when using ngModel) is that Angular sets the select value and selectedIndex over and over for every single option element that is rendered, rather than setting it once after rendering all the options. This would be fixed by PR #23784.