cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): add dev mode counter information to styling (#29579)

Browse Source 
In order to optimize performance for styling-related operations in
Angular, debug counters need to be introduced. This patch adds various
counters to ngDevMode which are fired each time a styling-related
binding is updated.

PR Close #29579
This commit is contained in:
Matias Niemelä 2019-03-28 15:51:33 -07:00 committed by Igor Minar
parent c65ac7fbad
commit 66b87cef33
2 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/src/render3/styling/class_and_style_bindings.ts
View File

@ -514,6 +514,7 @@ export function updateStylingMap(
BoundPlayerFactory<null|string|{[key: string]: any}>| null, BoundPlayerFactory<null|string|{[key: string]: any}>| null,
stylesInput?: {[key: string]: any} | BoundPlayerFactory<null|{[key: string]: any}>| null, stylesInput?: {[key: string]: any} | BoundPlayerFactory<null|{[key: string]: any}>| null,
directiveIndex: number = 0): void { directiveIndex: number = 0): void {
ngDevMode && ngDevMode.stylingMap++;
ngDevMode && assertValidDirectiveIndex(context, directiveIndex); ngDevMode && assertValidDirectiveIndex(context, directiveIndex);
classesInput = classesInput || null; classesInput = classesInput || null;
stylesInput = stylesInput || null; stylesInput = stylesInput || null;
@ -600,6 +601,8 @@ export function updateStylingMap(
if (playerBuildersAreDirty) { if (playerBuildersAreDirty) {
setContextPlayersDirty(context, true); setContextPlayersDirty(context, true);
} }
ngDevMode && ngDevMode.stylingMapCacheMiss++;
} }
/** /**
@ -904,6 +907,8 @@ function updateSingleStylingValue(
const currDirective = getDirectiveIndexFromEntry(context, singleIndex); const currDirective = getDirectiveIndexFromEntry(context, singleIndex);
const value: string|boolean|null = (input instanceof BoundPlayerFactory) ? input.value : input; const value: string|boolean|null = (input instanceof BoundPlayerFactory) ? input.value : input;
ngDevMode && ngDevMode.stylingProp++;
if (hasValueChanged(currFlag, currValue, value) && if (hasValueChanged(currFlag, currValue, value) &&
(forceOverride || allowValueChange(currValue, value, currDirective, directiveIndex))) { (forceOverride || allowValueChange(currValue, value, currDirective, directiveIndex))) {
const isClassBased = (currFlag & StylingFlags.Class) === StylingFlags.Class; const isClassBased = (currFlag & StylingFlags.Class) === StylingFlags.Class;
@ -958,6 +963,8 @@ function updateSingleStylingValue(
if (playerBuildersAreDirty) { if (playerBuildersAreDirty) {
setContextPlayersDirty(context, true); setContextPlayersDirty(context, true);
} }
ngDevMode && ngDevMode.stylingPropCacheMiss++;
} }
} }
@ -986,6 +993,7 @@ export function renderStyling(
isFirstRender: boolean, classesStore?: BindingStore | null, stylesStore?: BindingStore | null, isFirstRender: boolean, classesStore?: BindingStore | null, stylesStore?: BindingStore | null,
directiveIndex: number = 0): number { directiveIndex: number = 0): number {
let totalPlayersQueued = 0; let totalPlayersQueued = 0;
ngDevMode && ngDevMode.stylingApply++;
// this prevents multiple attempts to render style/class values on // this prevents multiple attempts to render style/class values on
// the same element... // the same element...
@ -1000,6 +1008,8 @@ export function renderStyling(
flushHostInstructionsQueue(context); flushHostInstructionsQueue(context);
if (isContextDirty(context)) { if (isContextDirty(context)) {
ngDevMode && ngDevMode.stylingApplyCacheMiss++;
// this is here to prevent things like <ng-container [style] [class]>...</ng-container> // this is here to prevent things like <ng-container [style] [class]>...</ng-container>
// or if there are any host style or class bindings present in a directive set on // or if there are any host style or class bindings present in a directive set on
// a container node // a container node

12
packages/core/src/util/ng_dev_mode.ts
View File

@ -29,6 +29,12 @@ declare global {
rendererMoveNode: number; rendererMoveNode: number;
rendererRemoveNode: number; rendererRemoveNode: number;
rendererCreateComment: number; rendererCreateComment: number;
stylingMap: number;
stylingMapCacheMiss: number;
stylingProp: number;
stylingPropCacheMiss: number;
stylingApply: number;
stylingApplyCacheMiss: number;
} }
} }
@ -56,6 +62,12 @@ export function ngDevModeResetPerfCounters(): NgDevModePerfCounters {
rendererMoveNode: 0, rendererMoveNode: 0,
rendererRemoveNode: 0, rendererRemoveNode: 0,
rendererCreateComment: 0, rendererCreateComment: 0,
stylingMap: 0,
stylingMapCacheMiss: 0,
stylingProp: 0,
stylingPropCacheMiss: 0,
stylingApply: 0,
stylingApplyCacheMiss: 0,
}; };
// NOTE: Under Ivy we may have both window & global defined in the Node // NOTE: Under Ivy we may have both window & global defined in the Node
// environment since ensureDocument() in render3.ts sets global.window. // environment since ensureDocument() in render3.ts sets global.window.