Angular 2性能:与数据成员绑定比对函数绑定更好吗? [英] Angular 2 Performance: Is it better to bind with a data member than a function?

问题描述

我想对绑定到数据成员的性能好于绑定到函数的功能有个了解?

I wanted to have some idea about whether binding to data member is better in performance vs binding to a function?

例如以下哪个语句具有更好的性能?

e.g. which of the below statement will have better performance?

1)

<myComp *ngIf="isThisTrue"></mycomp>

通过方法设置isThisTrue的位置

where isThisTrue is being set via a method

checkIfTrue(data){
       this.isThisTrue = data;
}

在接收到来自可观察对象的事件时调用此checkfTrue()的地方.

where this checkfTrue() is being called on receiving an event from an observable.

或

2)

<mycomp *ngIf="seeIfItHasBecomeTrue()"></mycomp>

其中seeIfItHasBecomeTrue检查以查看this.isTrue是否为真.

where seeIfItHasBecomeTrue checks to see whether this.isTrue has become true or not.

我清楚地感觉到绑定到数据成员应该更快，但是我不确定是否总是会更快?还是有一些灰色区域?另外，如果速度更快，那么多少呢?

I clearly feel that binding to data member should be faster, but I am not sure if this will always be faster? or if there are some gray areas? Also, if it is faster then how much?

推荐答案

如果使用方法*ngIf="isThisTrue"，编译器将生成以下updateRenderer函数:

If you use the approach *ngIf="isThisTrue" the compiler will generate the following updateRenderer function:

function (_ck, _v) {
    var _co = _v.component;
    var currVal_1 = _co.isThisTrue;   <--- simple member access
    _ck(_v, 5, 0, currVal_1);
}

如果使用第二种方法*ngIf="seeIfItHasBecomeTrue()"，该函数将如下所示:

If you use the second approach *ngIf="seeIfItHasBecomeTrue()", the function will look like this:

function(_ck,_v) {
    var _co = _v.component;
    var currVal_1 = _co.seeIfItHasBecomeTrue();   <--- function call
    _ck(_v,5,0,currVal_1);
}

与简单的成员访问相比，函数调用的性能更为沉重.

And the function call is more performance heavy than simple member access.

要了解有关updateRenderer函数的更多信息，请阅读:

To learn more about updateRenderer function read:

• 在Angular中DOM更新的机制

这篇关于Angular 2性能:与数据成员绑定比对函数绑定更好吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！