Skip to content

Commit ad94e02

Browse files
crisbetokara
crisbeto
authored and
kara
committed
perf(ivy): store views directly on LContainer (angular#30179)
Stores the views that are part of a container directly on the `LContainer`, rather than maintaining a dedicated sub-array. This PR resolves FW-1288. PR Close angular#30179
1 parent 00ffc03 commit ad94e02

11 files changed

Lines changed: 83 additions & 84 deletions

File tree

‎packages/core/src/debug/debug_node.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88

99
import {Injector} from '../di';
1010
import {getViewComponent} from '../render3/global_utils_api';
11-
import {LContainer, NATIVE, VIEWS} from '../render3/interfaces/container';
11+
import {CONTAINER_HEADER_OFFSET, LContainer, NATIVE} from '../render3/interfaces/container';
1212
import {TElementNode, TNode, TNodeFlags, TNodeType} from '../render3/interfaces/node';
1313
import {StylingIndex} from '../render3/interfaces/styling';
14-
import {LView, NEXT, PARENT, TData, TVIEW, T_HOST} from '../render3/interfaces/view';
14+
import {LView, PARENT, TData, TVIEW, T_HOST} from '../render3/interfaces/view';
1515
import {getProp, getValue, isClassBasedValue} from '../render3/styling/class_and_style_bindings';
1616
import {getStylingContextFromLView} from '../render3/styling/util';
1717
import {getComponent, getContext, getInjectionTokens, getInjector, getListeners, getLocalRefs, isBrowserEvents, loadLContext, loadLContextFromNode} from '../render3/util/discovery_utils';
@@ -502,8 +502,8 @@ function _queryNodeChildrenR3(
502502
function _queryNodeChildrenInContainerR3(
503503
lContainer: LContainer, predicate: Predicate<DebugNode>, matches: DebugNode[],
504504
elementsOnly: boolean, rootNativeNode: any) {
505-
for (let i = 0; i < lContainer[VIEWS].length; i++) {
506-
const childView = lContainer[VIEWS][i];
505+
for (let i = CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
506+
const childView = lContainer[i];
507507
_queryNodeChildrenR3(
508508
childView[TVIEW].node !, childView, predicate, matches, elementsOnly, rootNativeNode);
509509
}

‎packages/core/src/render3/debug.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
*/
88

99
import {assertDefined} from '../util/assert';
10-
import {ACTIVE_INDEX, LContainer, NATIVE, VIEWS} from './interfaces/container';
10+
11+
import {ACTIVE_INDEX, CONTAINER_HEADER_OFFSET, LContainer, NATIVE} from './interfaces/container';
1112
import {COMMENT_MARKER, ELEMENT_MARKER, I18nMutateOpCode, I18nMutateOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, TIcu} from './interfaces/i18n';
1213
import {TNode} from './interfaces/node';
1314
import {LQueries} from './interfaces/query';
@@ -207,7 +208,8 @@ export class LContainerDebug {
207208

208209
get activeIndex(): number { return this._raw_lContainer[ACTIVE_INDEX]; }
209210
get views(): LViewDebug[] {
210-
return this._raw_lContainer[VIEWS].map(toDebug as(l: LView) => LViewDebug);
211+
return this._raw_lContainer.slice(CONTAINER_HEADER_OFFSET)
212+
.map(toDebug as(l: LView) => LViewDebug);
211213
}
212214
get parent(): LViewDebug|LContainerDebug|null { return toDebug(this._raw_lContainer[PARENT]); }
213215
get queries(): LQueries|null { return this._raw_lContainer[QUERIES]; }

‎packages/core/src/render3/instructions/container.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {assertEqual} from '../../util/assert';
99
import {assertHasParent} from '../assert';
1010
import {attachPatchData} from '../context_discovery';
1111
import {executePreOrderHooks, registerPostOrderHooks} from '../hooks';
12-
import {ACTIVE_INDEX, VIEWS} from '../interfaces/container';
12+
import {ACTIVE_INDEX, CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
1313
import {ComponentTemplate} from '../interfaces/definition';
1414
import {LocalRefExtractor, TAttributes, TContainerNode, TNode, TNodeType} from '../interfaces/node';
1515
import {BINDING_INDEX, HEADER_OFFSET, LView, QUERIES, RENDERER, TVIEW} from '../interfaces/view';
@@ -123,11 +123,11 @@ export function ɵɵcontainerRefreshEnd(): void {
123123

124124
ngDevMode && assertNodeType(previousOrParentTNode, TNodeType.Container);
125125

126-
const lContainer = getLView()[previousOrParentTNode.index];
126+
const lContainer: LContainer = getLView()[previousOrParentTNode.index];
127127
const nextIndex = lContainer[ACTIVE_INDEX];
128128

129129
// remove extra views at the end of the container
130-
while (nextIndex < lContainer[VIEWS].length) {
130+
while (nextIndex < lContainer.length - CONTAINER_HEADER_OFFSET) {
131131
removeView(lContainer, nextIndex);
132132
}
133133
}

‎packages/core/src/render3/instructions/embedded_view.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {assertDefined, assertEqual} from '../../util/assert';
1010
import {assertLContainerOrUndefined} from '../assert';
11-
import {ACTIVE_INDEX, LContainer, VIEWS} from '../interfaces/container';
11+
import {ACTIVE_INDEX, CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
1212
import {RenderFlags} from '../interfaces/definition';
1313
import {TContainerNode, TNodeType} from '../interfaces/node';
1414
import {FLAGS, LView, LViewFlags, PARENT, QUERIES, TVIEW, TView, T_HOST} from '../interfaces/view';
@@ -104,17 +104,15 @@ function getOrCreateEmbeddedTView(
104104
* @param lContainer to search for views
105105
* @param startIdx starting index in the views array to search from
106106
* @param viewBlockId exact view block id to look for
107-
* @returns index of a found view or -1 if not found
108107
*/
109108
function scanForView(lContainer: LContainer, startIdx: number, viewBlockId: number): LView|null {
110-
const views = lContainer[VIEWS];
111-
for (let i = startIdx; i < views.length; i++) {
112-
const viewAtPositionId = views[i][TVIEW].id;
109+
for (let i = startIdx + CONTAINER_HEADER_OFFSET; i < lContainer.length; i++) {
110+
const viewAtPositionId = lContainer[i][TVIEW].id;
113111
if (viewAtPositionId === viewBlockId) {
114-
return views[i];
112+
return lContainer[i];
115113
} else if (viewAtPositionId < viewBlockId) {
116114
// found a view that should not be at this position - remove
117-
removeView(lContainer, i);
115+
removeView(lContainer, i - CONTAINER_HEADER_OFFSET);
118116
} else {
119117
// found a view with id greater than the one we are searching for
120118
// which means that required view doesn't exist and can't be found at

‎packages/core/src/render3/instructions/shared.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {attachLContainerDebug, attachLViewDebug} from '../debug';
1919
import {diPublicInInjector, getNodeInjectable, getOrCreateNodeInjectorForNode} from '../di';
2020
import {throwMultipleComponentError} from '../errors';
2121
import {executeHooks, executePreOrderHooks, registerPreOrderHooks} from '../hooks';
22-
import {ACTIVE_INDEX, LContainer, VIEWS} from '../interfaces/container';
22+
import {ACTIVE_INDEX, CONTAINER_HEADER_OFFSET, LContainer} from '../interfaces/container';
2323
import {ComponentDef, ComponentTemplate, DirectiveDef, DirectiveDefListOrFactory, PipeDefListOrFactory, RenderFlags, ViewQueriesFunction} from '../interfaces/definition';
2424
import {INJECTOR_BLOOM_PARENT_SIZE, NodeInjectorFactory} from '../interfaces/injector';
2525
import {AttributeMarker, InitialInputData, InitialInputs, LocalRefExtractor, PropertyAliasValue, PropertyAliases, TAttributes, TContainerNode, TElementContainerNode, TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeProviderIndexes, TNodeType, TProjectionNode, TViewNode} from '../interfaces/node';
@@ -37,7 +37,7 @@ import {NO_CHANGE} from '../tokens';
3737
import {attrsStylingIndexOf} from '../util/attrs_utils';
3838
import {INTERPOLATION_DELIMITER, stringifyForError} from '../util/misc_utils';
3939
import {getLViewParent, getRootContext} from '../util/view_traversal_utils';
40-
import {getComponentViewByIndex, getNativeByIndex, getNativeByTNode, getTNode, isComponent, isComponentDef, isContentQueryHost, isRootView, readPatchedLView, resetPreOrderHookFlags, unwrapRNode, viewAttachedToChangeDetector} from '../util/view_utils';
40+
import {getComponentViewByIndex, getNativeByIndex, getNativeByTNode, getTNode, isComponent, isComponentDef, isContentQueryHost, isLContainer, isRootView, readPatchedLView, resetPreOrderHookFlags, unwrapRNode, viewAttachedToChangeDetector} from '../util/view_utils';
4141

4242

4343

@@ -1436,7 +1436,6 @@ export function createLContainer(
14361436
null, // queries
14371437
tNode, // t_host
14381438
native, // native
1439-
[], // views
14401439
];
14411440
ngDevMode && attachLContainerDebug(lContainer);
14421441
return lContainer;
@@ -1452,10 +1451,9 @@ function refreshDynamicEmbeddedViews(lView: LView) {
14521451
// Note: current can be an LView or an LContainer instance, but here we are only interested
14531452
// in LContainer. We can tell it's an LContainer because its length is less than the LView
14541453
// header.
1455-
if (current.length < HEADER_OFFSET && current[ACTIVE_INDEX] === -1) {
1456-
const container = current as LContainer;
1457-
for (let i = 0; i < container[VIEWS].length; i++) {
1458-
const dynamicViewData = container[VIEWS][i];
1454+
if (current[ACTIVE_INDEX] === -1 && isLContainer(current)) {
1455+
for (let i = CONTAINER_HEADER_OFFSET; i < current.length; i++) {
1456+
const dynamicViewData = current[i];
14591457
// The directives and pipes are not needed here as an existing view is only being refreshed.
14601458
ngDevMode && assertDefined(dynamicViewData[TVIEW], 'TView must be allocated');
14611459
renderEmbeddedTemplate(dynamicViewData, dynamicViewData[TVIEW], dynamicViewData[CONTEXT] !);

‎packages/core/src/render3/interfaces/container.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,14 @@ export const ACTIVE_INDEX = 2;
2828
// PARENT, NEXT, QUERIES and T_HOST are indices 3, 4, 5 and 6.
2929
// As we already have these constants in LView, we don't need to re-create them.
3030
export const NATIVE = 7;
31-
export const VIEWS = 8;
31+
32+
/**
33+
* Size of LContainer's header. Represents the index after which all views in the
34+
* container will be inserted. We need to keep a record of current views so we know
35+
* which views are already in the DOM (and don't need to be re-added) and so we can
36+
* remove views from the DOM when they are no longer required.
37+
*/
38+
export const CONTAINER_HEADER_OFFSET = 8;
3239

3340
/**
3441
* The state associated with a container.
@@ -92,15 +99,6 @@ export interface LContainer extends Array<any> {
9299
/** The comment element that serves as an anchor for this LContainer. */
93100
readonly[NATIVE]:
94101
RComment; // TODO(misko): remove as this value can be gotten by unwrapping `[HOST]`
95-
96-
/**
97-
*A list of the container's currently active child views. Views will be inserted
98-
*here as they are added and spliced from here when they are removed. We need
99-
*to keep a record of current views so we know which views are already in the DOM
100-
*(and don't need to be re-added) and so we can remove views from the DOM when they
101-
*are no longer required.
102-
*/
103-
[VIEWS]: LView[];
104102
}
105103

106104
// Note: This hack is necessary so we don't erroneously get a circular dependency

‎packages/core/src/render3/node_manipulation.ts‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@
77
*/
88

99
import {ViewEncapsulation} from '../metadata/view';
10-
import {assertDefined} from '../util/assert';
1110

1211
import {assertLContainer, assertLView} from './assert';
1312
import {attachPatchData} from './context_discovery';
14-
import {LContainer, NATIVE, VIEWS, unusedValueExportToPlacateAjd as unused1} from './interfaces/container';
13+
import {CONTAINER_HEADER_OFFSET, LContainer, NATIVE, unusedValueExportToPlacateAjd as unused1} from './interfaces/container';
1514
import {ComponentDef} from './interfaces/definition';
1615
import {NodeInjectorFactory} from './interfaces/injector';
1716
import {TElementNode, TNode, TNodeFlags, TNodeType, TProjectionNode, TViewNode, unusedValueExportToPlacateAjd as unused2} from './interfaces/node';
@@ -99,8 +98,9 @@ function walkTNodeTree(
9998
// This element has an LContainer, and its comment needs to be handled
10099
executeNodeAction(
101100
action, renderer, renderParent, nodeOrContainer[NATIVE], tNode, beforeNode);
102-
if (nodeOrContainer[VIEWS].length) {
103-
currentView = nodeOrContainer[VIEWS][0];
101+
const firstView = nodeOrContainer[CONTAINER_HEADER_OFFSET];
102+
if (firstView) {
103+
currentView = firstView;
104104
nextTNode = currentView[TVIEW].node;
105105

106106
// When the walker enters a container, then the beforeNode has to become the local native
@@ -111,9 +111,9 @@ function walkTNodeTree(
111111
} else if (tNode.type === TNodeType.Container) {
112112
const lContainer = currentView ![tNode.index] as LContainer;
113113
executeNodeAction(action, renderer, renderParent, lContainer[NATIVE], tNode, beforeNode);
114-
115-
if (lContainer[VIEWS].length) {
116-
currentView = lContainer[VIEWS][0];
114+
const firstView = lContainer[CONTAINER_HEADER_OFFSET];
115+
if (firstView) {
116+
currentView = firstView;
117117
nextTNode = currentView[TVIEW].node;
118118

119119
// When the walker enters a container, then the beforeNode has to become the local native
@@ -302,8 +302,8 @@ export function destroyViewTree(rootView: LView): void {
302302
} else {
303303
ngDevMode && assertLContainer(lViewOrLContainer);
304304
// If container, traverse down to its first LView.
305-
const views = lViewOrLContainer[VIEWS] as LView[];
306-
if (views.length > 0) next = views[0];
305+
const firstView: LView|undefined = lViewOrLContainer[CONTAINER_HEADER_OFFSET];
306+
if (firstView) next = firstView;
307307
}
308308

309309
if (!next) {
@@ -335,18 +335,18 @@ export function destroyViewTree(rootView: LView): void {
335335
export function insertView(lView: LView, lContainer: LContainer, index: number) {
336336
ngDevMode && assertLView(lView);
337337
ngDevMode && assertLContainer(lContainer);
338-
const views = lContainer[VIEWS];
339-
ngDevMode && assertDefined(views, 'Container must have views');
338+
const indexInContainer = CONTAINER_HEADER_OFFSET + index;
339+
const containerLength = lContainer.length;
340+
340341
if (index > 0) {
341342
// This is a new view, we need to add it to the children.
342-
views[index - 1][NEXT] = lView;
343+
lContainer[indexInContainer - 1][NEXT] = lView;
343344
}
344-
345-
if (index < views.length) {
346-
lView[NEXT] = views[index];
347-
views.splice(index, 0, lView);
345+
if (index < containerLength - CONTAINER_HEADER_OFFSET) {
346+
lView[NEXT] = lContainer[indexInContainer];
347+
lContainer.splice(CONTAINER_HEADER_OFFSET + index, 0, lView);
348348
} else {
349-
views.push(lView);
349+
lContainer.push(lView);
350350
lView[NEXT] = null;
351351
}
352352

@@ -372,13 +372,15 @@ export function insertView(lView: LView, lContainer: LContainer, index: number)
372372
* @returns Detached LView instance.
373373
*/
374374
export function detachView(lContainer: LContainer, removeIndex: number): LView|undefined {
375-
const views = lContainer[VIEWS];
376-
const viewToDetach = views[removeIndex];
375+
if (lContainer.length <= CONTAINER_HEADER_OFFSET) return;
376+
377+
const indexInContainer = CONTAINER_HEADER_OFFSET + removeIndex;
378+
const viewToDetach = lContainer[indexInContainer];
377379
if (viewToDetach) {
378380
if (removeIndex > 0) {
379-
views[removeIndex - 1][NEXT] = viewToDetach[NEXT] as LView;
381+
lContainer[indexInContainer - 1][NEXT] = viewToDetach[NEXT] as LView;
380382
}
381-
views.splice(removeIndex, 1);
383+
lContainer.splice(CONTAINER_HEADER_OFFSET + removeIndex, 1);
382384
addRemoveViewFromContainer(viewToDetach, false);
383385

384386
if ((viewToDetach[FLAGS] & LViewFlags.Attached) &&
@@ -400,11 +402,8 @@ export function detachView(lContainer: LContainer, removeIndex: number): LView|u
400402
* @param removeIndex The index of the view to remove
401403
*/
402404
export function removeView(lContainer: LContainer, removeIndex: number) {
403-
const view = lContainer[VIEWS][removeIndex];
404-
if (view) {
405-
detachView(lContainer, removeIndex);
406-
destroyLView(view);
407-
}
405+
const detachedView = detachView(lContainer, removeIndex);
406+
detachedView && destroyLView(detachedView);
408407
}
409408

410409
/**
@@ -678,9 +677,8 @@ export function nativeNextSibling(renderer: Renderer3, node: RNode): RNode|null
678677
function getNativeAnchorNode(parentTNode: TNode, lView: LView): RNode|null {
679678
if (parentTNode.type === TNodeType.View) {
680679
const lContainer = getLContainer(parentTNode as TViewNode, lView) !;
681-
const views = lContainer[VIEWS];
682-
const index = views.indexOf(lView);
683-
return getBeforeNodeForView(index, views, lContainer[NATIVE]);
680+
const index = lContainer.indexOf(lView, CONTAINER_HEADER_OFFSET) - CONTAINER_HEADER_OFFSET;
681+
return getBeforeNodeForView(index, lContainer);
684682
} else if (
685683
parentTNode.type === TNodeType.ElementContainer ||
686684
parentTNode.type === TNodeType.IcuContainer) {
@@ -729,9 +727,11 @@ function getHighestElementOrICUContainer(tNode: TNode): TNode {
729727
return tNode;
730728
}
731729

732-
export function getBeforeNodeForView(index: number, views: LView[], containerNative: RComment) {
733-
if (index + 1 < views.length) {
734-
const view = views[index + 1] as LView;
730+
export function getBeforeNodeForView(index: number, lContainer: LContainer) {
731+
const containerNative = lContainer[NATIVE];
732+
733+
if (index + 1 < lContainer.length - CONTAINER_HEADER_OFFSET) {
734+
const view = lContainer[CONTAINER_HEADER_OFFSET + index + 1] as LView;
735735
const viewTNode = view[T_HOST] as TViewNode;
736736
return viewTNode.child ? getNativeByTNode(viewTNode.child, view) : containerNative;
737737
} else {
@@ -817,9 +817,8 @@ function appendProjectedNode(
817817
// Alternatively a container is projected at the root of a component's template
818818
// and can't be re-projected (as not content of any component).
819819
// Assign the final projection location in those cases.
820-
const views = nodeOrContainer[VIEWS];
821-
for (let i = 0; i < views.length; i++) {
822-
addRemoveViewFromContainer(views[i], true, nodeOrContainer[NATIVE]);
820+
for (let i = CONTAINER_HEADER_OFFSET; i < nodeOrContainer.length; i++) {
821+
addRemoveViewFromContainer(nodeOrContainer[i], true, nodeOrContainer[NATIVE]);
823822
}
824823
} else {
825824
if (projectedTNode.type === TNodeType.ElementContainer) {

‎packages/core/src/render3/view_engine_compatibility.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {assertDefined, assertGreaterThan, assertLessThan} from '../util/assert';
1919

2020
import {NodeInjector, getParentInjectorLocation} from './di';
2121
import {addToViewTree, createEmbeddedViewAndNode, createLContainer, renderEmbeddedTemplate} from './instructions/shared';
22-
import {ACTIVE_INDEX, LContainer, NATIVE, VIEWS} from './interfaces/container';
22+
import {ACTIVE_INDEX, CONTAINER_HEADER_OFFSET, LContainer, NATIVE} from './interfaces/container';
2323
import {TContainerNode, TElementContainerNode, TElementNode, TNode, TNodeType, TViewNode} from './interfaces/node';
2424
import {RComment, RElement, isProceduralRenderer} from './interfaces/renderer';
2525
import {CONTEXT, LView, QUERIES, RENDERER, TView, T_HOST} from './interfaces/view';
@@ -201,14 +201,19 @@ export function createContainerRef(
201201
}
202202

203203
clear(): void {
204-
while (this._lContainer[VIEWS].length) {
204+
while (this.length) {
205205
this.remove(0);
206206
}
207207
}
208208

209209
get(index: number): viewEngine_ViewRef|null { return this._viewRefs[index] || null; }
210210

211-
get length(): number { return this._lContainer[VIEWS].length; }
211+
get length(): number {
212+
// Note that if there are no views, the container
213+
// length will be smaller than the header offset.
214+
const viewAmount = this._lContainer.length - CONTAINER_HEADER_OFFSET;
215+
return viewAmount > 0 ? viewAmount : 0;
216+
}
212217

213218
createEmbeddedView<C>(templateRef: ViewEngine_TemplateRef<C>, context?: C, index?: number):
214219
viewEngine_EmbeddedViewRef<C> {
@@ -250,8 +255,7 @@ export function createContainerRef(
250255

251256
insertView(lView, this._lContainer, adjustedIdx);
252257

253-
const beforeNode =
254-
getBeforeNodeForView(adjustedIdx, this._lContainer[VIEWS], this._lContainer[NATIVE]);
258+
const beforeNode = getBeforeNodeForView(adjustedIdx, this._lContainer);
255259
addRemoveViewFromContainer(lView, true, beforeNode);
256260

257261
(viewRef as ViewRef<any>).attachToViewContainerRef(this);
@@ -287,12 +291,12 @@ export function createContainerRef(
287291

288292
private _adjustIndex(index?: number, shift: number = 0) {
289293
if (index == null) {
290-
return this._lContainer[VIEWS].length + shift;
294+
return this.length + shift;
291295
}
292296
if (ngDevMode) {
293297
assertGreaterThan(index, -1, 'index must be positive');
294298
// +1 because it's legal to insert at the end.
295-
assertLessThan(index, this._lContainer[VIEWS].length + 1 + shift, 'index');
299+
assertLessThan(index, this.length + 1 + shift, 'index');
296300
}
297301
return index;
298302
}

‎packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
{
2121
"name": "CLEAN_PROMISE"
2222
},
23+
{
24+
"name": "CONTAINER_HEADER_OFFSET"
25+
},
2326
{
2427
"name": "CONTEXT"
2528
},
@@ -143,9 +146,6 @@
143146
{
144147
"name": "UnsubscriptionErrorImpl"
145148
},
146-
{
147-
"name": "VIEWS"
148-
},
149149
{
150150
"name": "ViewEncapsulation"
151151
},

0 commit comments

Comments
 (0)