elements: performance issue with large *ngFor loop

[lacolaco]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I create <hello-element> custom element from <hello> component.
And I use them in AppComponent and wrap with a large *ngFor loop.

<hello> components are rendered very fast, as well as I expect. But <hello-element> elements are slow. Browser freezes for a short time.

Expected behavior

Be fast as well as component.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-x6gyei?file=src%2Fapp%2Fapp.component.html

What is the motivation / use case for changing the behavior?

Environment

Angular version: 6.0.0


Browser:
- [x] Chrome (desktop) version 66
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[trotyl]

Seems due to scheduler lacking of batch operation.
So there going to be 1000 micro/macrotasks and 1000 ticks.

Using { ngZone: 'noop' } could help to improve the performance for now.

[JiaLiPassion]

Like @trotyl 's idea, or you may try to disable requestAnimationFrame zone patch by add the following flag before load zone.js in polyfills.ts.

(window as any).__Zone_disable_requestAnimationFrame = true;
import 'zone.js/dist/zone';  // Included with Angular CLI.

But it seems it will only work in local, in stackblitz, you need to add

<script>
  window.__Zone_disable_requestAnimationFrame = true;
</script>

into index.html.

[JiaLiPassion]

The reason is Elements trigger detectChanges even it is inside ApplicationRef.tick, https://github.com/angular/angular/compare/master...JiaLiPassion:element-scheduler?expand=1#diff-c0d4cfddef0e50ed399624e91049d934R217

I have made a PR to fix this one, #23885.
Please check the idea is correct or not, thank you!

[gkalpak]

This seems to have the same root cause as #33060. I am going to close this in favor of #33060, because #33060 it broader. I.e. this issue is specifically about instances of the same custom element created inside a single template (which might have an easier, but limited solution), while #33060 is about instances of potentially different custom elements that could be in different templates (or even different apps).

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