与使用管道读取值相比，角度模板中的硬编码对象属性在浏览器中的性能更好吗？

Question

我正在一个包含24个模块的Angular项目中工作，并且由于客户要求，代码总是会有所更改。

我们有2种方法

1. 直接在模板本身中使用带有键的对象。 示例代码如下：{{object？.property1？.property2}}

2. 我写了一个管道，该管道接受对象和从中获取值的路径。 我已将路径值存储在常量中。 将来，我们希望从数据库中驱动这些常量。 示例代码如下：{{object | deepFind：PROPERTY1_PROPERTY2_PATH}}

这里的PROPERTY1_PROPERTY2_PATH是一个常数，它包含'property1.property2'的值；

我已经在stackblitz中编写了一个示例https://stackblitz.com/edit/angular-jsqhk4

我试图验证这两种方法之间的性能差异，但是在渲染时间上没有发现任何差异。

我尝试使用Chrome Dev Tools的“性能”标签，而deepfind方法仅用了7毫秒。

我无法弄清楚我们需要选择哪种方法？

<ul>
    <!-- Approach 1 -->
    <li *ngFor="let widget of serverResponse.widgets">
        {{ widget?.title }}
    </li>
    <!-- Approach 2 -->
    <li *ngFor="let widget of serverResponse | deepFind: WIDGET_CONSTANTS?.WIDGETS_LIST">
        {{ widget | deepFind: WIDGET_CONSTANTS?.WIDGET_HEADING }}
    </li>
</ul> 

我对此问题有多个疑问

1. 我没有找到任何方法来计算Angle 2模板渲染的性能。 因此，我尝试过幼稚的方法来检查自下而上的效果，看看管道的性能如何。 请建议我一种检查性能以计算角度2模板渲染的方法。
2. 我知道这应该是不纯净的管道。 使用模板中的更多管道而不是硬编码的对象属性会导致性能下降？ 因为在这里我只显示了2个管道，但是在我的项目中却是100倍以上。
3. 为了将来的维护，代码可读性和标准方式来处理此问题，有什么更好的方法来处理这种情况？
4. 我知道我正在将对象传递给管道，与传递原始值相比，会影响性能吗？
5. 我们也无处不在ts文件中对对象键进行硬编码。 我需要一个更好的解决方案来解决在模板以及ts文件中遇到的问题。
6. 解决上述问题的其他方法是什么？