Angular 2 Performance：绑定数据成员比绑定函数更好吗？

Posted 2023-02-23

【中文标题】Angular 2 Performance：绑定数据成员比绑定函数更好吗？

【英文标题】：Angular 2 Performance: Is it better to bind with a data member than a function?

【发布时间】：2018-04-04 18:52:54

【问题描述】：

我想知道绑定到数据成员是否比绑定到函数在性能上更好？

例如下面哪个语句的性能会更好？

1)

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

isThisTrue 是通过方法设置的

checkIfTrue(data)
       this.isThisTrue = data;

在从 observable 接收事件时调用此 checkfTrue()。

或

2)

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

seeIfItHasBecomeTrue 检查 this.isTrue 是否变为真。

我明显觉得绑定到数据成员应该更快，但我不确定这是否总是更快？或者是否有一些灰色区域？还有，如果快的话要多少？

【问题讨论】：

尝试将 console.log 放入 seeIfItHasBecomeTrue - 我怀疑它会被调用 5 到 30 次。如果它是一个简单的函数，那没关系，但如果它更复杂，它可以变成可测量的东西。

my answer 有什么不清楚的地方吗？

抱歉耽搁了。感谢您的回答。你能帮我解答完整的问题吗？我一直在寻找，如果它总是更快，它有多快。

@TypeScripter，是的，它总是会更快，我在回答中解释了原因。速度有多快取决于您运行代码的特定机器

【参考方案1】：

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

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

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

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

并且函数调用比简单的成员访问更重性能。

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

The mechanics of DOM updates in Angular

【讨论】：

链接似乎已损坏。

您仍然可以在 Internet Archive web.archive.org/web/20191114183316/https://…987654322@上看到该文章