Buttons initialize very slowly since beta.12

[heddendorp]

Bug, feature request, or proposal:

Since the beta.12 update it seems like mat-buttons take a long time to render.

What is the expected behavior?

Same speed or better as beta.11

What is the current behavior?

I have a paginated md-table with 50 rows and 3 buttons per row, since the last update switching pages takes significantly longer, it works fine if I remove the buttons.

What are the steps to reproduce?

Update to beta.12 and render many buttons at once

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

@angular/cli: 1.4.5
node: 8.2.1
os: darwin x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.4.5
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/flex-layout: 2.0.0-beta.9
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/platform-server: 4.4.4
@angular/router: 4.4.4
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.5.3

Is there anything else we should know?

[willshowell]

Does the same thing happen if you replace <button mat-button> with just <button>?

[heddendorp]

Yeah it seems to be significantly faster without mat-button @willshowell
I measured performance and the frame after the click takes 1.23s with mat-buttons and 0.46s without, it's also 0.49s on the latest deployed version which uses beta.11
The time is also 1.2s when running the app in optimized mode and about 0.53 when only displaying 25 rows as well as 3.2s when displaying 200

[doginthenight]

This could be related to issue #4221.
For me the violation did not occur with previous versions of Angular Material 2 but suddenly started with beta.12.

[jelbourn]

Might be related to touch-based ripples that have since been reverted

[heddendorp]

I will try once the next beta comes @jelbourn
Assuming that's soon for ng5 as well ;)

[thw0rted]

I just filed #8838 which I think could be related? It's a ripple issue as well.

[devversion]

Performance for ripples should be much better now. The ripples now use passive event listeners, which should improve the performance of the ripples at initialization and runtime.

Also we updated the ripples to no longer register events, if the ripples are disabled initially using disableRipple for example.

If you still see performance issues, please open a new issue, or ping me here. Thanks

[angular-automatic-lock-bot]

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.}