perf: example rendering performance improvements #961

crisbeto · 2021-04-25T09:32:39Z

When generating an example in Stackblitz, we have to create a form element and submit it to a specific URL. The form has to be created eagerly, because some browsers will block us from submitting it if it is created asynchronously.

As a result of this setup, we fire off a lot of HTTP requests when an example is rendered which slows the page down. These changes make the following improvements which shave off more than a second of scripting time when transitioning from the "Overview" to "Examples". I've used the datepicker examples as a benchmark.

Runs the HTTP requests outside of the Angular zone so that we don't trigger change detections once each request is resolved.
Caches the file content so that the user doesn't have to load the same file multiple times.

I've also fixed that the copyright still said "2020".

For reference, here's what the flame chart looks like at the moment:

And this is after these changes:

When generating an example in Stackblitz, we have to create a `form` element and submit it to a specific URL. The `form` has to be created eagerly, because some browsers will block us from submitting it if it is created asynchronously. As a result of this setup we fire off a lot of HTTP requests when an example is rendered which slows the page down a lot. These changes make the following improvements which shave off more than a second of scripting time when transitioning from the "Overview" to "Examples". I've used the datepicker examples as a benchmark. 1. Runs the HTTP requests outside of the Angular zone so that we don't trigger change detections once each request is resolved. 2. Caches the file content so that the user doesn't have to load the same file multiple times. I've also fixed that the copyright still said "2020".

crisbeto · 2021-04-25T10:29:36Z

src/app/shared/stack-blitz/stack-blitz-writer.ts

      }

-      Promise.all(templateContents.concat(exampleContents)).then(() => {


Fun fact: this Promise.all didn't actually do anything, because the passed-in array was filled with undefined values.

I noticed this in the profiler while working on angular/material.angular.io#961. The `_applyBodyHighContrastModeCssClasses` method is called in the constructor of the `A11yModule` and `MatCommonModule` which means that it'll be invoked whenever a new root injector is created for a module importing any Material module (e.g. lazy-loaded route or dynamically-created component). Since it calls into `getHighContrastMode` and it touches the class list of `document.body`, it has the potential of causing some some slow layouts. This can be observed either when switching pages in the dev app or by profiling the example creation on material.angular.io. These changes resolve the issue by ensuring that we only run the logic once.

Splaktar

LGTM, nice work!

Splaktar · 2021-04-27T18:24:51Z

src/app/shared/stack-blitz/stack-blitz-button.ts

-  @HostListener('mouseover') onMouseOver() {
-    this.isDisabled = !this.stackBlitzForm;
+  /**
+   * Form used to submit the data to Stackblitz.


Suggested change

* Form used to submit the data to Stackblitz.

* Form used to submit the data to StackBlitz.

Splaktar · 2021-04-27T18:26:58Z

src/app/shared/stack-blitz/stack-blitz-button.ts

+   * Important! it needs to be constructed ahead-of-time, because doing so on-demand
+   * will cause Firefox to block the submit as a popup, because it didn't happen within
+   * the same tick as the user interaction.


Suggested change

* Important! it needs to be constructed ahead-of-time, because doing so on-demand

* will cause Firefox to block the submit as a popup, because it didn't happen within

* the same tick as the user interaction.

* Important! It needs to be constructed ahead-of-time, because doing so on-demand

* would cause Firefox to block the submission as a popup. This is because it would't

* happen within the same tick as the user interaction.

Splaktar · 2021-04-27T18:31:00Z

src/app/shared/stack-blitz/stack-blitz-writer.ts


 import {materialVersion} from '../version/version';

 const STACKBLITZ_URL = 'https://run.stackblitz.com/api/angular/v1';

 const COPYRIGHT =
-  `Copyright 2020 Google LLC. All Rights Reserved.
+  `Copyright ${new Date().getFullYear()} Google LLC. All Rights Reserved.


jelbourn

lgtm

I noticed this in the profiler while working on angular/material.angular.io#961. The `_applyBodyHighContrastModeCssClasses` method is called in the constructor of the `A11yModule` and `MatCommonModule` which means that it'll be invoked whenever a new root injector is created for a module importing any Material module (e.g. lazy-loaded route or dynamically-created component). Since it calls into `getHighContrastMode` and it touches the class list of `document.body`, it has the potential of causing some some slow layouts. This can be observed either when switching pages in the dev app or by profiling the example creation on material.angular.io. These changes resolve the issue by ensuring that we only run the logic once.

I noticed this in the profiler while working on angular/material.angular.io#961. The `_applyBodyHighContrastModeCssClasses` method is called in the constructor of the `A11yModule` and `MatCommonModule` which means that it'll be invoked whenever a new root injector is created for a module importing any Material module (e.g. lazy-loaded route or dynamically-created component). Since it calls into `getHighContrastMode` and it touches the class list of `document.body`, it has the potential of causing some some slow layouts. This can be observed either when switching pages in the dev app or by profiling the example creation on material.angular.io. These changes resolve the issue by ensuring that we only run the logic once. (cherry picked from commit a92ad3d)

crisbeto requested review from jelbourn, Splaktar and annieyw April 25, 2021 09:32

google-cla bot added the cla: yes label Apr 25, 2021

crisbeto commented Apr 25, 2021

View reviewed changes

crisbeto mentioned this pull request Apr 25, 2021

perf(cdk/a11y): only check for high contrast mode once angular/components#22561

Merged

crisbeto requested a review from devversion April 27, 2021 05:46

devversion approved these changes Apr 27, 2021

View reviewed changes

crisbeto merged commit b11ca05 into angular:master Apr 27, 2021

Splaktar approved these changes Apr 27, 2021

View reviewed changes

jelbourn approved these changes Apr 27, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

perf: example rendering performance improvements #961

perf: example rendering performance improvements #961

Uh oh!

crisbeto commented Apr 25, 2021 •

edited

Loading

Uh oh!

crisbeto Apr 25, 2021

Uh oh!

Splaktar Apr 27, 2021

Uh oh!

Splaktar left a comment

Uh oh!

Splaktar Apr 27, 2021

Uh oh!

Splaktar Apr 27, 2021

Uh oh!

Splaktar Apr 27, 2021

Uh oh!

jelbourn left a comment

Uh oh!

Uh oh!

		}

		Promise.all(templateContents.concat(exampleContents)).then(() => {

	* Form used to submit the data to Stackblitz.
	* Form used to submit the data to StackBlitz.

perf: example rendering performance improvements #961

perf: example rendering performance improvements #961

Uh oh!

Conversation

crisbeto commented Apr 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crisbeto Apr 25, 2021

Choose a reason for hiding this comment

Uh oh!

Splaktar Apr 27, 2021

Choose a reason for hiding this comment

Uh oh!

Splaktar left a comment

Choose a reason for hiding this comment

Uh oh!

Splaktar Apr 27, 2021

Choose a reason for hiding this comment

Uh oh!

Splaktar Apr 27, 2021

Choose a reason for hiding this comment

Uh oh!

Splaktar Apr 27, 2021

Choose a reason for hiding this comment

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

crisbeto commented Apr 25, 2021 •

edited

Loading