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

refactor(compiler): generate less code for bindings to DOM elements

Browse Source 
Detailed changes:
- remove `UNINITIALIZED`, initialize change detection fields with `undefined`.
  * we use `view.numberOfChecks === 0` now everywhere
    as indicator whether we are in the first change detection cycle
    (previously we used this only in a couple of places).
  * we keep the initialization itself as change detection get slower without it.
- remove passing around `throwOnChange` in various generated calls,
  and store it on the view as property instead.
- change generated code for bindings to DOM elements as follows:
  Before:
  ```
  var currVal_10 = self.context.bgColor;
  if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) {
    self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString()));
    self._expr_10 = currVal_10;
  }
  var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' ');
  if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) {
    self.renderer.setText(self._text_1,currVal_11);
    self._expr_11 = currVal_11;
  }
  ```,
  After:
  ```
  var currVal_10 = self.context.bgColor;
  jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21);
  var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' ');
  jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false);
  ```

Performance impact:
- None seen (checked against internal latency lab)

Part of #13651
This commit is contained in:
Tobias Bosch
2016-12-29 15:03:55 -08:00
committed by Igor Minar
parent 8ed92d75b0
commit db49d422f2
23 changed files with 346 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
modules/@angular/compiler/src/view_compiler/compile_view.ts
View File

@ -9,7 +9,6 @@
import {AnimationEntryCompileResult} from '../animation/animation_compiler';
import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompilePipeSummary, tokenName, viewClassName} from '../compile_metadata';
import {EventHandlerVars, NameResolver} from '../compiler_util/expression_converter';
import {createPureProxy} from '../compiler_util/identifier_util';
import {CompilerConfig} from '../config';
import {isPresent} from '../facade/lang';
import {Identifiers, createIdentifier} from '../identifiers';

7
modules/@angular/compiler/src/view_compiler/constants.ts
View File

