Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jamesomac opened this issue Nov 5, 2018 · 2 comments
Assignees
Labels
area: material/stepper ie11 This issue is specific to Internet Explorer 11 perf This issue is related to performance

Comments

@jamesomac
Copy link

jamesomac commented Nov 5, 2018

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.

@mmalerba mmalerba added needs triage This issue needs to be triaged by the team ie11 This issue is specific to Internet Explorer 11 needs investigation A member of the team needs to do further investigation to determine the root cause perf This issue is related to performance area: material/stepper and removed needs investigation A member of the team needs to do further investigation to determine the root cause labels May 20, 2020
@Splaktar Splaktar changed the title Material controls appearing to render multiple times, slow performance on IE material/stepper: renders content multiple times (10x+); causes slow performance on IE May 30, 2020
@Splaktar Splaktar removed the needs triage This issue needs to be triaged by the team label May 30, 2020
@Splaktar
Copy link
Member

I see the same behavior on Chrome, Edge (Chromium), Firefox, and Safari as far as the stepper causing a lot of extra change detection / re-rendering of its content.

This seems like a duplicate of #14605 or #12817 though.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 30, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: material/stepper ie11 This issue is specific to Internet Explorer 11 perf This issue is related to performance
Projects
None yet
Development

No branches or pull requests

3 participants