Skip to content

Commit d6be6fa

Browse files
committed
perf(sidenav): avoid recalculating the inline styles while sidenav is open
* Avoids recalculating the sidenav inline styles for every change detection cycle while the sidenav is open by doing it only when an animation starts. * Removes a few one-liner methods that were being used in one place.
1 parent e79f7f9 commit d6be6fa

File tree

2 files changed

+17
-33
lines changed

2 files changed

+17
-33
lines changed

src/lib/sidenav/sidenav-container.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33

44
<ng-content select="md-sidenav, mat-sidenav"></ng-content>
55

6-
<div class="mat-sidenav-content" [ngStyle]="_getStyles()" cdk-scrollable>
6+
<div class="mat-sidenav-content" [ngStyle]="_styles" cdk-scrollable>
77
<ng-content></ng-content>
88
</div>

src/lib/sidenav/sidenav.ts

Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,9 @@ export class MdSidenavContainer implements AfterContentInit {
325325
private _left: MdSidenav | null;
326326
private _right: MdSidenav | null;
327327

328+
/** Inline styles to be applied to the container. */
329+
_styles: { marginLeft: string; marginRight: string; transform: string; };
330+
328331
constructor(@Optional() private _dir: Directionality, private _element: ElementRef,
329332
private _renderer: Renderer2, private _ngZone: NgZone,
330333
private _changeDetectorRef: ChangeDetectorRef) {
@@ -365,6 +368,7 @@ export class MdSidenavContainer implements AfterContentInit {
365368
// Set the transition class on the container so that the animations occur. This should not
366369
// be set initially because animations should only be triggered via a change in state.
367370
this._renderer.addClass(this._element.nativeElement, 'mat-sidenav-transition');
371+
this._updateStyles();
368372
this._changeDetectorRef.markForCheck();
369373
});
370374

@@ -459,40 +463,20 @@ export class MdSidenavContainer implements AfterContentInit {
459463
return (this._isSidenavOpen(sidenav) && sidenav.mode == mode) ? sidenav._width : 0;
460464
}
461465

462-
_getMarginLeft() {
463-
return this._left ? this._getSidenavEffectiveWidth(this._left, 'side') : 0;
464-
}
465-
466-
_getMarginRight() {
467-
return this._right ? this._getSidenavEffectiveWidth(this._right, 'side') : 0;
468-
}
469-
470-
_getPositionLeft() {
471-
return this._left ? this._getSidenavEffectiveWidth(this._left, 'push') : 0;
472-
}
473-
474-
_getPositionRight() {
475-
return this._right ? this._getSidenavEffectiveWidth(this._right, 'push') : 0;
476-
}
477-
478-
/**
479-
* Returns the horizontal offset for the content area. There should never be a value for both
480-
* left and right, so by subtracting the right value from the left value, we should always get
481-
* the appropriate offset.
482-
*/
483-
_getPositionOffset() {
484-
return this._getPositionLeft() - this._getPositionRight();
485-
}
486-
487466
/**
488-
* This is using [ngStyle] rather than separate [style...] properties because [style.transform]
489-
* doesn't seem to work right now.
467+
* Recalculates and updates the inline styles. Note that this
468+
* should be used sparingly, because it causes a reflow.
490469
*/
491-
_getStyles() {
492-
return {
493-
marginLeft: `${this._getMarginLeft()}px`,
494-
marginRight: `${this._getMarginRight()}px`,
495-
transform: `translate3d(${this._getPositionOffset()}px, 0, 0)`
470+
private _updateStyles() {
471+
const marginLeft = this._left ? this._getSidenavEffectiveWidth(this._left, 'side') : 0;
472+
const marginRight = this._right ? this._getSidenavEffectiveWidth(this._right, 'side') : 0;
473+
const leftWidth = this._left ? this._getSidenavEffectiveWidth(this._left, 'push') : 0;
474+
const rightWidth = this._right ? this._getSidenavEffectiveWidth(this._right, 'push') : 0;
475+
476+
this._styles = {
477+
marginLeft: `${marginLeft}px`,
478+
marginRight: `${marginRight}px`,
479+
transform: `translate3d(${leftWidth - rightWidth}px, 0, 0)`
496480
};
497481
}
498482
}

0 commit comments

Comments
 (0)