Low performance of cdk-tree

[stasmaxymov]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

cdk-tree should render nodes fast

What is the current behavior?

It takes up to 6 seconds to render 1 level of 1000 nodes

What are the steps to reproduce?

Template based on: https://github.com/angular/material2/blob/master/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.html
Generate the data of 1000 nodes and push it to the tree.
It takes significant time to render the tree. I profiled the performance and got the following results:

The most time consuming operation is detectChanges method, which is called on a tree level after each node insert:
https://github.com/angular/material2/blob/29bf02427abf6c0f0d3d79bf415469c79eed9c62/src/cdk/tree/tree.ts#L340
Possible fix is to move change detection to renderNodes method:
https://github.com/angular/material2/blob/29bf02427abf6c0f0d3d79bf415469c79eed9c62/src/cdk/tree/tree.ts#L272
After such change it takes 1 second to render 1000 nodes

What is the use-case or motivation for changing an existing behavior?

What is the most important, that even rendering of only 100 nodes is visually noticeable.

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

Angular cli 6.0.0-rc.1
Angular cdk 6.0.0-rc.1

Is there anything else we should know?

[stasmaxymov]

PR is merged. Closing the issue

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