@ -47,6 +47,7 @@ export class ViewConstructorVars {
export class ViewProperties {
static renderer = o.THIS_EXPR.prop('renderer');
static viewUtils = o.THIS_EXPR.prop('viewUtils');
static throwOnChange = o.THIS_EXPR.prop('throwOnChange');
}
export class InjectMethodVars {
@ -54,9 +55,3 @@ export class InjectMethodVars {
static requestNodeIndex = o.variable('requestNodeIndex');
static notFoundResult = o.variable('notFoundResult');
}
export class DetectChangesVars {
static throwOnChange = o.variable(`throwOnChange`);
static changes = o.variable(`changes`);
static changed = o.variable(`changed`);
}

11
modules/@angular/compiler/src/view_compiler/lifecycle_binder.ts
View File

@ -7,6 +7,7 @@
*/
import {CompileDirectiveSummary, CompilePipeSummary} from '../compile_metadata';
import {isFirstViewCheck} from '../compiler_util/binding_util';
import {DirectiveWrapperExpressions} from '../directive_wrapper_compiler';
import * as o from '../output/output_ast';
import {LifecycleHooks} from '../private_import_core';
@ -14,10 +15,6 @@ import {DirectiveAst, ProviderAst, ProviderAstType} from '../template_parser/tem
import {CompileElement} from './compile_element';
import {CompileView} from './compile_view';
import {DetectChangesVars} from './constants';
const STATE_IS_NEVER_CHECKED = o.THIS_EXPR.prop('numberOfChecks').identical(new o.LiteralExpr(0));
const NOT_THROW_ON_CHANGES = o.not(DetectChangesVars.throwOnChange);
export function bindDirectiveAfterContentLifecycleCallbacks(
directiveMeta: CompileDirectiveSummary, directiveInstance: o.Expression,
@ -29,7 +26,8 @@ export function bindDirectiveAfterContentLifecycleCallbacks(
compileElement.nodeIndex, compileElement.sourceAst);
if (lifecycleHooks.indexOf(LifecycleHooks.AfterContentInit) !== -1) {
afterContentLifecycleCallbacksMethod.addStmt(new o.IfStmt(
STATE_IS_NEVER_CHECKED, [directiveInstance.callMethod('ngAfterContentInit', []).toStmt()]));
isFirstViewCheck(o.THIS_EXPR),
[directiveInstance.callMethod('ngAfterContentInit', []).toStmt()]));
}
if (lifecycleHooks.indexOf(LifecycleHooks.AfterContentChecked) !== -1) {
afterContentLifecycleCallbacksMethod.addStmt(
@ -47,7 +45,8 @@ export function bindDirectiveAfterViewLifecycleCallbacks(
compileElement.nodeIndex, compileElement.sourceAst);
if (lifecycleHooks.indexOf(LifecycleHooks.AfterViewInit) !== -1) {
afterViewLifecycleCallbacksMethod.addStmt(new o.IfStmt(
STATE_IS_NEVER_CHECKED, [directiveInstance.callMethod('ngAfterViewInit', []).toStmt()]));
isFirstViewCheck(o.THIS_EXPR),
[directiveInstance.callMethod('ngAfterViewInit', []).toStmt()]));
}
if (lifecycleHooks.indexOf(LifecycleHooks.AfterViewChecked) !== -1) {
afterViewLifecycleCallbacksMethod.addStmt(

46
modules/@angular/compiler/src/view_compiler/property_binder.ts
View File

@ -8,19 +8,19 @@
import {SecurityContext} from '@angular/core';
import {createCheckBindingField, createCheckBindingStmt} from '../compiler_util/binding_util';
import {createCheckBindingField} from '../compiler_util/binding_util';
import {ConvertPropertyBindingResult, convertPropertyBinding} from '../compiler_util/expression_converter';
import {createEnumExpression} from '../compiler_util/identifier_util';
import {triggerAnimation, writeToRenderer} from '../compiler_util/render_util';
import {createCheckAnimationBindingStmts, createCheckRenderBindingStmt} from '../compiler_util/render_util';
import {DirectiveWrapperExpressions} from '../directive_wrapper_compiler';
import {Identifiers, createIdentifier} from '../identifiers';
import * as o from '../output/output_ast';
import {isDefaultChangeDetectionStrategy} from '../private_import_core';
import {ElementSchemaRegistry} from '../schema/element_schema_registry';
import {BoundElementPropertyAst, BoundEventAst, BoundTextAst, DirectiveAst, PropertyBindingType} from '../template_parser/template_ast';
import {CompileElement, CompileNode} from './compile_element';
import {CompileView} from './compile_view';
import {DetectChangesVars} from './constants';
import {getHandleEventMethodName} from './util';
export function bindRenderText(
@ -33,11 +33,15 @@ export function bindRenderText(
}
view.detectChangesRenderPropertiesMethod.resetDebugInfo(compileNode.nodeIndex, boundText);
view.detectChangesRenderPropertiesMethod.addStmts(createCheckBindingStmt(
evalResult, valueField.expression, DetectChangesVars.throwOnChange,
[o.THIS_EXPR.prop('renderer')
.callMethod('setText', [compileNode.renderNode, evalResult.currValExpr])
.toStmt()]));
view.detectChangesRenderPropertiesMethod.addStmts(evalResult.stmts);
view.detectChangesRenderPropertiesMethod.addStmt(
o.importExpr(createIdentifier(Identifiers.checkRenderText))
.callFn([
o.THIS_EXPR, compileNode.renderNode, valueField.expression,
valueField.expression.set(evalResult.currValExpr),
evalResult.forceUpdate || o.literal(false)
])
.toStmt());
}
export function bindRenderInputs(
@ -54,31 +58,27 @@ export function bindRenderInputs(
if (!evalResult) {
return;
}
const checkBindingStmts: o.Statement[] = [];
let compileMethod = view.detectChangesRenderPropertiesMethod;
switch (boundProp.type) {
case PropertyBindingType.Property:
case PropertyBindingType.Attribute:
case PropertyBindingType.Class:
case PropertyBindingType.Style:
checkBindingStmts.push(...writeToRenderer(
o.THIS_EXPR, boundProp, renderNode, evalResult.currValExpr,
view.genConfig.logBindingUpdate));
compileMethod.addStmts(createCheckRenderBindingStmt(
o.THIS_EXPR, renderNode, boundProp, bindingField.expression, evalResult));
break;
case PropertyBindingType.Animation:
compileMethod = view.animationBindingsMethod;
const {updateStmts, detachStmts} = triggerAnimation(
const {checkUpdateStmts, checkDetachStmts} = createCheckAnimationBindingStmts(
o.THIS_EXPR, o.THIS_EXPR, boundProp, boundOutputs,
(hasEvents ? o.THIS_EXPR.prop(getHandleEventMethodName(compileElement.nodeIndex)) :
o.importExpr(createIdentifier(Identifiers.noop)))
.callMethod(o.BuiltinMethod.Bind, [o.THIS_EXPR]),
compileElement.renderNode, evalResult.currValExpr, bindingField.expression);
checkBindingStmts.push(...updateStmts);
view.detachMethod.addStmts(detachStmts);
compileElement.renderNode, bindingField.expression, evalResult);
view.detachMethod.addStmts(checkDetachStmts);
compileMethod.addStmts(checkUpdateStmts);
break;
}
compileMethod.addStmts(createCheckBindingStmt(
evalResult, bindingField.expression, DetectChangesVars.throwOnChange, checkBindingStmts));
});
}
@ -108,7 +108,7 @@ export function bindDirectiveHostProps(
DirectiveWrapperExpressions.checkHost(
directiveAst.hostProperties, directiveWrapperInstance, o.THIS_EXPR,
compileElement.compViewExpr || o.THIS_EXPR, compileElement.renderNode,
DetectChangesVars.throwOnChange, runtimeSecurityCtxExprs));
runtimeSecurityCtxExprs));
}
export function bindDirectiveInputs(
@ -132,17 +132,13 @@ export function bindDirectiveInputs(
directiveWrapperInstance
.callMethod(
`check_${input.directiveName}`,
[
evalResult.currValExpr, DetectChangesVars.throwOnChange,
evalResult.forceUpdate || o.literal(false)
])
[o.THIS_EXPR, evalResult.currValExpr, evalResult.forceUpdate || o.literal(false)])
.toStmt());
});
const isOnPushComp = directiveAst.directive.isComponent &&
!isDefaultChangeDetectionStrategy(directiveAst.directive.changeDetection);
const directiveDetectChangesExpr = DirectiveWrapperExpressions.ngDoCheck(
directiveWrapperInstance, o.THIS_EXPR, compileElement.renderNode,
DetectChangesVars.throwOnChange);
directiveWrapperInstance, o.THIS_EXPR, compileElement.renderNode);
const directiveDetectChangesStmt = isOnPushComp ?
new o.IfStmt(
directiveDetectChangesExpr,

26
modules/@angular/compiler/src/view_compiler/view_builder.ts
View File

@ -21,7 +21,7 @@ import {AttrAst, BoundDirectivePropertyAst, BoundElementPropertyAst, BoundEventA
import {CompileElement, CompileNode} from './compile_element';
import {CompileView, CompileViewRootNode, CompileViewRootNodeType} from './compile_view';
import {ChangeDetectorStatusEnum, DetectChangesVars, InjectMethodVars, ViewConstructorVars, ViewEncapsulationEnum, ViewProperties, ViewTypeEnum} from './constants';
import {ChangeDetectorStatusEnum, InjectMethodVars, ViewConstructorVars, ViewEncapsulationEnum, ViewProperties, ViewTypeEnum} from './constants';
import {ComponentFactoryDependency, ComponentViewDependency, DirectiveWrapperDependency} from './deps';
const IMPLICIT_TEMPLATE_VAR = '\$implicit';
@ -483,9 +483,7 @@ function createViewClass(
],
addReturnValuefNotEmpty(view.injectorGetMethod.finish(), InjectMethodVars.notFoundResult),
o.DYNAMIC_TYPE),
new o.ClassMethod(
'detectChangesInternal', [new o.FnParam(DetectChangesVars.throwOnChange.name, o.BOOL_TYPE)],
generateDetectChangesMethod(view)),
new o.ClassMethod('detectChangesInternal', [], generateDetectChangesMethod(view)),
new o.ClassMethod('dirtyParentQueriesInternal', [], view.dirtyParentQueriesMethod.finish()),
new o.ClassMethod('destroyInternal', [], generateDestroyMethod(view)),
new o.ClassMethod('detachInternal', [], view.detachMethod.finish()),
@ -569,36 +567,26 @@ function generateDetectChangesMethod(view: CompileView): o.Statement[] {
stmts.push(...view.detectChangesInInputsMethod.finish());
view.viewContainers.forEach((viewContainer) => {
stmts.push(
viewContainer.callMethod('detectChangesInNestedViews', [DetectChangesVars.throwOnChange])
viewContainer.callMethod('detectChangesInNestedViews', [ViewProperties.throwOnChange])
.toStmt());
});
const afterContentStmts = view.updateContentQueriesMethod.finish().concat(
view.afterContentLifecycleCallbacksMethod.finish());
if (afterContentStmts.length > 0) {
stmts.push(new o.IfStmt(o.not(DetectChangesVars.throwOnChange), afterContentStmts));
stmts.push(new o.IfStmt(o.not(ViewProperties.throwOnChange), afterContentStmts));
}
stmts.push(...view.detectChangesRenderPropertiesMethod.finish());
view.viewChildren.forEach((viewChild) => {
stmts.push(
viewChild.callMethod('internalDetectChanges', [DetectChangesVars.throwOnChange]).toStmt());
viewChild.callMethod('internalDetectChanges', [ViewProperties.throwOnChange]).toStmt());
});
const afterViewStmts =
view.updateViewQueriesMethod.finish().concat(view.afterViewLifecycleCallbacksMethod.finish());
if (afterViewStmts.length > 0) {
stmts.push(new o.IfStmt(o.not(DetectChangesVars.throwOnChange), afterViewStmts));
stmts.push(new o.IfStmt(o.not(ViewProperties.throwOnChange), afterViewStmts));
}
const varStmts: any[] = [];
const readVars = o.findReadVarNames(stmts);
if (readVars.has(DetectChangesVars.changed.name)) {
varStmts.push(DetectChangesVars.changed.set(o.literal(true)).toDeclStmt(o.BOOL_TYPE));
}
if (readVars.has(DetectChangesVars.changes.name)) {
varStmts.push(
DetectChangesVars.changes.set(o.NULL_EXPR)
.toDeclStmt(new o.MapType(o.importType(createIdentifier(Identifiers.SimpleChange)))));
}
varStmts.push(...createSharedBindingVariablesIfNeeded(stmts));
const varStmts = createSharedBindingVariablesIfNeeded(stmts);
return varStmts.concat(stmts);
}