angular / angular/components

MdSelect and MdAutocomplete slow initial render w/ large number of options

Open
#5,113 24 comments 21 reactions 0 assignees View on GitHub
area: material/autocomplete area: material/select G P2 perf
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

For both `MdSelect` and `MdAutocomplete`, the initial render of the component (in the closed state) is very slow even though the panels are closed. We should ensure that any work related to the options is deferred until the panel is opened.

To reproduce this, simply modify the demos to render 500 `md-select` each with 500 options each (there is no problem if there are 500 selects with 1 option each).

Contributor guide

Open the contributing guide

Research direction

Start by modifying the component demos to reproduce 500 MdSelect instances with 500 options each, then trace the initial closed-state rendering path for MdSelect and MdAutocomplete. Done means option-related work is deferred until a panel opens, while the components still render and function correctly when opened and the large-option reproduction is responsive.

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.