Являются ли свойства жестко закодированных объектов в угловом шаблоне более эффективными в браузере по сравнению с наличием канала для чтения значения - PullRequest
Новая
       26

Являются ли свойства жестко закодированных объектов в угловом шаблоне более эффективными в браузере по сравнению с наличием канала для чтения значения

1 голос
/ 24 мая 2019

Я работаю над проектом Angular, который содержит 24 модуля, и в соответствии с требованиями заказчика всегда вносятся изменения в код.

У нас в руках 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. Я не нашел способа рассчитать производительность рендеринга угловых шаблонов. Итак, я попробовал наивный подход, чтобы проверить снизу вверх и посмотреть, какова производительность трубы. Пожалуйста, предложите мне способ проверить производительность для расчета углового рендеринга шаблона 2.
  2. Я знаю, что это должна быть нечистая труба. Какое снижение производительности при использовании большего количества каналов в шаблоне, чем при использовании жестко закодированных свойств объекта? Потому что здесь только я показал только 2 трубы, но в моем проекте это более чем в 100 раз.
  3. Каким будет лучший подход к этому делу для будущего обслуживания, читаемости кода и стандартного способа решения этой проблемы?
  4. Я знаю, что я передаю объекты в канал, что влияет на производительность по сравнению с передачей примитивного значения?
  5. Мы также нигде не прописываем ключи объекта в файле ts. Мне нужно лучшее решение, чтобы иметь решение для шаблона и файла ts.
  6. Каковы другие подходы к вышеуказанной проблеме?
...