From 80e93b7b47952de38934193b3ac95583e4f09faf Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Mon, 7 Dec 2020 13:29:41 +0100 Subject: [PATCH 1/4] fix: first pass at improving requestLayout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It is totally unecessary to call multiple requestLayout inside initNativeView (properties set) Even worse we dont need to do any requestLayout from “onLoaded” as the parent will layout itself/children --- packages/core/ui/core/properties/index.ts | 10 ++++++++++ packages/core/ui/core/view-base/index.ts | 19 ++++++++++++++++++- packages/core/ui/core/view/index.android.ts | 5 +++++ packages/core/ui/core/view/index.ios.ts | 14 +++++++++++++- 4 files changed, 46 insertions(+), 2 deletions(-) diff --git a/packages/core/ui/core/properties/index.ts b/packages/core/ui/core/properties/index.ts index eef42a4cc1..d3c4e4b4ec 100644 --- a/packages/core/ui/core/properties/index.ts +++ b/packages/core/ui/core/properties/index.ts @@ -1295,6 +1295,8 @@ function inheritableCssPropertyValuesOn(style: Style): Array<{ property: Inherit type PropertyInterface = Property | CssProperty | CssAnimationProperty; export const initNativeView = profile('"properties".initNativeView', function initNativeView(view: ViewBase): void { + const wasSuspended = view.suspendRequestLayout; + view.suspendRequestLayout = true; if (view._suspendedUpdates) { applyPendingNativeSetters(view); } else { @@ -1302,6 +1304,14 @@ export const initNativeView = profile('"properties".initNativeView', function in } // Would it be faster to delete all members of the old object? view._suspendedUpdates = {}; + + // if the view requestLayout was not suspended before + // it means we can request a layout if needed. + // will be done after otherwise + view.suspendRequestLayout = false; + if (!wasSuspended && view.isLayoutRequestNeeded) { + view.requestLayout(); + } }); export function applyPendingNativeSetters(view: ViewBase): void { diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts index 67e4010b0d..9789825cb6 100644 --- a/packages/core/ui/core/view-base/index.ts +++ b/packages/core/ui/core/view-base/index.ts @@ -392,7 +392,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition if (this._isLoaded) { return; } - + // the view is going to be layed out after + // no need for requestLayout which can be pretty slow because + // called a lot and going all up the chain to the page + this.suspendRequestLayout = true; this._isLoaded = true; this._cssState.onLoaded(); this._resumeNativeUpdates(SuspendType.Loaded); @@ -403,6 +406,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition return true; }); + this.suspendRequestLayout = false; this._emit('loaded'); } @@ -619,8 +623,21 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition } } + + _requetLayoutNeeded = false; + + get isLayoutRequestNeeded() { + return this._requetLayoutNeeded; + } + + _suspendRequestLayout = false; + set suspendRequestLayout(value: boolean) { + this._suspendRequestLayout = value; + } + @profile public requestLayout(): void { + // Default implementation for non View instances (like TabViewItem). const parent = this.parent; if (parent) { diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts index 0a3e50b7be..8357f9d344 100644 --- a/packages/core/ui/core/view/index.android.ts +++ b/packages/core/ui/core/view/index.android.ts @@ -525,6 +525,11 @@ export class View extends ViewCommon { @profile public requestLayout(): void { + if (this._suspendRequestLayout) { + this._requetLayoutNeeded = true; + return; + } + this._requetLayoutNeeded = false; super.requestLayout(); if (this.nativeViewProtected) { this.nativeViewProtected.requestLayout(); diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts index 7a1c877077..bf0853be0c 100644 --- a/packages/core/ui/core/view/index.ios.ts +++ b/packages/core/ui/core/view/index.ios.ts @@ -54,9 +54,21 @@ export class View extends ViewCommon implements ViewDefinition { return (this._privateFlags & PFLAG_FORCE_LAYOUT) === PFLAG_FORCE_LAYOUT; } + requestlayoutIfNeeded() { + if ( this.isLayoutRequired) { + this._requetLayoutNeeded = false; + this.requestLayout(); + } + } + public requestLayout(): void { - super.requestLayout(); + if (this._suspendRequestLayout) { + this._requetLayoutNeeded = true; + return; + } + this._requetLayoutNeeded = false; this._privateFlags |= PFLAG_FORCE_LAYOUT; + super.requestLayout(); const nativeView = this.nativeViewProtected; if (nativeView && nativeView.setNeedsLayout) { From c36d63351cd1539ab75d6b737450bb1dfa041ec8 Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Fri, 18 Dec 2020 09:39:04 +0100 Subject: [PATCH 2/4] missing getter --- packages/core/ui/core/view-base/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts index 9789825cb6..a1031fb957 100644 --- a/packages/core/ui/core/view-base/index.ts +++ b/packages/core/ui/core/view-base/index.ts @@ -634,6 +634,9 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition set suspendRequestLayout(value: boolean) { this._suspendRequestLayout = value; } + get suspendRequestLayout() { + return this._suspendRequestLayout; + } @profile public requestLayout(): void { From 5f4b227f5c4ff4894e1795ee7d08e6ddcd13262c Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Mon, 1 Feb 2021 16:20:56 +0100 Subject: [PATCH 3/4] fix: spelling fixes --- packages/core/ui/core/view-base/index.ts | 4 ++-- packages/core/ui/core/view/index.android.ts | 4 ++-- packages/core/ui/core/view/index.ios.ts | 10 +++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts index d3a0c92ae9..8d7269e24b 100644 --- a/packages/core/ui/core/view-base/index.ts +++ b/packages/core/ui/core/view-base/index.ts @@ -630,10 +630,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition } - _requetLayoutNeeded = false; + _requestLayoutNeeded = false; get isLayoutRequestNeeded() { - return this._requetLayoutNeeded; + return this._requestLayoutNeeded; } _suspendRequestLayout = false; diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts index 2f62922ce3..8a9bbc008d 100644 --- a/packages/core/ui/core/view/index.android.ts +++ b/packages/core/ui/core/view/index.android.ts @@ -539,10 +539,10 @@ export class View extends ViewCommon { @profile public requestLayout(): void { if (this._suspendRequestLayout) { - this._requetLayoutNeeded = true; + this._requestLayoutNeeded = true; return; } - this._requetLayoutNeeded = false; + this._requestLayoutNeeded = false; super.requestLayout(); if (this.nativeViewProtected) { this.nativeViewProtected.requestLayout(); diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts index 9543502c76..54f494c7ec 100644 --- a/packages/core/ui/core/view/index.ios.ts +++ b/packages/core/ui/core/view/index.ios.ts @@ -54,19 +54,19 @@ export class View extends ViewCommon implements ViewDefinition { return (this._privateFlags & PFLAG_FORCE_LAYOUT) === PFLAG_FORCE_LAYOUT; } - requestlayoutIfNeeded() { - if ( this.isLayoutRequired) { - this._requetLayoutNeeded = false; + requestLayoutIfNeeded() { + if (this.isLayoutRequired) { + this._requestLayoutNeeded = false; this.requestLayout(); } } public requestLayout(): void { if (this._suspendRequestLayout) { - this._requetLayoutNeeded = true; + this._requestLayoutNeeded = true; return; } - this._requetLayoutNeeded = false; + this._requestLayoutNeeded = false; this._privateFlags |= PFLAG_FORCE_LAYOUT; super.requestLayout(); From 63e4d35fd22500472e502a52e8a038033a3a8642 Mon Sep 17 00:00:00 2001 From: Martin Guillon Date: Tue, 10 Aug 2021 09:30:42 +0200 Subject: [PATCH 4/4] fix: suspendRequestLayout not being reset to the right state This causes unecessary `requestLayout` --- packages/core/ui/core/properties/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/ui/core/properties/index.ts b/packages/core/ui/core/properties/index.ts index 329aa53907..9b6ca38136 100644 --- a/packages/core/ui/core/properties/index.ts +++ b/packages/core/ui/core/properties/index.ts @@ -1376,7 +1376,7 @@ export const initNativeView = profile('"properties".initNativeView', function in // if the view requestLayout was not suspended before // it means we can request a layout if needed. // will be done after otherwise - view.suspendRequestLayout = false; + view.suspendRequestLayout = wasSuspended; if (!wasSuspended && view.isLayoutRequestNeeded) { view.requestLayout(); }