Skip to content

material/stepper: renders content multiple times (10x+); causes slow performance on IE #13990

Closed
@jamesomac

Description

@jamesomac

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The stepper and other Material controls should load and render quickly, and respond quickly to user interaction.

What is the current behavior?

Currently the stepper component and other Material controls are running quite slowly on both startup/page load, and after user input.

What are the steps to reproduce?

I've modified the stepper example from the Material documentation here: https://stackblitz.com/edit/angular-fudhvx?file=app%2Fstepper-overview-example.ts

  1. Open the example
  2. Open the browser's developer console
  3. Click the next button

Expected Result: The text being logged to the console should appear once each time the page is rendered.

Actual result: The text is logged to the console 12-14 times when pressing the next button and 4-8 times when first loading the application. This text logging is attached to a get function whenever the application grabs the label for one control. It appears as if the page is rendering multiple times.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Browsers: Google Chrome 68, 69, 70 and Internet Explorer 11
Angular: 6.4.1, and 7.0.2
Material: 6 and 7
Typescript: 3.1.3

Is there anything else we should know?

The same application runs a lot slower in Internet Explorer than Google Chrome. The issue, however, still exists in both.

In my application there are 12 steps in the stepper with a total of around 60 controls divided between the steps. In Internet Explorer the time elapsed between steps is around one to two seconds.

Metadata

Metadata

Assignees

Labels

area: material/stepperie11This issue is specific to Internet Explorer 11perfThis issue is related to performance

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions