MatPaginatedTabHeader has performance problems (forced synchronous layout).

[pkozlowski-opensource]

Reproduction

Steps to reproduce:

1. open Chrome dev tools / Performance
2. start recording a profile and go to https://next.angular.io/guide/router

Expected Behavior

MatPaginatedTabHeader should not be the perf hot spot / bottleneck for AIO

Actual Behavior

The _checkPaginationEnabled methods triggers a forced synchronous layout (by doing const isEnabled = this._tabList.nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;.

This forced synchronous layout accounts for ~38% of the entire JS processing time on the critical TTI path (see attached recording). Similar bottlenecks were spotted on other profiled sites (ex. https://www.mustakbil.com/)

Dev tools profile recording

[crisbeto]

I spent some time profiling in against our dev app and it's not just _checkPaginationEnabled that's causing the issues, there's also _checkScrollingControls and _alignInkBarToSelectedTab that trigger similar reflows. I don't think we can do much about it without breaking existing use cases. Our best bet might be to allow consumers to opt out of pagination, if they know that they won't need it.