Angular:预构造对象与模板getter

时间:2018-04-10 14:01:41

标签: angular performance typescript performance-testing

我一直想知道是否使用充满吸气剂的模板,或者只是使用旋转变压器预先构建整个物体,我似乎无法在任何地方找到明确的答案。

我在下面创建了两个简化的方案。

目前,我总是使用方案1,但是一旦应用/程序变得更加复杂,我就会注意到(巨大的)性能下降,因此我从现在开始考虑使用方案2。

场景1:获取功能

  • Pro:您只能在当前模板中获取/使用您需要的任何内容。添加新的getter不需要您更新接口。
  • Con:在单个模板中拥有数百/数千个吸气剂时对性能的影响(我认为)。

代码:

var devices = ['desktop', 'tablet', 'mobile'];

var icons = {
    desktop: 'icon-desktop',
    tablet: 'icon-tablet',
    mobile: 'icon-mobile'
}

var translations = {
    desktop: 'Desktop',
    tablet: 'Tablet',
    mobile: 'Mobile'
}

getIcon(item: string): string {
    return icons(type);
}

getTranslation(item: string): string {
    return translations(type);
}

模板:

<div *ngFor="device in devices">
    <i [class]="getIcon(device)"></i>
    <span>{{ getTranslation(device) }}</span>
</div>

场景2:预构建对象

  • Pro:使用resolve,可以轻松预构建整个对象,从而跳过模板中的所有getter。
  • Pro:对象永远不会改变,因此Angular不必观察&#39;它。
  • Con:对象可能变得庞大,并且可能永远不会使用许多属性。

代码:

var devices = [
    {
        item: 'desktop',
        translation: 'Desktop',
        icon: 'icon-desktop'
    },
    {
        item: 'tablet',
        translation: 'Tablet',
        icon: 'icon-tablet'
    },
    {
        item: 'mobile',
        translation: 'Mobile',
        icon: 'icon-mobile'
    }
]

模板:

<div *ngFor="device in devices">
    <i [class]="device.icon"></i>
    <span>{{ device.translation }}</span>
</div>

有谁能告诉我每种情况的利弊,为什么?性能如何(我的主要问题)?个人偏好或经历?

2 个答案:

答案 0 :(得分:1)

每次更改检测周期都会调用

getTranslation(device)。这提供了性能开销,但只要getTranslation本身并不昂贵,这是无关紧要的。

更常规的方法是使用像{{ device | translation }}这样的管道。这可以是纯管道,效率更高。但是,如果语言应该动态更改,那么管道应该是不纯的,因为即使device值不变,表达式也会计算为新值。

答案 1 :(得分:1)

根据我的经验,使用模板中调用的getter将比函数调用近100%。您可以通过在每个中插入console.count()来测试。

取决于您的应用或组件使用OnPush更改检测策略,这将彻底切断通话。